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

ネガティブベイベー

ネガティブでマイナス思考な雑記ブログ。ポジった時はごめんなさい。

はてなブログで関連記事を表示するために「Milliard」を導入したよ

お知らせ
スポンサーリンク

ついさっき設置したかのようなタイトルだけど、数日前から「Milliard関連ページ」を本文下に表示させている。

お知らせも兼ねてMilliardを選んだ理由などを紹介してみたいと思う。普段と毛色の違う記事内容だけど、たまにはこういうのもいいかな。

Milliardを選んだ理由

関連記事を本文下に表示させようと調べたところ、次のような方法があった。(ナンバリングはおすすめ順位を表しているわけではない)

他にもあるかもしれないけど、僕が見つけられたのは以上の7つだ。上から5つまではユーザーさんが考えた方法。僕は全然こういうのを作れないから素直に尊敬する。

どれも素晴らしい方法なんだけど、僕が選んだのはシスウ株式会社が提供する「Milliard関連ページ」というものだった。はてなブログに限らず、ワードプレスやライブドアブログでも使っている方をよく見かける。

これを選んだ理由は、僕好みの表示方法が簡単に実現可能だったからである。

上から2つ目までの方法は、基本的に「同カテゴリ記事の最新〇件が関連記事として表示される仕様」となっている。2カテゴリ(しかも大多数の記事は「雑記」に属す)しかない当ブログだと、実質、どの記事でも同じ内容が表示されることになる。それだとサイドバーに新着記事を表示させているこれまでと変わらないと思った。

3つ目の方法は、同カテゴリの記事に限るとはいえ、ランダムで表示させることが可能なので良さげに思えた。しかし、記事元で触れられているように、そのカテゴリの最新30件しか対象にならないのがネックだった。

4つ目の「あわせて読みたいG」は同カテゴリ内の記事をランダムで表示させることができる(ボタンによる更新も可能)ものの、ブログカード形式という点がネックだった。個人的には別タブ(ウインドウ)で開かないのが好きだし、長い記事タイトルだと省略されてしまうのが好みでなかった。

5つ目の「Also read」は「あわせて読みたいG」と似ているが、こちらはブログカードではなくリスト形式で表示させることもできた。

6つ目の「Milliard関連ページ」もリスト形式の表示が可能だった。「Also read」とどちらにしようか悩んだが、手っ取り早く好みの表示スタイルが実現できたため「Milliad関連ページ」を利用することにした。

ちなみに、7つ目のZenbackは広告が表示されてしまうのが最大の難点だった。他サイトの記事も表示される点も採用を見送った理由のひとつ。そもそも、関連記事を表示させるのは回遊率を上げる狙いがあったしね。

今回は以上のような理由で「Milliard関連ページ」を採用することにした。

*今後、どっかのタイミングで別のものを使い始めるかもしれない。例えば、「Also read」なんかはカスタマイズ性に富むので候補のひとつだ。

Milliardの導入・設定

単純に「Milliard関連ページ」を表示させるだけなら、提供元のシスウ株式会社の記事が丁寧に解説されているため参考となる。

corp.shisuh.com

下手に僕が解説するより、上の記事を読んだ方がずっと分かりやすいため、ここで設置までの流れを紹介することはしない。

じゃあ何を書くかというと、当ブログで設定しているCSSの紹介をしたいと思う。すごくシンプルだけど、そういうのが好きな人の参考になると幸いだ。

なお、Scriptコード作成画面では次のように設定している。(投稿日時点)

Milliard関連ページの関連記事ツール設定画面

*当ブログはレスポンシブデザインを採用しているため、<スマホでの表示>という項目はどうすればいいか悩んだものの、この画像の設定で今のところ問題は生じていない。

そして、カスタマイズのデザインCSSには次の記述を加えた。

.ssLimitedContainerHeader {
    padding:9px 0;
    font-size:17px !important;/*こんな記事もあるよの文字サイズ*/
}
.ssArticlesContainer {
    border:0 !important;
    margin-bottom:-10px;
}
.ssPanel {
    padding: 0px 0px 10px !important;
    border-bottom: 0px !important;
    font-size:15px !important;/*リンクの文字サイズ*/
}
.ssPanel div.ssTitle{
    padding: 0 !important;
    display: inline-block;
    text-decoration: underline;
}
.ssTitle:hover {
    background: #f4f6f7;
}
.ssPoweredBy{
    margin-bottom:-10px;
}
/*サムネイル画像を表示させないように*/
.ssPanel > div.ssOriginalTemplateImgContainer {
    display: none;
}

このように「文字サイズの変更・余白の調整・ボーダーの非表示・オンマウス時のリンク背景色指定・サムネイル画像の非表示」をしてみた。

<!important>を使っているのは、こうしないと効かなかったからだ。ちなみに、クラス名(?)はChromeのデベロッパー・ツールを用いて調べたものを指定している。

 

当ブログにおける「Milliard関連ページ」の設定は以上の通りだ。関連記事の表示を考えている方にとって、少しでも参考になれば嬉しく思う。

おしまい。

<2016/04/27追記>
ブログデザインリニューアルに伴いコードを修正・追記。なお、記事表示数も7→10に変更している。

広告を非表示にする