searchformモジュールや記事一覧ページなどで新しいhtmlタグやクラス名を追加しました(開発者向け情報)

searchformモジュールや記事一覧ページなどのページで、新しいhtmlタグやクラス名を追加いたしました。今回の変更により、テーマやスタイルシートによるデザインのカスタマイズをより柔軟に行っていただけるようになりました。

詳細は以下の通りです。

searchformモジュール

追加したhtml,class
  • .serchform-word
  • .serchform-button
  • label.searchform-label-detail
  • label.searchform-label-list
  • .searchform-radio
  • .searchform-radio
サンプル
<form class="hatena-searchform">
  <input type="text" class="hatena-searchform searchform-word"><input type="button" class="hatena-searchform searchform-button">
  <br>
  <label class="searchform-label-detail"><input type="radio" class="searchform-radio">詳細</label>
  <label class="searchform-label-list"><input type="radio" class="searchform-radio">一覧</label>
</form>

記事一覧ページ(/archive)

追加したhtml,class
  • #archive-cateogry
  • #archive-calendar-top
  • #archive-calendar-bottom
  • span.delimiter
  • span.year
  • .month
  • .category
サンプル
<div class="calendar" id="archive-category">
  <span class="delimiter">|</span> <a class="category">カテゴリー</a> <span class="delimiter">|</span>
</div>
<div class="calendar" id="archive-calendar-top">
  <span class="year">2008</span> <span class="delimiter">|</span> <a class="month">07</a> <span class="delimiter">|</span>
</div>
・
・
・
<div class="calendar" id="archive-calendar-bottom">
  <span class="year">2008</span> <span class="delimiter">|</span> <a class="month">07</a> <span class="delimiter">|</span>
</div>

「前の日」「次の日」ページャー

追加したhtml,class
  • .prev
  • .next
  • span.delimiter
サンプル
<div class="calendar" id="pager-top">
  <a class="prev">&lt;前のX日分</a>&nbsp;<span class="delimiter">|</span>&nbsp;<a class="next">次の5日分&gt;</a>&nbsp;（<span id="edit-in-place-add"> <span class="delimiter">|</span> <a href="javascript:;">新しいエントリー</a></span>）
</div>
・
・
・
<div class="calendar" id="pager-bottom">
  <a class="prev">&lt;前のX日分</a>&nbsp;<span class="delimiter">|</span>&nbsp;<a class="next">次の5日分&gt;</a>
</div>

calendarモジュール

追加したhtml,class
  • span.delimiter
  • span.year
  • .month
サンプル
<div class="calendar">
  <span class="year">2008</span> <span class="delimiter">|</span> <a class="month">07</a> <span class="delimiter">|</span>
</div>

idea:20347、idea:20348でご要望いただいておりました。ご要望いただいたユーザー様、ありがとうございました。