【まとめ】MilliardでBloggerに関連記事を表示させるカスタマイズ方法

どうも、サウンドアーティストのサウンドオルビス（@soundorbis）です。

Bloggerで美しく関連記事を表示する方法があるんです。それが、シスウ株式会社が提供している「Milliard」なのです。今回は、プラグイン「Milliard」をのカスタマイズ方法を紹介します。

Milliard とは？ 対応しているブログサービスについて

Milliard関連ページプラグインについて

Milliard とは、シスウ株式会社が提供している「無料でブログ記事関連を表示するプラグイン」のことです。

シスウ株式会社いわく……関連ページを「スタイリッシュかも？」らいに綺麗に表示できるツールとのことです。納得。

• Blogger
• Word Press
• Hatena Blog
• livedoorBlog
• FC2

これらが、Milliard に対応しているブログサービスです。Blogger もバッチリ対応しています。この記事では Blogger でのカスタマイズ方法を解説いたします。

Milliard の設置の仕方。シスウ株式会社のページにリンクしよう！

さっそく、設置のやり方を載せておきます。

http://www.shisuh.com/statics/relatedPageSetting/ にて、自分のサイト情報を入力し、スクリプトコードを生成します。

参照元：Bloggerでの設置方法

ちなみにこのブログのスクリプトコードは、こんな感じです。コピペする場合はコードないの「ブログURL」の部分をあなたのブログのURLに書き換えてください。↓

<!--Milliardタグ-->
<script>//<![CDATA[
window.Shisuh = (window.Shisuh) ? window.Shisuh : {};Shisuh.topUrl='ブログURL';Shisuh.type='Blogger';Shisuh.headerText='あなたにピッタリの記事探してきました！';Shisuh.alg='Related';Shisuh.showBottom='0';Shisuh.showInsert='1';Shisuh.insertAfterScript='1';Shisuh.showInsert='1';Shisuh.originalTemplateTypeWide='List';Shisuh.originalTemplateOffScrollCountWide='6';Shisuh.originalTemplateTypeNarrow='List';Shisuh.offScroll='1';Shisuh.offScrollCount='6';
//]]></script><script charset='utf-8' id='ssRelatedPageSdk' src='https://www.shisuh.com/djs/relatedPageFeed/' type='text/javascript'/>
<!--Milliardタグ-->

生成されたスクリプトコードを「レイアウト」→ガジェットを追加」→「HTML/JavaScript」を追加すれば、ブログに関連記事が追加されます。しかしこれは、サイドバーに設置するにはいいですが…

記事ページだけに、関連記事表示したいんだけど！

って人向けの設置方法も、載せておきますね。

Blogger記事内に表示する方法は？

テンプレートを直に編集して、記事内の好きな場所にMilliardを表示させましょう。

必ず blogger のテンプレートを保存してバックアップを取ることをお忘れなく。

公式サイトでは「指定位置に関連ページを出力する方法」として紹介されています。

<data:post.body/> を探して！　指定位置に関連ページを出力する方法

まずは Blogger の HTML 編集画面から、記事本文のタグ

<data:post.body/>

を見つけましょう。

参照元：Bloggerでテンプレートを直接編集して、指定位置に関連ページを出力する方法

参照元では「post-body entry-content」付近という表現でした。もっと早く設置するには　<data:post.body/>　を見つけてすぐ下に下記コードを記入すれば良いのです。

<!--関連記事用html-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<ins id='ssRelatedPageBase'/>
</b:if>
<!--関連記事用htmlここまで-->

何も考えずそのまま、<data:post.body/> すぐ下にコピペでどうぞ！

最後にテンプレートを保存します。

あとは最初に生成したスクリプトコードを、好きな場所に置いちゃいましょう。長くて10分もすれば、表示されるはずです。

Milliard を CSS でカスタマイズする方法

参考になる外部サイト貼っておきますね！

[Å] WordPressプラグイン「Milliard」を導入して最初にカスタマイズ・設定した部分まとめ

文字の太さ・大きさ・マージン・パッディングの設定方法。

ブログの関連記事を表示する「Milliard」の見た目をCSSでちょっとだけカスタマイズ – 広汎性発達障害の女がたまに毒を吐くブログ

