この記事では、Bloggerで関連記事を表示する方法を、紹介します。
以前、Bloggerで関連記事を表示させる為のサービスを紹介しましが、今度は関連記事を表示するプラグインを自作しました。
実際、このブログの右側に表示されている関連記事は、今回紹介するプラグインを使って表示させています。
関連記事の表示は、SEO対策的にも「吉」と言われているので、是非表示していきましょう。
スポンサーリンク
完成イメージ
このプラグインを使うと、こんな感じで関連記事を表示する事ができます。
サムネイル画像も付いてます！
特徴
この関連記事表示プラグインには、以下の４つの特徴があります。
- 外部サービス不使用
このプラグインは、JavaScriptだけで作成されています。
また、Bloggerのフィード(RSS)から、関連記事を抽出している為、外部サービスを使用した時によくある、サービス停止によって表示されなくなる心配は不要です。
- 関連度が高い記事をリストの上部に表示
現在表示中のページと同じラベルを持つ記事を、関連記事として表示します。
ラベルの一致度が高い記事をリストの上部に表示します。
- 非同期で関連記事を表示
非同期で関連記事を検索・表示する為、メインの記事の表示を止める事がありません。
- シンプルなHTMLでカスタマイズが容易
関連記事の表示に使うHTMLは、シンプルな物になっています。
CSSで柔軟なカスタマイズが出来ると思います。
設定方法
さっそく、あなたのブログにも、関連記事を表示させてみましょう。
テーマをバックアップ
念の為、現在のテーマをバックアップしましょう。
バックアップの方法は以下の通りです。
- Bloggerの管理画面から、[テーマ] -> [バックアップ/復元] をクリック
- [テーマをダウンロード] をクリックすると、現在のテーマがダウンロードできます
HTMLを編集
- blogIDを調べる
まず、自分のブログのblogIDを確認します。
Blogger管理ページにアクセスし、アドレスバーのURLから、blogIDを控えます。
- テーマの画面で、[HTMLの編集] をクリックし、HTMLを表示します
- 関連記事を表示させたい場所に、以下のコードを追加します
<!--関連記事をここに表示する-->
<div>
<small>関連記事</small>
<div id='b-related-post-list-container'/>
</div>
※<small>関連記事</small>のタイトル部分は、好みに合わせて変更してください
- JavaScript/CSSの追加
テーマのHTMLの中から、以下のタグを探してください。
<b:include data='post' name='post'/>
見つかったら、そのすぐ下に、以下のコードを追加して下さい。
また、blogId: "xxxxxxxxxxxxx"となっている部分について、先ほど調べた自分のblogIDに書き換えて下さい。
<!--[START]関連記事表示プラグイン-->
<b:if cond='data:blog.pageType == "item"'>
<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("#b-related-post-list-labels span");for(var k=0;k<label_elements.length;k++){var l=label_elements[k].textContent;var j=document.createElement("script");j.src="https://www.blogger.com/feeds/"+encodeURIComponent(related_post_list_config.blogId)+"/posts/default/-/"+encodeURIComponent(l)+"?alt=json-in-script&callback=__b_related_post_callback&max-results="+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="#";(l.link instanceof Array?l.link:[]).forEach(function(m){if(m.rel=="alternate"){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<g.length;j++){if(k.labels.indexOf(g[j])>=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("DOMContentLoaded",function(){a=true});function d(){var j=document.getElementById("b-related-post-list-container");if(j==null){return}var n=document.createElement("ul");n.classList.add("b-related-post-list");j.appendChild(n);var p=Math.min(related_post_list_config.postCount,h.length);for(var l=0;l<p;l++){var q=h[l];var r=document.createElement("li");r.appendChild(b(q));var m=document.createElement("div");m.classList.add("b-related-post-text-container");var o=document.createElement("a");o.href=q.url;o.target="_blank";o.classList.add("b-related-post-title");o.textContent=q.title;m.appendChild(o);if(q.labels.length>0){var k=document.createElement("div");k.classList.add("b-related-post-label-container");q.labels.forEach(function(s){var i=document.createElement("span");i.textContent=s;k.appendChild(i)});m.appendChild(k)}r.appendChild(m);n.appendChild(r)}}function b(j){var i=document.createElement("a");i.href=j.url;i.target="_blank";i.classList.add("b-related-post-thumbnail-container");if(typeof j.thumbnail==="undefined"||j.thumbnail==null){return i}var k=document.createElement("img");k.src=j.thumbnail.url;i.appendChild(k);k.addEventListener("load",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>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+"px";this.style.width=m+"px";this.style.marginLeft=(-1*l)+"px";this.style.marginTop=(-1*n)+"px"});return i}function c(o){var n=o.length;for(var m=n-1;m>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__==="function"){__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]関連記事表示プラグイン-->
コードの挿入位置は、以下のイメージを参考にして下さい。
- [テーマを保存]をクリックして、編集内容を保存してください。
設定はこれで終わりです。お疲れ様でした。
実際に自分のブログにアクセスし、関連記事が表示されている事を確認して下さい。
スポンサーリンク
オプション
今回紹介した、関連記事表示プラグインは、オプションで、表示条件を制御する事ができます。
オプションの設定方法
コピーしたコードに、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件までが、リストに表示されます。
さいごに
如何でしたでしょうか？
「うまく表示されないけど？」という方は、コメント欄から連絡頂ければ、可能な限り対応します。
こんにちは！
返信削除こちらのブログの目次機能と関連記事機能を使わせていただいています。
コピペですぐに使えるので、ありがたいです。
ちょっと報告なのですが、関連記事機能は、「下書き」状態で公開していない記事もタグをつけているとリストに拾ってしまうことがあるようです。
僕の環境の問題なのか、細かいところは確認できていませんが、そういうことがありましたという報告でした。
このコメントは投稿者によって削除されました。
返信削除