関連記事プラグイン「Milliard」が2020年1月1日 17:00にサービス終了しました。
今回は記事下に関連記事を表示する方法をご紹介します。
Bloggerの公式ガジェットには関連記事の表示がありません。これはめちゃくちゃ欲しいところなんだけどな。高度なものではなくて、同じラベルの記事一覧だけでもいいのに。
なので自分で作るか、外部のサービスを利用するしかありません。もちろん自分では作れないので、外部サービスを利用することにしました。
Bloggerの関連記事表示で自分が知っているのは、「Smarter Related Posts Widget for Google Blogger – v2.0」です。
実際に自分がBloggerで運営しているもう一つのブログにはこれを導入していて、特に問題ありません。シンプルだし最高。
同様にこのブログでも導入してみたのですが、少し不具合が出ました。
どういう不具合かというと、このブログのスマホ表示ではトグルメニューを使っているのですが、それがうまく動作しなくなりました。
それを修正できるわけではないし、かといってトグルメニューを外すのには抵抗があったので、今回は「Smarter Related Posts Widget for Google Blogger – v2.0」を使っての関連記事表示はあきらめました。
さーてどうしようかってなったのですが、結局は自分が運営しているはてなブログでお世話になっている「Milliard関連ページプラグインについて | シスウ株式会社」を導入することにしました。
MIlliardとは？
関連ページを「スタイリッシュかも？」くらいに綺麗に表示できるツールです。
設定方法
まずは「Milliard関連ページプラグインについて | シスウ株式会社」にアクセス。
利用方法で「Blogger」を選択します。
そして、「Milliard関連ページをBloggerで設定する方法 | シスウ株式会社」へアクセス。
「関連記事ツール設定画面」にてコードを生成します。
トップのURL
自分のブログのURLを入力します。
サイトタイプ
“Blogger”を選択します。
紹介文
デフォルトだと“こんな記事も書いてます”。“関連記事”、“こちらの記事もおすすめ”などでいいかと思います。
並び順
“関連度順”、“更新日時”、“ランダム”から選びます。
PCでの表示、スマホでの表示
ここは好みだと思います。私はリスト表示、スクロール無効が好きです。
そしてコードを取得します。
取得したコードをBloggerのHTML編集で、記事下に挿入します。
<data:post.body/>を検索すると複数出てくると思います。それの最後に出てきたものの直後に挿入すると私の場合はうまくいきました。
モバイルテンプレートの記事下に表示する
<data:post.body/>を検索すると2箇所でてくるかと思います。
ひとつ目がモバイルのものなので、その直後にMilliardで生成したコードを貼り付けるだけです。
以上で、完了です。
あとはCSSである程度思い通りにデザインできます。