↑上記リンク先のサイトが、とても参考になりました。

Milliard関連記事プラグインのCSSをいじり２列にしてブログになじむようにしてみました – Yukihy Life

リスト用のカスタマイズ。私も２列にすべきか迷ってます。

関連記事表記にMilliard関連ページプラグインを導入しサイドバーに固定してみました – Yukihy Life

サイドバーに置く注意点がわかります。

当ブログの Blogger カスタマイズ例

/* ^^^^^^^^ Milliard関連記事 ^^^^^^^^^^ */
.ssArticlesContainer.limited{
max-height:600px !important;
}
img.ssImg{
width: 120px !important;
}
.ssArticlesContainer{
padding-bottom: 0 !important;
}
.ssPoweredBy{
margin-top:0 !important;
}
.ssArticlesContainer.limited a {
font-weight:bold;
}
/* ^^^^^^^^ Milliard関連記事 ^^^^^^^^^^ */

ちなみに「@soundorbis.com」では、このように CSS を設定しました。

タイルではなくリストなのは、スマホと表示を同じにしたかったから。どちらが見やすいか、使いやすい方を選べばいいと思います。

ちなみにスクリプトコード生成時「表示位置のフッター下」チェックを外さないと、ブログのフッター下に無限に関連記事が表示されていきます（怖）

チェック外し忘れたら生成されたコードの「Shisuh.showBottom=‘1’」を「Shisuh.showBottom=‘0’」に変更すれば、元に戻ります。

スマホでの表示では「挿入箇所のスクロールを無効にする」にチェックを入れたほうが良さそうですね。

経験ありませんか？スクロール付きで画面を埋められて、記事の内容までなかなかたどり着けないトレンドサイトを…止めといたほうが無難です。

関連記事表示は Milliard をおすすめするポイント

1. 美しいタイル表示
2. 視認性にすぐれたリスト表示
3. 圧倒的な情報量
4. レスポンシブ対応
5. カスタマイズ性に優れる
6. YouTubeのサムネイルも自動で取得！
7. もはや必需品

Milliard をお勧めする 7 つの理由です。

１つずつ説明しちゃいましょう↓

美しいタイル表示

最大の売りポイント。このタイル表示を見て！美しい……

どんなブログデザインでも、なんとなく馴染んでしまう。

しかもコピペでできちゃうのは、本当にありがたい。

視認性にすぐれたリスト表示

リスト表示だって、この通り！

タイル表示がご所望でないブロガーの方にも、ちゃんと対応している姿勢がなんとも素晴らしい。

とりあえずコピペでここまで仕上げてくれるなんて、Milliard 様様です。涙

スクロール機能で、圧倒的な情報量でアクセスアップ

タイル表示、リスト表示ともに、スクロール機能がついています。

決められた枠の中で関連記事をスクロールしていくことで、どんどん関連の記事を表示させていくことができます。

この情報量で、アクセスアップ！？

レスポンシブ対応

PCではタイル、スマホではリスト表示など、各デバイスにレスポンシブな対応が可能です。

いちいちスクリーン幅指定しなくても、Milliardなら自動でやってくれます。

時間のないブロガーには、最高の「お・も・て・な・し」

( ・∇・)

カスタマイズ性に優れる

ノーマル状態の Milliard が気に入らなければ、CSS でカスタマイズ可能です。

コピペでできるので、後ほど参考記事も掲載しておきますね。

懐の深さに感服です。

YouTubeのサムネイルも自動で取得！

YouTube動画を記事のサムネイルにしても、自動でサムネイル画像を取得しくれるんですよ。

これは、ほんと便利。

ボカロPや、アーティストの楽曲掲載記事でも使えるから超楽チン！

もはや必需品

簡単に華やかな関連記事スペースを設けることができます。

一度使ったら、手放せません。動作も軽くて、言うことなし。

まとめ：Blogger で関連記事を表示させるなら、Milliard が最強。

ブログの関連記事なら、純正のものを使うよりも何倍もオシャレで簡単に設置できちゃいましたね。

これでさらに！記事の執筆に時間をかけられるというものです！

さいごに、公式サイトで利用者の記事が掲載されているので、さらにカスタマイズについて知りたい方は、ご覧ください！

Milliard関連ページプラグインについて