スキップしてメイン コンテンツに移動

Bloggerにサクっと関連記事を表示させるプラグイン

この記事では、Bloggerで関連記事を表示する方法を、紹介します。

以前、Bloggerで関連記事を表示させる為のサービスを紹介しましが、今度は関連記事を表示するプラグインを自作しました。

実際、このブログの右側に表示されている関連記事は、今回紹介するプラグインを使って表示させています。
関連記事の表示は、SEO対策的にも「吉」と言われているので、是非表示していきましょう。

Google Blogger Related Posts

完成イメージ

このプラグインを使うと、こんな感じで関連記事を表示する事ができます。
サムネイル画像も付いてます!

関連記事表示プラグイン完成イメージ

特徴

この関連記事表示プラグインには、以下の4つの特徴があります。

  • 外部サービス不使用

このプラグインは、JavaScriptだけで作成されています。
また、Bloggerのフィード(RSS)から、関連記事を抽出している為、外部サービスを使用した時によくある、サービス停止によって表示されなくなる心配は不要です。

  • 関連度が高い記事をリストの上部に表示

現在表示中のページと同じラベルを持つ記事を、関連記事として表示します。
ラベルの一致度が高い記事をリストの上部に表示します。

  • 非同期で関連記事を表示

非同期で関連記事を検索・表示する為、メインの記事の表示を止める事がありません。

  • シンプルなHTMLでカスタマイズが容易

関連記事の表示に使うHTMLは、シンプルな物になっています。
CSSで柔軟なカスタマイズが出来ると思います。

設定方法

さっそく、あなたのブログにも、関連記事を表示させてみましょう。

テーマをバックアップ

念の為、現在のテーマをバックアップしましょう。
バックアップの方法は以下の通りです。

  1. Bloggerの管理画面から、[テーマ] -> [バックアップ/復元] をクリック
  2. [テーマをダウンロード] をクリックすると、現在のテーマがダウンロードできます

HTMLを編集

  1. blogIDを調べる

まず、自分のブログのblogIDを確認します。
Blogger管理ページにアクセスし、アドレスバーのURLから、blogIDを控えます。

BloggerのblogID確認方法

  1. テーマの画面で、[HTMLの編集] をクリックし、HTMLを表示します
  2. 関連記事を表示させたい場所に、以下のコードを追加します
<!--関連記事をここに表示する-->
<div>
    <small>関連記事</small>
    <div id='b-related-post-list-container'/>
</div>

<small>関連記事</small>のタイトル部分は、好みに合わせて変更してください

  1. JavaScript/CSSの追加

テーマのHTMLの中から、以下のタグを探してください。

<b:include data='post' name='post'/>

見つかったら、そのすぐ下に、以下のコードを追加して下さい。
また、blogId: "xxxxxxxxxxxxx"となっている部分について、先ほど調べた自分のblogIDに書き換えて下さい。

<!--[START]関連記事表示プラグイン-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='b-related-post-list-labels' style='display:none'>
    <b:loop values='data:post.labels' var='label'>
        <span><data:label.name/></span>
    </b:loop>
