音楽で「生きる」を本気で追いかけるブログ

8.16.2016

Milliardはブログ記事の関連表示決定版!設置とカスタマイズ方法まとめ

bloggerで関連記事を表示させるなら、Milliardが最強。
Blogger無料テンプレートの中にも、関連記事を表示できる機能がついているものもあります。blogger純正でも用意されていますが、思った通りにならず、面倒だと思いませんか?

今回は簡単オシャレなのに、無料で使える「Milliard」という外部プラグインをご紹介いたします。

Milliardとは?

シスウ株式会社が提供している無料の関連記事プラグインのことです。
Milliard関連ページプラグインについて

対応しているブログ


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

おすすめポイント

美しいタイル表示

これがコピペでできちゃうのが、売りポイント!

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

リスト表示だって、この通り!見やすい!

圧倒的な情報量

スクロール機能がついているので、決められた縦枠の中で関連記事を、どんどんおすすめしていきます。この情報量で、アクセスアップ!?

レスポンシブ対応

PCではタイル、スマホではリスト表示など、各デバイスにレスポンシブな対応が可能です。いちいちスクリーン幅指定しなくても、Milliardなら自動でやってくれます。

カスタマイズ性に優れる

!importantの表示は必要ですが、ノーマルが気に入らなければCSSで即カスタマイズ可能です。コピペでできるので、後ほど参考記事も掲載しておきますね!

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

加えて、YouTubeを記事の頭に持ってきても、自動でサムネイル画像を取得して、出力してくるんですよ!これは、ほんと便利。ボカロPや、アーティストの楽曲掲載記事でも使えるから超楽チン!

もはや必需品

簡単に華やかな関連記事スペースを設けることができます。一度使ったら、手放せません。動作も軽くて、言うことなし。さっそく、設置のやり方を載せておきます。

設置のやり方は?


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

参照元: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」を追加すれば、ブログに関連記事が追加されます。しかしこれは、サイドバーに設置するにはいいですが...

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

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

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

テンプレートを直に編集して、記事内の好きな場所にMilliardを表示させましょう。必ずbloggerのテンプレートを保存してバックアップを取ることをお忘れなく。

data:post.body/を探す!

まずはHTMLの編集から、記事本文下の...

<data:post.body/>

を見つけましょう。

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

参照元では「post-body entry-content」付近でしたね。このブログの場合は、近くに「post-body」だけがあったので、その付近の <data:post.body/> すぐ下に下記コードを記入しました。

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

何も考えずそのまま、<data:post.body/>すぐ下にコピペでどうぞ!テンプレートを保存します。あとは生成したスクリプトコードを、好きな場所に置いちゃいましょう。長くて10分もすれば、表示されるはずです。

CSSでカスタマイズ!

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

文字の太さ・大きさ・マージン・パッディングの設定方法。
[Å] WordPressプラグイン「Milliard」を導入して最初にカスタマイズ・設定した部分まとめ

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

リスト用のカスタマイズ。私も2列にすべきか迷ってます↓。
Milliard関連記事プラグインのCSSをいじり2列にしてブログになじむようにしてみました - Yukihy Life

サイドバーに置く注意点がわかる。
関連記事表記にMilliard関連ページプラグインを導入しサイドバーに固定してみました - Yukihy Life

当ブログ@soundorbis.comでは?

ちなみに「@soundorbis.com」では、次のように設定しています。

/* ^^^^^^^^ 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が体験した困ったこと

スクリプトコード生成時「表示位置のフッター下」チェックを外さないと、ブログのフッター下に無限に関連記事が表示されていきます(怖)チェック外し忘れたら生成されたコードの「Shisuh.showBottom=‘1’」を「Shisuh.showBottom=‘0’」に変更すれば、元に戻りましたがびっくりしました笑。
参考→Milliardを力技で設定変更。フッターの下に表示させなくする方法

スマホでの表示では「挿入箇所のスクロールを無効にする」にチェックを入れたほうが良さそうですね。経験ありませんか?スクロール付きで画面を埋められて、記事の内容までなかなかたどり着けないトレンドサイトを…止めといたほうが無難です。

まとめ

いかがでしたでしょうか?関連記事なら、純正のものを使うよりも何倍もオシャレで簡単に設置できちゃいましたね!?これでさらに!記事の執筆に時間をかけられるというものです!

さいごに、公式サイトで利用者の記事が掲載されているので、さらにカスタマイズについて知りたい方は、ご覧ください!それでは!!
Milliard関連ページプラグインについて

この記事を書いた人

サウンドオルビス(soundorbis)とは?

公式サイト:soundorbis.net

前の記事  以前の記事
次の記事  新しい記事