最新記事モジュールでもっと見るボタンを設定できるようになった

f:id:c-miya:20180418222923j:plain

先日、はてなブログがアップデートされ、サイドバーに表示される「最新記事モジュール」で設定された表示件数を超える場合「もっと見る」リンクを表示できるようになりました。

生成されるhtml

<div class="urllist-see-more recent-entries-see-more">
  <a href="https://www.foxism.jp/archive" class="urllist-see-more-link recent-entries-see-more-link">
  もっと見る
  </a>
</div>

実際に表示させてみたところ、上記のようなhtmlでした。すごくシンプル。そしてここにデフォルトでは特にcssはついてないようでした。(継承されるもののみ)

とりあえずのcss

まぁhtmlもシンプルですし、とくに大きな装飾する必要もないので、私の場合は簡単に枠で囲っておきました。

.urllist-see-more-link{
  display: block;
  border: 1px solid #999;
  text-align: center;
  line-height: 2.5;
}

::beforeを使って「もっと見る」の前にアイコンを表示させてもいいかもしれませんね。

とりあえず、そんなとこで。