関連記事の決定版か!?「あわせて読みたいG」を導入して、スッキリ＆高機能になりました

f:id:mr58n:20141112160014j:plain

当ブログは今まで関連記事の表示に「Zenback」を使用していました。

しかし、この導入していたZenbackに私は満足できない点がありました。

他を探していたところ、池田仮名さん(id:bulldra)のブログ「太陽がまぶしかったから」で提供されているウィジェット「あわせて読みたいG」が非常に私の希望通り、且つ、その上をいく高機能でしたので早速導入してみました。

Zenbackの不満点

f:id:mr58n:20141112163444j:plain

Zenbackも良いウィジェットなんですが、不満点が2つあります。

その記事とは関係ないカテゴリの記事が表示される
広告や、他ブログの記事リンクが挿入される

無料で使わせていただいているので、仕様は理解しないといけないのですが、やはり無い方が良い！
私は単純に、その記事と同じカテゴリの記事たちを関連記事として表示させたいのです。広告や他ブログのリンクも要りません。

ということで、辿り着いたのがこちら

<a href="http://bulldra.hatenablog.com/entry/read-together-g" data-mce-href="http://bulldra.hatenablog.com/entry/read-together-g">はてなブログで表示記事に関係するカテゴリのブログカードを記事下に表示させる「あわせて読みたいG」の公開 - 太陽がまぶしかったから</a>
はてなブログで表示記事に関係するカテゴリのブログカードを記事下に表示させる「あわせて読みたいG」の公開 - 太陽がまぶしかったから

主な特徴は、上記の記事より引用させていただくと、

セレクトボックスの内容から指定枚数のブログカードをランダム表示

表示エントリのカテゴリを初期設定

表示内容の更新が可能

「アーカイブ」「はてなブックマーク」「カテゴリ一覧」画面への移動が可能

と、私の希望＋それ以上の機能がついておりましたので早速導入してみました。

導入方法

f:id:mr58n:20141112164745j:plain

管理画面のデザイン設定画面から、記事下に次のソースコードを貼り付けてください。

<script src="https://www.google.com/jsapi"></script>
<script src="http://bulldra.github.io/commons.js" charset="utf-8"></script>
<script src="http://bulldra.github.io/gatcha.js" charset="utf-8"></script>

<script type="text/javascript">
writeGatcha(3,'entryGatcha','category','あわせて読みたい' );
google.setOnLoadCallback(function(){ writeGatchaCategory('entryGatcha') } );
</script>
はてなブログで表示記事に関係するカテゴリのブログカードを記事下に表示させる「あわせて読みたいG」の公開 - 太陽がまぶしかったから

サイトに反映させてみると、下のようにブログカード形式で表示されます。

f:id:mr58n:20141112170448j:plain

あとは見出し部分をCSSでカスタマイズします。

CSSで見出しをオリジナルデザインにする

f:id:mr58n:20141112170919j:plain

当ブログでは上のような見出しデザインにしました。

はてなブログテーマ「Simple Gray」をお使いのユーザー様は下記のソースコードをデザイン設定画面の[デザインCSS]に貼り付けていただくと同じ表示になります。

/*あわせて読みたい*/
.hatena-module-foot {
 position:relative;
 display:block;
 margin:20px 0 30px;
 padding:10px;
 border-radius:2px;
 color:#333;
 background-color:#f3f3f3;
 font-weight:bold;
}
.hatena-module-foot:before {
 content: "";
 position: absolute;
 bottom: -10px;
 left: 30px;
 display: block;
 width: 0px;
 height: 0px;
 border-style: solid;
 border-width: 11px 11px 0 11px;
 border-color: #f3f3f3 transparent transparent transparent;
}
.hatena-module-foot:after {
 display:block;
 height:0;
 content:"";
 clear:both;
}
[id="entryGatchagachaSpan"] p {
 overflow:hidden;
 margin-top:-15px;
}