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

2015.12.16

ブログ

どうも。サウンドオルビス（ @soundorbis ）です。

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

この記事の目次

Milliard とは？対応しているブログサービスについて
Milliard の設置の仕方。シスウ株式会社のページにリンクしよう！
Blogger記事内に表示する方法は？
- <data:post.body/> を探して！　指定位置に関連ページを出力する方法
Milliard を CSS でカスタマイズする方法
当ブログの Blogger カスタマイズ例
関連記事表示は Milliard をおすすめするポイント
まとめ：Blogger で関連記事を表示させるなら、Milliard が最強。

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

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

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

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

Milliardtaioublog

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」を導入して最初にカスタマイズ・設定した部分まとめ

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

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

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

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

当ブログの 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を力技で設定変更。フッターの下に表示させなくする方法