こんにちは〜たけです!!
はてなブログを初めてコツコツブログの見た目を変えていっているのですが、今回はよく目にする、ブログを読んだ後に出てくる〝関連記事〟を表示させてみました!!
関連記事って記事を読んだ後に『この記事もオススメ!!』みたいな感じであるあれ!!
⇧⇧こんな感じ⇧⇧
右も左も分からない私は、今まで手動でその関連してそうな過去記事を貼り付けてました!!
これでもいいっちゃいいんですが、
自動的に!!
おしゃれに!!表示させたいと思い採用しました!!
はてなブログ関連の超優等生ブロガーの方々の記事を参考にしました!!
やり方は色々ある!!
以外にやり方はたくさんありました!!表示のさせ方の好みなどで選べばOKだと解釈しています!!
こちらのやぎログさんを参考にさせて頂きました!!
この中でも最も有名で使っている人が多いのが〝Milliard関連記事プラグイン〟です!!
私もこれを採用しました!!
Milliard関連ページプラグインについて | シスウ株式会社
とてつもなく親切な会社で、こちらのサイトで自分のサイトURLや表示させたい形(リストなのかパネルなのかなど)を設定して、記事下に貼るだけ!!
一緒に設定してみよう!!
超絶簡単で親切なMilliard関連ページプラグインなのですが、ブログ初心者の右も左も分からない私はかなり戸惑い、1日かけてやっと出来たので、そういう方のため(自分が忘れないため)に設定のやり方をおさらいしていきましょう!!
①シスウのページに行こう!!
まず、Milliard関連ページプラグインについて ⇦こちらからシスウのページに飛びます!!
主要なブログサービスをカバーしていて、自分が使っているブログを選びます!!
②コードを取得しよう
飛ぶとすぐにjavascriptのコードを生成とあるのでそこに飛びます!!
飛ぶと直感でも分かる設定画面になるのですが、わざわざ文字を入れて説明しました!!逆にわかりにくくなったかもしれませんがこういうかんじ笑
とりあえず、おしゃれにパネル表示にしてスマホの表示もデフォルトのままにしました!!
③自分のブログにコピペしよう
あとは自分のはてなブログ⇨デザイン⇨記事下にコードを貼るだけで完成!!!!
と思ったら私の場合いつまでたっても表示されず……..
……なんで!?!?!!?
理由は記事下に忍者ボタンやアドセンスのコードがあったりしてそれが邪魔して表示されていないのでは!?!?⇦憶測
と思ったので、記事下の一番上にコードをのせました!!
すると……….
なんということでしょう!!
しっかり表示されている!!!!!
④喜びましょう
よしッッ!!!!
⑤スマホではこんな感じ!!
ちなみにスマホでもしっかり表示されています!!
スマホも先ほど作ったコードをデザイン⇨スマホマーク⇨記事下の一番上(パソコンと同じ感じ)にコピペ!!
また、『こんな記事も読まれています』は通常の表示だと味気ない感じになってしまいますので、ゆきひーさんのブログを参考にさせて頂きました!!
こちらのブログの2列にするHTMLコードの17〜23行目をデザインCSSにコピペすると装飾出来ます!!
スマホ表示の場合はCSSをコードで挟まないといけないのでこちらをご参照下さい。
スマホの場合は同じコードをヘッダーのタイトル下にCSSコードとしてコピペして下さい。
2列にしたい場合はリストにしてから行って下さい♩
ありがとう、ゆきひーさん!!
また、javascriptを使わずに関連記事を表示する方法もあるみたいです!!
関連記事を表示させることで少しは直帰率を減らせると思い期待してます。
どんどんいじって行きたいと思います。
Amazonでお得に買い物するなら、Amazonギフト券にチャージしてお買い物するのをオススメしています!!
なんと、チャージする度に最大2.5%のAmazonポイントが貯まります!!
有効期限も10年で、Amazonで買えないものはほぼないので、お得に買い物が出来ます♩