Bloggerに関連記事を表示させる２つのサービス

Bloggerで、現在表示されていページに、関連する記事へのリンクを表示させる方法です。

「人気の投稿」や「注目の投稿」を表示させるガシェットは、標準で用意されていますが、「関連記事」を表示する為のガシェットは、用意されていません。

今回は、Bloggerに「関連記事」を表示させる２つのサービスについて紹介します。

スポンサーリンク

Milliard

「シスウ株式会社」が提供していいる、関連記事を表示する為の外部サービスです。
スマホ / PC対応で、オプションで、パネル型/リスト型表示など、色々な表示形式から関連記事を表示出来ます。
また、カスタムテンプレートにも対応しており、独自のHTMLで関連記事を表示させる事も可能になっています。

設定方法

まずは、[Milliard関連ページプラグインについて] にアクセスします。

下の方までスクロールし、[利用方法] -> [Bloggerをお使いの方はこちら]をクリック

後は、Milliardのサイトに記載されている手順に従い、コードの生成およびガシェットの追加を行えば、関連記事を表示させる事ができます。

Premium Flexible Related Post Widget for Blogger – Blogspot

こちらは、外部のサービスではなく、JavaScriptだけで動く、カスタムウェジットです。
現在表示している記事のラベルから、同じラベルを記事および、本文からラベルと同じキーワードを持つ記事を抽出して、関連記事として表示してくれます。

Premium Flexible Related Post Widget for Blogger

設定方法

上のサイトに記載されていますが、まずは、BloggerテーマのHTMLを編集します。
以下のHTMLを、関連記事を表示させたい場所に、コピーします。

<!-- START::_140414_related_posts::START -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <b:if cond='data:post.labels'>
  <b:loop values='data:post.labels' var='label'>
   <span class='_140414_related_label' expr:post_id='data:post.id' expr:url='data:label.url' style='display:none'><data:label.name/></span>
  </b:loop>
 </b:if>
 <div class='_140414_related_posts' expr:post_id='data:post.id'>
 </div>
</b:if>
<!-- END::_140414_related_posts::END -->

Premium Flexible Related Post Widget for Blogger のページにアクセスして、関連記事の表示オプションを設定します。

※オプションの設定内容は以下の通りです。

オプション	内容
Post Number	表示する関連記事の数を指定します。
Show Labels	ラベルの表示/非表示を設定します
Show Comment Number	コメントの表示/非表示を設定します
Show Author	作成者の表示/非表示を設定します
Show Thumbnail	サムネイル画像の表示/非表示を設定します
Thumbnail Height	サムネイル画像を表示する場合、サムネイル画像の高さを指定します
Default Thumbnail	画像が存在しない記事に表示する、デフォルトのサムネイル画像のURLを指定します
Show Date	記事公開日の表示/非表示を設定します
Show Snippet	記事の抜粋（本文の一部）の表示/非表示を設定します
Snippet Length	記事の抜粋を表示する場合、表示する文字数を指定します
Show Border	区切り線の表示/非表示を設定します
Date Format	日付の書式を設定します

オプションの入力が完了したら、[Add Widget]をクリックして、カスタムウェジットを追加します。

手順はこれで完了です。
これで追加した場所に、関連記事が表示されていると思います。

不具合情報

2019年1月現在、サムネイル画像が正しく表示されない問題を確認しています。
（画像が設定されている記事なのに、デフォルトのサムネイル画像が表示される）

その為、このカスタムウェジットを使う場合は、サムネイル表示なしで使った方法が良いと思います。

スポンサーリンク

さいごに

最後まで読んで頂きありがとうございます。

Bloggerは無料で使用できるブログサービスですが、標準機能だけでは若干機能不足な所があるのが否めない感じがしますね…

しかし、今回のように外部のサービスと組み合わせれば、他のブログサービスと変わらないくらいの機能を実装する事が可能ですので、私は今後もBloggerを使って行きたいと思います。