よしまのメモ帳

思いついたことを書き留める雑多ブログ。コメント欄は設けていますが基本的に反応しません。ご用の方はお問い合わせフォームよりご連絡お願いいたします。

関連ページプラグイン「Milliard」で関連記事をスタイリッシュに表示してみた。

スポンサーリンク

数日前に関連記事ツールを変えました。

記事下にあるアレです。
他の記事へのリンク集みたいなやつ。

読者登録しているアリカワシュウヘイさんのブログをいつものように拝見していて、下の方にかっこいい関連記事ツールを見つけたのがきっかけでした。

(勝手にリンクしてすみません!)

なんだこれ!うちのブログもこれにしたい!と思い、実際変えてみた次第です。

今まではブログカードで表示してくれるツールを利用させていただいてたんですが、以下のような感じになりました。

f:id:yoshimamo:20150930154719j:plain

タイトルを付けるのがへたくそなので背伸びしてる感が否めませんが、アイキャッチ画像が表示されることで色味が増えてさらに良い感じになりました。

ちゃんとしてるブログならもっとかっこよくなるはず(笑)

この関連記事ツールは「Milliard」というもので、shisuhという会社が配布している関連ページプラグインです。

PC、スマホ、タブレット等のデバイスで使用可能、画像の縦横比が違っても綺麗に並べられ、スクロールできるのでより多くの関連ページを表示させられるのが特徴です(公式ページより)

「Milliard」の設置方法

まず、ツール下のリンクから公式ページにアクセスします。

f:id:yoshimamo:20150930154929j:plain

続いて目次の「3.利用方法」をクリック。
ツールを設置させたいブログサービスの画像をクリックします。
今回ははてなブログを選択しました。

ブログサービスを選択すると、設定の仕方が書かれているページが開かれます。
その手順通りにすれば設置できますが、一応やり方を書いておきますね。

まず「Javascriptのコードを生成」という項目に書かれているURLをクリックし、関連ツール設定画面にアクセスします。

設置コードを取得する

f:id:yoshimamo:20150930154933j:plain

①ブログURLを入力

説明もいらないと思いますが(笑)

ツールを設置したいブログのトップページのアドレスを入力します。

②ブログサービスを選択

プルダウンメニューから、そのブログのブログサービス名を選びます。
当ブログははてななので「はてなブログ」を選択。

③紹介文を入力

ツール上部に表示される説明文に指定がある場合は入力します。
何も書かなければ「こんな記事も書いてます」になります。

④表示箇所の選択

ツールをブログのどこに表示させるかによってチェックを付けたり外したりします。
ページ全体の一番下に設置するのなら「フッターの下」にチェックを、それ以外は「設置個所」にチェックを入れます。

大体は記事下かPCサイドバーに置くと思うのでフッター下のチェックを外すだけでいいかと思います。

⑤表示の仕方を選択

PC・スマホそれぞれの表示のさせ方を選びます。

「パネル」は当ブログのようにアイキャッチ画像メインで表示されます。
「リスト」は小さいアイキャッチの横にタイトルで、縦一列に表示されます。
「独自テンプレート」はよく分からないし、使う人も少ないと思うので省略。

またスマホ表示はツール内でのスクロールを無効にすることができます。
スクロールを有効にした方が少ない面積で多く関連記事を表示させられますが、「ページ全体をスクロールするのに邪魔だな~」と思ったら、読み手のためにも無効にしたほうが良いでしょう。
そのときは「挿入箇所のスクロールを無効にする」にチェックを入れて、表示させる記事数を指定します。

⑥コードを取得

全部終わったら黄色いボタンをクリック。
コードが出てくるのでテキストボックス内で右クリック→すべて選択→Ctrl+Cでコピーします。

ブログに貼り付ける

コピーしたコードをブログデザインの編集ページで任意の個所に貼り付けます。

はてなブログでは記事下に設置する場合、
ダッシュボードの左側にある「デザイン」→スパナまたはスマホのマーク→「記事」
の順番でクリックし、スクロールして「記事下」欄のテキストボックスをクリックして貼り付けます。
アドセンスや他のツールを設置している場合はテキストボックスの中でもどこにコードを貼り付けるか考えましょう。

ちなみにコードを貼っても記事プレビューには表示されませんでした。
でも「変更を保存する」ボタンを押してブログを見てみるとちゃんと出ていたので、心配しなくて良いみたいです。

サイドバーに貼り付ける時はスパナマークから
「サイドバー」→「モジュールの追加」→「HTML」
の順でクリックし、タイトルとその下のテキストボックスにコードを貼り付けて「適用」→「変更を保存する」をクリックします。

表示されるまで時間がかかることも。

最初、関連記事ツールを設置したらパネル表示を選択したにもかかわらず記事タイトルのみのリスト表示になっていました。

コードをもう一度取得して貼り直しても変わらずで悩んだのですが、記事とサーバを関連付けなければならないため表示には時間がかかるみたいです。

関連記事が表示されるまでに10~20分、アイキャッチ画像が表示されるまでには3~4時間かかることもあるとか。
このブログでも、次の日にもう一度確認したらちゃんとパネル表示になってました。

コードが正しく貼りつけられているのであれば数日は様子を見て、それでも表示されないときは問い合わせをすると良いですね。


画像を読み込みますが、記事本文の表示スピードやスクロールには影響しないようなのでデメリットはなさそうです。

【2016年10月21日 追記】
ゆきひーさんのブログ記事を参考に、Milliardの表示を2列にしてみました。
Milliard関連記事プラグインのCSSをいじり2列にしてブログになじむようにしてみました - Yukihy Life

f:id:yoshimamo:20161021214426j:plain

ナチュラルでいい感じです。