Milliard関連記事表示を試してみた&2列表示させてみた

Milliardの関連ページプラグインを導入する
1. 背景
参考にしたサイト
やり方
1. Javascriptの生成
2. はてなブログのデザインをカスタマイズ
PC表示を2列にする
1. 修正ポイント
まとめ
1. 関連

Milliardの関連ページプラグインを導入する

今日は，関連記事を自動的に記事下に表示させるプラグイン導入について紹介します。自分の書いた記事を更に見てもらえるようにする良い工夫だと思いますので，まだ実施されていないブロガーの方，最近ブログを書き始めた方は是非使ってみてください。

背景

Affiliateを始めると，自分のサイト内に以下に，閲覧者を留まらせるかが重要とよく聞きます。

自分のページを開いた人が関係あるページを更に開いてくれれば確かに，PVも上昇するので当たり前と言われれば当たり前です。

もちろん，自分が記事を書いているとき関係するサイトを引用できれば，適材適所というわけなのですが，必ずしもそううまくいかない場合もあります。

というわけで，書いた記事に関係しそうな別の記事を自動的に表示させてもらうという手助けを借りることにしました。

参考にしたサイト

シスウ株式会社のMilliard関連ページと呼ばれるツールを使用させていただくことにしました。

http://corp.shisuh.com/milliard%E9%96%A2%E9%80%A3%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6/corp.shisuh.com

はてなブログだけでなく，wordpressなどでも使えるみたいです。色々なブログに対応しているところも凄いですね。

はてなブログへの使用方法は下記に記載されています。

corp.shisuh.com

なお，最終的には，ゆきひーさんの記事も参考にさせていただき，2列にしてみました。
こちらもシュッとした感じになってすごくかっこいいです。

www.yukihy.com

やり方

Javascriptの生成

http://www.shisuh.com/statics/relatedPageSetting/

自分のブログのURLを使って設定していきますが，私の場合はゆきひーさんの2列にするのも同時にやってしまいましたので，設定は下記のとおりにしています。

f:id:pom2e:20170122213926p:plain

トップのURL
自分のブログのURL
サイトタイプ
はてなブログを選ぶ
紹介文

　関連記事が紹介される際に表示される文章を書く。初期設定のままでもOK

並び順

　関連度順にする

表示位置
挿入箇所にチェック
PCでの表示

　リストを選択し，挿入箇所のスクロールを無効にする。
　件数は，2列にするので偶数にする。

スマホでの表示
上と同様にリスト，スクロールを無効にする。スマホは1列表示にするので何件でもOK

こんな感じです。

はてなブログのデザインをカスタマイズ

先程作ったJavascriptをはてなブログに貼り付けます。

貼り付ける場所は以下のところ。

f:id:pom2e:20170122213948p:plain

f:id:pom2e:20170122213957p:plain

f:id:pom2e:20170122214015p:plain

たどり着き方は
1. ダッシュボードからデザインを選択
1. デザインのカスタマイズ（スパナマーク）を選択
1. 記事をクリック
1. 記事下の部分

ここに先程のJavascriptを書き込みます。
私の場合下のようになってます。

<script>//<![CDATA[
window.Shisuh = (window.Shisuh) ? window.Shisuh : {};Shisuh.topUrl='http://www.pom2e.com';Shisuh.type='Hatebu';Shisuh.headerText='関連記事';Shisuh.alg='Related';Shisuh.insertAfterScript='1';Shisuh.showInsert='1';Shisuh.originalTemplateTypeWide='List';Shisuh.originalTemplateOffScrollWide='1';Shisuh.originalTemplateOffScrollCountWide='10';Shisuh.originalTemplateTypeNarrow='List';Shisuh.offScrollCount='4';Shisuh.offScroll='1';
//]]></script><script id="ssRelatedPageSdk" type="text/javascript" charset="utf-8" src="https://www.shisuh.com/djs/relatedPageFeed/"></script>

2列にする必要がなければここまでで終了です。反映されるまで数十分かかるようなのでコーヒーでも飲んで待ちましょう。

PC表示を2列にする

貼り付けたJavascriptにちょっとした修正を加えることで2列にすることができます。

修正ポイント

先程Javascriptを貼り付けた記事下の更に下にあるデザインCSSを編集していきます。

f:id:pom2e:20170122214101p:plain

CSSはゆきひーさんのブログに書かれていますので，ご参照ください。

主に，画像の縦横幅の修正，フォントの修正，二列にするための修正が書かれています。
スマホ用に1列に戻すcssもありますので，レスポンシブデザインを使用している人はこちらを記載するのも忘れずに！

下のような感じに私のブログもなっています。これなら，10件表示させても違和感ないです。

f:id:pom2e:20170122214215p:plain

まとめ

Milliad関連ページを表示させるためには！

Javascriptを作成する。
作成したJavescriptをデザイン→カスタマイズ→記事下に記載。
ゆきひーさんのcssを使用することで2列表示も可能！

これで自分が書いたブログの記事に関係しそうなものを自動的にピックアップしてくれるようになります！
この記事の下にも表示されているはず！（なにが表示されるかな？？目次の自動作成とかかな？）

ぜひ皆さんも試してみてください。