</div>
<script>
    //関連記事の表示設定
    //オプションの設定方法は「https://www.sukerou.com/2019/01/blogger_18.html」を参照して下さい
    var related_post_list_config = {
        blogId: "xxxxxxxxxxxxx",
        postCount: 5
    };

    //以下のJavaScriptコードは編集しないでください
    ;(function(f){var h=[];var g=[];var e=0;var a=false;window.__b_load_related_post__=function(){label_elements=document.querySelectorAll(&quot;#b-related-post-list-labels span&quot;);for(var k=0;k&lt;label_elements.length;k++){var l=label_elements[k].textContent;var j=document.createElement(&quot;script&quot;);j.src=&quot;https://www.blogger.com/feeds/&quot;+encodeURIComponent(related_post_list_config.blogId)+&quot;/posts/default/-/&quot;+encodeURIComponent(l)+&quot;?alt=json-in-script&amp;callback=__b_related_post_callback&amp;max-results=&quot;+related_post_list_config.postCount;document.body.appendChild(j);g.push(l)}};window.__b_related_post_callback=function(i){if(i.feed.entry instanceof Array){i.feed.entry.forEach(function(l){var k={};k.url=&quot;#&quot;;(l.link instanceof Array?l.link:[]).forEach(function(m){if(m.rel==&quot;alternate&quot;){k.url=m.href}});if(h.some(function(m){return m.url==k.url})){return}if(location.href==k.url){return}k.title=l.title.$t;k.labels=l.category instanceof Array?l.category.map(function(m){return m.term}):[];k.relevantDegree=0;for(var j=0;j&lt;g.length;j++){if(k.labels.indexOf(g[j])&gt;=0){k.relevantDegree+=(1/(j+1))}}k.thumbnail=l.media$thumbnail;h.push(k)})}e++;if(e==g.length){c(h);h.sort(function(k,j){return Math.sign(j.relevantDegree-k.relevantDegree)});d()}};document.addEventListener(&quot;DOMContentLoaded&quot;,function(){a=true});function d(){var j=document.getElementById(&quot;b-related-post-list-container&quot;);if(j==null){return}var n=document.createElement(&quot;ul&quot;);n.classList.add(&quot;b-related-post-list&quot;);j.appendChild(n);var p=Math.min(related_post_list_config.postCount,h.length);for(var l=0;l&lt;p;l++){var q=h[l];var r=document.createElement(&quot;li&quot;);r.appendChild(b(q));var m=document.createElement(&quot;div&quot;);m.classList.add(&quot;b-related-post-text-container&quot;);var o=document.createElement(&quot;a&quot;);o.href=q.url;o.target=&quot;_blank&quot;;o.classList.add(&quot;b-related-post-title&quot;);o.textContent=q.title;m.appendChild(o);if(q.labels.length&gt;0){var k=document.createElement(&quot;div&quot;);k.classList.add(&quot;b-related-post-label-container&quot;);q.labels.forEach(function(s){var i=document.createElement(&quot;span&quot;);i.textContent=s;k.appendChild(i)});m.appendChild(k)}r.appendChild(m);n.appendChild(r)}}function b(j){var i=document.createElement(&quot;a&quot;);i.href=j.url;i.target=&quot;_blank&quot;;i.classList.add(&quot;b-related-post-thumbnail-container&quot;);if(typeof j.thumbnail===&quot;undefined&quot;||j.thumbnail==null){return i}var k=document.createElement(&quot;img&quot;);k.src=j.thumbnail.url;i.appendChild(k);k.addEventListener(&quot;load&quot;,function(){var o=this.clientHeight;var m=this.clientWidth;var p=Math.max(o,m)/Math.min(o,m);var n=0,l=0;if(o&gt;m){m=i.clientHeight;o=m*p;n=(o-i.clientHeight)/2}else{o=i.clientHeight;m=o*p;l=(m-i.clientHeight)/2}this.style.height=o+&quot;px&quot;;this.style.width=m+&quot;px&quot;;this.style.marginLeft=(-1*l)+&quot;px&quot;;this.style.marginTop=(-1*n)+&quot;px&quot;});return i}function c(o){var n=o.length;for(var m=n-1;m&gt;0;m--){var k=Math.floor(Math.random()*(m+1));var l=o[m];o[m]=o[k];o[k]=l}}})(window);if(typeof __b_load_related_post__===&quot;function&quot;){__b_load_related_post__()};
</script>
<style>
    .b-related-post-list{list-style:none;padding:0;margin:0}.b-related-post-list li{list-style:none;position:relative;min-height:5rem;margin-bottom:5px;font-size:16px}.b-related-post-list .b-related-post-thumbnail-container{width:5rem;height:5rem;border:1px dotted #ccc;overflow:hidden;display:block;position:absolute;background:#333;background:-moz-radial-gradient(#333 20%,#111 70%);background:-webkit-radial-gradient(#333 20%,#111 70%);background:radial-gradient(#333 2%,#111 70%);top:0;left:0}.b-related-post-list .b-related-post-text-container{position:absolute;left:5.4rem;top:3px;margin:0;padding:0}.b-related-post-list .b-related-post-title{display:block;margin:0;padding:0;max-height:3rem;font-size:16px;overflow-y:hidden}.b-related-post-list .b-related-post-label-container{margin-top:.1rem}.b-related-post-list .b-related-post-label-container span{display:inline-block;padding:1px;background:#1b89d5;color:#fff;margin:0 4px 0 0;font-size:.8rem}
</style>
</b:if>
<!--[END]関連記事表示プラグイン-->

コードの挿入位置は、以下のイメージを参考にして下さい。

コードの挿入位置のヒント

  1. [テーマを保存]をクリックして、編集内容を保存してください。

設定はこれで終わりです。お疲れ様でした。
実際に自分のブログにアクセスし、関連記事が表示されている事を確認して下さい。

オプション

今回紹介した、関連記事表示プラグインは、オプションで、表示条件を制御する事ができます。

オプションの設定方法

コピーしたコードに、related_post_list_config = {…} と書かれている部分があります。
この JSON を直接編集して、目次の表示オプションを変更します。

オプションの設定内容は、後述する「各オプションの説明」を参照して下さい。

//関連記事の表示設定
//オプションの設定方法は「https://www.sukerou.com/2019/01/blogger_18.html」を参照して下さい
var related_post_list_config = {
    blogId: "xxxxxxxxxxxxxxxx",
    postCount: 5
};

各オプションの説明

  • blogId

自分のブログのBlogIdを設定します。

  • postCount

表示する関連記事の数を指定します。
5を指定した場合、関連する記事が6件以上ある場合、関連度が高い上位5件までが、リストに表示されます。

さいごに

如何でしたでしょうか?
「うまく表示されないけど?」という方は、コメント欄から連絡頂ければ、可能な限り対応します。

スポンサーリンク
スポンサーリンク
スポンサーリンク

コメント

  1. こんにちは!
    こちらのブログの目次機能と関連記事機能を使わせていただいています。
    コピペですぐに使えるので、ありがたいです。
    ちょっと報告なのですが、関連記事機能は、「下書き」状態で公開していない記事もタグをつけているとリストに拾ってしまうことがあるようです。
    僕の環境の問題なのか、細かいところは確認できていませんが、そういうことがありましたという報告でした。

    返信削除
  2. こんばんは!
    早速導入させていただきました。
    コレまで使ってきたどの関連記事機能よりシンプルで優れた素晴らしいプラグインだと思います。
    ただ、なぜかモバイルビューでは表示できません。本来はモバイルビューでも動くものなのでしょうか?

    返信削除

コメントを投稿

このブログの人気の投稿

axiosの使い方まとめ (GET/POST/例外処理)

axiosの使い方まとめ (GET/POST/例外処理)最近何かとよく使うJavaScriptでAJAX通信を行うaxiosについて、簡単に使い方をまとめました。GETリクエストをaxiosで送るまずはGETリクエストをaxiosで送る方法です。const res =await axios.get('/users') console.log(res.data)分割代入の記法を使うと、以下のようにも書けますconst{data}=await axios.get('/users') console.log(data)クエリパラメータ (URLパラメータ)を指定クエリパラメータを指定する方法は2つあります。1つ目は、axios.getに指定するURLに直接記述する方法です。axios.get('/user?id=123')2つめは、axios.getの第2引数に、オプション指定する方法です。axios.get('/user',{ params:{ id:123}})POSTリクエストをaxiosで送る次はPOSTリクエストをaxiosで送る方法です。JSON形式でPOSTするJSON形式でPOSTする場合は、axios.postの第2引数に、送信するデータをJavaScriptオブジェクトで指定します。const res =await axios.post('/user',{ id:123, name:'Yamada Tarou'})application/x-www-form-urlencoded形式でPOSTするapplication/x-www-form-urlencoded形式でPOSTする場合は、URLSearchParamsを使います。var params =newURLSearchParams() params.append('id',123) params.append('name','Yamada Tarou')const res =await axios.post('/user', params)axios でファイルをアップロードする画像などのファイルを、axiosでアッ…

[VB, C#] Windows 8, Window 10 で ImeModeが制御できない問題を解決する

[VB, C#] Windows 8, Window 10 で ImeModeが制御できない問題を解決するタイトルの通りですが、Windows 8 以降では Windows Form アプリケーションで、コントロールの ImeMode に Katakana や KatakanaHalf を設定しても、カタカナになってくれません。なぜ ImeMode が効かないのか?Windows 8 以降、IME Mode の切り替えは、ユーザー単位で切り替わるようになった為、アプリから IME Mode 制御が出来ないようになりました。
(IME をON にした場合、常に ひらがな モードになます)※ Windows 7までは、IME Modeの切り替えはアプリ単位で行われていた為、問題なくアプリから IME制御が行えました。対処方法Windows 8 以降、IMEの制御は、InputScope クラスの利用が推奨されています。
しかし、InputScope クラスは、WPF、Windows ストアアプリでしか使えない為、Windows Formアプリでは使用できません。
(Windows Form はもう使うな!という事でしょうか (涙) )結論としては、コントールパネルの設定で、IMEの制御をユーザ単位から アプリ単位に変更する事ができます。
これで、Windows Formアプリでも 従来通りIMEの制御を行う事が出来ます。おわりにこの方法だと、アプリをインストールする端末すべてに設定が必要となり、とっても面倒です。。。
しかし、今の所これしか方法がない状態です。
これからは Windows Formではなく、WPFや Windows ストアアプリで作れという事ですかね (^^;)

MailKitの使い方! エンコーディング指定や添付ファイをメールで送信する方法[C#/VB Tips]

MailKitの使い方! エンコーディング指定や添付ファイをメールで送信する方法[C#/VB Tips]MailKitを使ってメールを送るサンプルコードです。(C#)UTF8/iso-2022-jpのエンコーディング指定、GMail/YahooのSMTPサーバで送るなど、4つのサンプルコードでMailKitの使い方を紹介します。MailKitって何?2017年に.NET標準のSystem.Net.Mail.SmtpClientが廃止予定となり、Microsoftより今後はオープンソースライブラリである、MailKitに置き換えるとアナウンスがありました。既にSmtpClientは非推奨になっており、今後は廃止されていきます。現在、SmtpClientを使用したソースコードには、Visual StudioからMailKitを使うよう警告が出るようになっています。さっそく、MailKitを使ってメールを送信するサンプルコードを作っていきます。UTF8でメールを送信文字エンコーディングを、UTF8でメールを送信するサンプルコードです。
MailKitは、デフォルトの文字エンコーディングがUTF8なっている為、シンプルなコードでメールを送信する事ができます。var host ="<smtp server name>"; var port =25;// or 587using(var smtp =new MailKit.Net.Smtp.SmtpClient()){//SMTPサーバに接続する smtp.Connect(host, port, MailKit.Security.SecureSocketOptions.Auto);//認証が必要な場合は、以下のコメントを解除//smtp.Authenticate("<id>", "<password>");//送信するメールを作成する var mail =new MimeKit.MimeMessage(); var builder =new MimeKit.BodyBuilder(); mail.From.Add(new MimeKit.MailboxAddress("",&quo…