【はてなブログ】記事下の関連記事をMilliardプラグインを使って見やすくしてみた

スポンサーリンク



先日、『はてなブログのテーマを「Brooklyn」にしてみたよ』というお話をさせて頂きました。

僕好みにかなりデザインを変更させて頂いたのですが、とても弄りやすく、扱い易いテーマで助かりました。デフォルトの状態が気に入っているので、大部分はそのまま使用させて頂いております。

さて、今回は記事下の関連記事をMilliardプラグインを使って見やすく表示させる方法についてまとめていきたいと思いますよ。

以前までの関連記事の表示方法

これまで、関連記事の表示プラグインは「あわせて読みたいG」を使わせて頂いておりました。はてなブログのブログカードのように大きく表示されるので、ここから関連記事に飛んでくださる方も多くいらっしゃったかと思います。

しかし、スマホだとなぜか表示されない……。Google Feed APIの停止問題の影響によるものだと思うのですが、この機会に「Milliard関連記事プラグイン」に切り替えることにしました。

bulldra.hatenablog.com

Milliard関連記事プラグインを導入してみたのでBefore・After

Before(あわせて読みたいG)

デザインはあまりいじっておらず、ほぼデフォルトの状態。これはこれで悪くはないのですが、もう少しブログ記事の表示数を増やしたいですね。

あとは細かなデザイン。「あわせて読みたい」と表示されている部分をもう少し強調できればな、と。

f:id:afrokanchan:20160507110916p:plain

After(Milliard関連記事プラグイン)

こちらがMilliard関連記事プラグイン後のAfter画像。「関連記事」であることをブログのイメージカラーを使うことでわかりやすくしてみました。

ブログ記事の表示数も一画面で「10個」まで見られるようになりました。スマホの場合は6個。うん、見やすい。

f:id:afrokanchan:20160507110928p:plain

ちなみに、Milliard関連記事プラグインのカスタマイズについてはゆきひーさんの記事を参考にさせていただきました。コピペです。

www.yukihy.com

Milliard関連記事プラグイン導入方法

まずはこちらの公式サイトにアクセス。

Milliard関連ページプラグインについて | シスウ株式会社

下の方にスクロールしていくと「はてなブログ」等、ブログごとに導入法が紹介されています。今回は「はてなブログ」で。

f:id:afrokanchan:20160507112215p:plain

参考までに、僕の設定をご紹介します。

f:id:afrokanchan:20160507112903g:plain

あとは、コードをサイトに埋め込むだけ。僕の場合は記事下に設置しましたー。

f:id:afrokanchan:20160507114144p:plain

CSSは、スマホの場合、Milliard関連プラグインのコードを挿入した箇所、パソコンの場合は、「デザインCSS」に追加すればOKです。

CSSは以下の記事をコピペ&改変させていただきました。

記事下のMilliard関連記事プラグインを、見栄えよくカスタマイズ – 気ままに殴り書き

まとめ

はい。というわけでザックリとでしたが「Milliardプラグイン」の導入についてのお話でした。

まだ今回のこの処置がPV数にどう影響しているのかはわかりませんが、以前よりも見やすくなったのではないかな、と思います。
この場を借りて、池田仮名さん、ゆきひーさん、そして、けんけんさんには感謝の意を表したいと思います。

関連記事

スポンサーリンク





この記事を書いた人

あめよふれ

あめのはっていいます。どうぞよろしく。

「”とり”あえずやっ”てみ”る。略して、とりてみ」がモットーの24歳。ノマドチャリダー。自転車で日本一周してます。アニメ聖地・心霊スポット・世界遺産巡り。趣味はアニメ鑑賞・ベース演奏・旅行・カメラなど。