読者です 読者をやめる 読者になる 読者になる

太陽がまぶしかったから

C'etait a cause du soleil.

サイドバーから過去記事を辿れる「もっと読む記事リスト」を作ってみた

プログラミング プログラミング-はてなブログカスタマイズ

もっと読む記事リスト

 サイドバーの記事一覧からいっぱい見られると便利そうですね。実は作ろうとした事があるのですが、AJAXでやろうとするとアイキャッチ画像の取得が意外に面倒だったり、表示速度的な問題があって放り投げていました。ブログカード形式はサイドバーに適さないですし。

 それで代替案を考えて標準の最新記事モジュールの限界である20記事分を取得してスクリプトで表示・非表示を切り替えることで擬似的に「もっと読む記事リスト」を実現させてみました。実行イメージは以下の通りです。

https://vine.co/v/Ov2ZvX31jgX

設置方法

 デザイン画面のサイドバーの「最新記事」を「表示件数20件」で作成します。

 フッタ部分に以下の記述を追加します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://bulldra.github.io/moreread.js" charset="utf-8"></script>
<script type="text/javascript">
initRecentEntriesMoreRead(8, 3); /* 表示件数,移動件数 */
</script>

 CSSに以下の記述を追加します。使用しているブログデザインに合わせて修正してください。

.hatena-module-recent-entries .hatena-urllist li  {
  padding: 8px 0px;
  border-top: 1px dashed #c7dce3;
  line-height: 1.5;
  font-size:80%;
}

.hatena-module-recent-entries .hatena-urllist li:first-child {
  border-top: none;
}

.hatena-module-recent-entries .hatena-urllist .recent-entries-allow {
  text-align:center;
  color:#800;
  background-color:#ccc;
  border: solid 1px #000;
}

.hatena-module-recent-entries .hatena-urllist .recent-entries-allow:hover {
  color:#600;
  background-color:#aaa;
}

まとめ

 以上のように設定する事でサイドバーから過去記事を辿れる「もっと読む記事リスト」が実現できます。20記事分までの「なんちゃって実装」ですが、そこまで連打する人も少ないかなーとも。最初から20記事を展開しているとサイドバーが長くなりすぎてしまいますが、必要に応じて辿ってもらう事で過去記事にたどり着いてもらいやすくなることが期待できますね。なお、設置サポートや表示スタイル/アルゴリズムのカスタマイズ等のご依頼がありましたらサポートライセンスの購入をお願いいたします。

JavaScriptエンジニア養成読本 [Webアプリ開発の定番構成Backbone.js+CoffeeScript+Gruntを1冊で習得! ] (Software Design plus)

JavaScriptエンジニア養成読本 [Webアプリ開発の定番構成Backbone.js+CoffeeScript+Gruntを1冊で習得! ] (Software Design plus)