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

2019年1月17日木曜日

Blogger

t f B! P L

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

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

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

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

Milliard

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

Milliardトップページの画像

設定方法

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

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

下の方までスクロールしてBloggerをお使いの方はこちらをクリック

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

Premium Flexible Related Post Widget for Blogger – Blogspot

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

Premium Flexible Related Post Widget for Blogger

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 のページにアクセスして、関連記事の表示オプションを設定します。

enter image description here

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

オプション 内容
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]をクリックして、カスタムウェジットを追加します。

Bloggerカスタムウェジットの追加画面

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

不具合情報

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

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

さいごに

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

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

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

スポンサーリンク

QooQ