【サービス終了】Bloggerの関連記事にMilliard!!カスタマイズ方法
Blogger は外部テーマを使うことで、関連記事を表示できます。テーマのサンプルページの英語だとかっこいいのに、なぜか日本語にするとデザインが崩れてしまうんですよね？
そこで紹介したいのが、関連記事プラグイン「Milliard」です。
無料で簡単に、Bloggerで美しい関連記事を表示させることができるんです。きっとこの記事を読んでいる方は、Milliard のすごさに気がつき、さらにHTMLやCSSをカスタマイズしてみたい！と思っているのではないしょうか。
というわけで今回は、Blogger関連記事の決定版「Milliard」のカスタマイズ方法をご紹介します。
便利なサービスだった「Milliard」は、2020 年 1 月 1 日 17:00 にサービスが終了した模様です。シスウ株式会社のお知らせもアクセスできない状態のようですね。記事は、忘備録として残しておきます。
目次
Milliard とは？ 対応しているブログサービスについて
- Blogger
- Word Press
- Hatena Blog
- livedoorBlog
- FC2
「Milliard」とは、シスウ株式会社が提供している「無料でブログ記事関連を表示するプラグイン」のことです。
シスウ株式会社いわく……関連ページを「スタイリッシュかも？」らいに綺麗に表示できるツールとのことです。
Milliard に対応しているブログサービスは、上記の通りです。Blogger もバッチリ対応していましたね。
Milliardの設置方法
Milliardの設置方法について。やり方をのせておきます。
関連記事ツール設定画面にて、自分のサイト情報を入力してください。Bloggerにコピペするためのスクリプトコードが、生成されます。
公式のやり方→Milliard関連ページをBloggerで設定する方法
ちなみに私の場合のスクリプトコードは、こんな感じでした↓
<!--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」にスクリプトコードを追加すれば、Milliardが追加されます。
だたこれだけだと、サイドバーに設置するにはいいですが…記事ページだけに、関連記事表示したい場合は、ちょっとだけ手間をかける必要があります。
大丈夫です。ちゃんと下記で、解説しますよ↓
Blogger記事内に、Milliardを表示する方法は？
テンプレートを直に編集して、記事内の好きな場所に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 == "item"'> <br/> <ins id='ssRelatedPageBase'/> </b:if> <!--関連記事用htmlここまで-->
何も考えずそのまま、<data:post.body/> すぐ下にコピペでどうぞ！
最後にテンプレートを保存します。
あとは最初に生成したスクリプトコードを、好きな場所に置いちゃいましょう。長くて10分もすれば、表示されるはずです。
Milliard を CSS でカスタマイズする方法
参考になる外部サイト貼っておきますね！
[Å] WordPressプラグイン「Milliard」を導入して最初にカスタマイズ・設定した部分まとめ
文字の太さ・大きさ・マージン・パッディングの設定方法。
Milliard関連記事プラグインのCSSをいじり２列にしてブログになじむようにしてみました - Yukihy Life
リスト用のカスタマイズ。私も２列にすべきか迷ってます。
関連記事表記にMilliard関連ページプラグインを導入しサイドバーに固定してみました - Yukihy Life
サイドバーに置く注意点がわかります。
わたしの Milliard カスタマイズ例
ちなみにわたしのカスタマイズ CSS は、こんな感じでした。
/* ^^^^^^^^ 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関連記事 ^^^^^^^^^^ */このカスタマイズをするのに、リスト表示を選択しました。タイルではない理由は、スマホ表示とPC表示を同じにしたかったからです。好き方を選んで、大丈夫だと思います。
ちなみにスクリプトコード生成時「表示位置のフッター下」チェックを外さないと、ブログのフッター下に無限に関連記事が表示されます。
「Shisuh.showBottom=‘1’」を「Shisuh.showBottom=‘0’」に変更すれば、無限関連記事が解除されます。
スマホでの表示では「挿入箇所のスクロールを無効にする」に、チェックを入れれば大丈夫です。
関連記事表示は Milliard をおすすめするポイント
- 美しいタイル表示
- 視認性にすぐれたリスト表示
- 圧倒的な情報量
- レスポンシブ対応
- カスタマイズ性に優れる
- YouTubeのサムネイルも自動で取得！
- もはや必需品
Milliard をお勧めする 7 つの理由です。
１つずつ説明しちゃいましょう↓
美しいタイル表示
最大の売りポイント。このタイル表示を見て！美しい……
どんなブログデザインでも、なんとなく馴染んでしまう。
しかもコピペでできちゃうのは、本当にありがたい。
視認性にすぐれたリスト表示
リスト表示だって、この通り！
タイル表示がご所望でないブロガーの方にも、ちゃんと対応している姿勢がなんとも素晴らしい。
とりあえずコピペでここまで仕上げてくれるなんて、Milliard 様様です。涙
スクロール機能で、圧倒的な情報量でアクセスアップ
タイル表示、リスト表示ともに、スクロール機能がついています。
決められた枠の中で関連記事をスクロールしていくことで、どんどん関連の記事を表示させていくことができます。
この情報量で、アクセスアップ！？
レスポンシブ対応
PCではタイル、スマホではリスト表示など、各デバイスにレスポンシブな対応が可能です。
いちいちスクリーン幅指定しなくても、Milliardなら自動でやってくれます。
時間のないブロガーには、最高の「お・も・て・な・し」
( ・∇・)
カスタマイズ性に優れる
ノーマル状態の Milliard が気に入らなければ、CSS でカスタマイズ可能です。
コピペでできるので、後ほど参考記事も掲載しておきますね。
懐の深さに感服です。
YouTubeのサムネイルも自動で取得！
YouTube動画を記事のサムネイルにしても、自動でサムネイル画像を取得しくれるんですよ。
これは、ほんと便利。
ボカロPや、アーティストの楽曲掲載記事でも使えるから超楽チン！
もはや必需品
簡単に華やかな関連記事スペースを設けることができます。
一度使ったら、手放せません。動作も軽くて、言うことなし。
まとめ：Blogger で関連記事を表示させるなら、Milliard 最強
ブログの関連記事なら、純正のものを使うよりも何倍もオシャレで簡単に設置できちゃいます。
これでさらに、記事の執筆に時間をかけられるというものです。
さいごに、公式サイトで利用者の記事へのリンクを載せておきます。
カスタマイズについて、もっと知りたい方はご覧ください↓
そのほか、記事更新に役立つブログツールは、こちらの記事をご覧ください↓
