読者です 読者をやめる 読者になる 読者になる

たけログ

子供と家電と住宅と〜南国沖縄、生活の質向上計画〜

【ブログ改造計画】はてなブログでmilliardプラグインを使って〝関連記事〟を表示させてみた!!

スポンサーリンク

こんにちは〜たけです!!

はてなブログを初めてコツコツブログの見た目を変えていっているのですが、今回はよく目にする、ブログを読んだ後に出てくる〝関連記事〟を表示させてみました!!

関連記事って記事を読んだ後に『この記事もオススメ!!』みたいな感じであるあれ!!

 

f:id:matsutakeshi4444:20160917111846p:plain

⇧⇧こんな感じ⇧⇧

右も左も分からない私は、今まで手動でその関連してそうな過去記事を貼り付けてました!!

f:id:matsutakeshi4444:20160917112307p:plain

これでもいいっちゃいいんですが、

自動的に!!

おしゃれに!!表示させたいと思い採用しました!!

はてなブログ関連の超優等生ブロガーの方々の記事を参考にしました!!

やり方は色々ある!!

以外にやり方はたくさんありました!!表示のさせ方の好みなどで選べばOKだと解釈しています!!

こちらのやぎログさんを参考にさせて頂きました!!

www.jimpei.net

この中でも最も有名で使っている人が多いのがMilliard関連記事プラグイン〟です!!

私もこれを採用しました!!

f:id:matsutakeshi4444:20160917113506j:plain

Milliard関連ページプラグインについて | シスウ株式会社

とてつもなく親切な会社で、こちらのサイトで自分のサイトURLや表示させたい形(リストなのかパネルなのかなど)を設定して、記事下に貼るだけ!!

 

一緒に設定してみよう!!

超絶簡単で親切なMilliard関連ページプラグインなのですが、ブログ初心者の右も左も分からない私はかなり戸惑い、1日かけてやっと出来たので、そういう方のため(自分が忘れないため)に設定のやり方をおさらいしていきましょう!!

 

①シスウのページに行こう!!

まず、Milliard関連ページプラグインについて ⇦こちらからシスウのページに飛びます!!

f:id:matsutakeshi4444:20160917114155p:plain

主要なブログサービスをカバーしていて、自分が使っているブログを選びます!!

②コードを取得しよう 

飛ぶとすぐにjavascriptのコードを生成とあるのでそこに飛びます!!

f:id:matsutakeshi4444:20160917114453p:plain

f:id:matsutakeshi4444:20160917115415p:plain

飛ぶと直感でも分かる設定画面になるのですが、わざわざ文字を入れて説明しました!!逆にわかりにくくなったかもしれませんがこういうかんじ笑

 

とりあえず、おしゃれにパネル表示にしてスマホの表示もデフォルトのままにしました!!

スポンサーリンク
 

③自分のブログにコピペしよう

あとは自分のはてなブログ⇨デザイン⇨記事下にコードを貼るだけで完成!!!!

と思ったら私の場合いつまでたっても表示されず........

 

......なんで!?!?!!?

理由は記事下に忍者ボタンやアドセンスのコードがあったりしてそれが邪魔して表示されていないのでは!?!?⇦憶測

と思ったので、記事下の一番上にコードをのせました!!

f:id:matsutakeshi4444:20160917153457p:plainすると..........

なんということでしょう!!

f:id:matsutakeshi4444:20160917153911p:plain

しっかり表示されている!!!!!

④喜びましょう

f:id:matsutakeshi4444:20160917153700j:plain

よしッッ!!!!

⑤スマホではこんな感じ!!

f:id:matsutakeshi4444:20160917154600p:plain

ちなみにスマホでもしっかり表示されています!!

スマホも先ほど作ったコードをデザイン⇨スマホマーク⇨記事下の一番上(パソコンと同じ感じ)にコピペ!!

また、『こんな記事も読まれています』は通常の表示だと味気ない感じになってしまいますので、ゆきひーさんのブログを参考にさせて頂きました!!

www.yukihy.com

こちらのブログの2列にするHTMLコードの17〜23行目をデザインCSSにコピペすると装飾出来ます!!

tsukuruiroiro.hatenablog.com

スマホ表示の場合はCSSをコードで挟まないといけないのでこちらをご参照下さい。

スマホの場合は同じコードをヘッダーのタイトル下にCSSコードとしてコピペして下さい。

2列にしたい場合はリストにしてから行って下さい♩

ありがとう、ゆきひーさん!!

 

また、javascriptを使わずに関連記事を表示する方法もあるみたいです!!

www.aritai.net

 関連記事を表示させることで少しは直帰率を減らせると思い期待してます。

どんどんいじって行きたいと思います。