(cache) コピペでOK！はてなブログの記事直下に最新記事一覧を表示するカスタム

最新記事一覧をサイドバーだけに表示するのではなく、記事直下にも表示可能。記事を「続きを読む」でリード文と本文で分ける書き方をしている方が望ましい。

f:id:hapilaki:20140516223735p:plain

概要

はてなブログの管理画面で、筆者が作成したjQueryプラグインと最新記事一覧を表示するコードをコピペで追加する。表示のされ方はCSSで調整する。PCで表示され、スマホには未対応。

サイドバーにはてなブログ標準の「最新記事」モジュールを表示していることが必須。

「続きを読む」を活用している人向け

記事を「続きを読む」でリード文と本文で分ける書き方をしている方が望ましい。つまり、各記事を閲覧する時に、その記事のパーマリンクでページを表示しないと全文が見えない設定をしていること。

ブログのHOMEページで記事全文が表示される設定にはあまり向いていない。

まずjQueryプラグイン・チョマテヨを設置

はてなブログではjQueryがページ下部で読み込まれる。jQuery本体の読み込み前でもjQuery記法が作動するようにチョマテヨを導入。詳細は次のページで確認できる。

チョマテヨ「ちょ待てよ！jQueryの2回読み込み、プラグインあるからさ」 - はぴらき合理化幻想

記事下に追加するコード

追加する場所

管理画面 → デザイン → カスタマイズタブ → 記事 → 記事上下のカスタマイズ → 記事下に追加する。図解を次のページで確認できる。

はてなブログのテーマはCSS編集でカスタム。HTML編集は部分的にしかできない - はぴらき合理化幻想

追加するJavaScriptコード

最新記事一覧だけ表示するコード。

<div id="to-hateb"></div>
<!--
コピペでOK！はてなブログの記事直下に最新記事一覧を表示するカスタム - はぴらき合理化幻想
http://hapilaki.hateblo.jp/entry/recent-entries-clone
ver1.0.0.140516
-->
<script type="text/javascript">
// <!--
$(function(){
  var recent=$('.hatena-module-recent-entries .hatena-module-body');
  var to_bateb=$('#to-hateb');
  to_bateb.after(recent.clone().attr('id','recent-clone'));
  $('#recent-clone').before('<h2>最新記事</h2>');
});//end func
// -->
</script>

最新記事一覧とその前にはてなブックマークへのリンクを追加するコード。

<div id="to-hateb"></div>
<!--
コピペでOK！はてなブログの記事直下に最新記事一覧を表示するカスタム - はぴらき合理化幻想
http://hapilaki.hateblo.jp/entry/recent-entries-clone
ver1.0.0.140516
-->
<script type="text/javascript">
// <!--
document.getElementById('to-hateb').innerHTML='<a href="http://b.hatena.ne.jp/entry/'+location.href.split('//')[1]+'" style="font-size:25px;display:block;margin-bottom:15px;" target="_blank" rel="nofollow">&#10140; <img src="http://cdn-ak.f.st-hatena.com/images/fotolife/h/hapilaki/20140422/20140422145114.png" width="20" height="20" alt="はてブ">でコメントする</a>';

$(function(){
  var recent=$('.hatena-module-recent-entries .hatena-module-body');
  var to_bateb=$('#to-hateb');
  to_bateb.after(recent.clone().attr('id','recent-clone'));
  $('#recent-clone').before('<h2>最新記事</h2>');
});//end func

// -->
</script>

追加するCSSコード

現在当ブログで設定しているCSSは次のとおり。ブログに合わせて適宜調整可能。

/*
コピペでOK！はてなブログの記事直下に最新記事一覧を表示するカスタム - はぴらき合理化幻想
http://hapilaki.hateblo.jp/entry/recent-entries-clone
ver1.0.0.140516
*/
#recent-clone > ul > li {
  float: left;
  height: 100px;
  overflow: hidden;
  width: 45%;
}
#recent-clone > ul > li:nth-child(odd) {
  padding-right: 5%;
}