Bloggerでシンプルな関連記事を簡単に表示する方法

最近、Bloggerの関連記事表示何にしたらいいのか問題で頭を抱えています。

いろいろと試しているのですがどれも一長一短。

今までであれば、Smarter Related Posts Widget for Google Blogger – v2.0一択だったのですが、2016年9月初め頃からうまく動作しておらず、全然表示されなくなりました。

これは多分自分だけではなくて、他の方のブログもそうでした。自分が勝手に調べただけなんですが。

なのでMilliard関連ページプラグインについて | シスウ株式会社を導入したのですが、これがまたうまく動作されなくなりました。

ちゃんと表示はされるのですが、いくつかの記事を過去の日付で投稿したことを発端として、それ以降に投稿したどのラベルの記事に対しても、最新の記事リストを表示するようになってしまいました。

それではもう関連記事でもなんでもないので、外さざるを得なくなりました。

こんな記事を書いたくせにですね……。

で、さいわいなことに自分はブログデザインの都合上、関連記事のサムネイルを表示しないので、めちゃくちゃシンプルな関連記事スクリプトを使えばええんやないかということに気づきまして(だいぶ遅い)、海外のやつでぴったりのやつがあったのでそれを採用しました。

参考

A Simple Related Posts Widget For Blogger - Helplogger

これめちゃくちゃシンプルです。

サムネイルいらない人には完全におすすめできます。設定もめちゃくちゃ簡単。クレジット表記が出ちゃうので、それが嫌ならおすすめできないですけど。

とりあえず設定は5分あればできます。

最終的にどんな感じになるかというと、こんな感じ。(独自にカスタマイズしています。)

設置方法は、まず</head>を探します。

その上に以下のコードを貼り付けます。

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var tmp=new Array(0);var tmp2=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp2[tmp2.length-1]=relatedTitles[i]}}relatedTitles=tmp2;relatedUrls=tmp}function contains(a,e){for(var j=0;j<a.length;j++){if(a[j]==e){return true}};return false}function printRelatedLabels(currenturl){for(var i=0;i<relatedUrls.length;i++){if(relatedUrls[i]==currenturl){relatedUrls.splice(i,1);relatedTitles.splice(i,1)}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>1){document.write('<h2>'+relatedpoststitle+'</h2>')}document.write('<ul>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<li><a href="'+relatedUrls[r]+'">'+relatedTitles[r]+'</a></li>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</ul>');relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length);}
//]]>
</script></b:if>

ちなみに自分は'<h2>'+relatedpoststitle+'</h2>''<p>'+relatedpoststitle+'</p>'に変更しました。

あと、var relatedpoststitle=&quot;Related Posts&quot;;のところ、「Related Posts」の部分は見出しなので好みで変更できます。

例えば、「関連記事」とか「こんな記事も書いています」とか。

次は関連記事を表示したいところを選びます。自分の場合は記事下です。そこに以下のコードを貼り付けます。

<b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script><a style="font-size: 9px; color: #CECECE; float: right;" href="http://helplogger.blogspot.com/2012/04/simple-related-posts-widget-for-blogger.html" rel="nofollow" >Simple Related Posts Widget</a></div></b:if>

ちなみにこの中のvar maxresults=5;の数字は表示される関連記事の数なので、好みに合わせて変更できます。わたしは6にしました。(5個しか表示されないときがあるので間違っているかも……。すみません。)

最後にCSS。これは好みがあるのでわたしのを例に書いておきます。

#related-posts {
    margin: 1em 0;
}
#related-posts p {
    font-size: 115%;
}
#related-posts ul {
    margin: 0;
    padding: 0;
    border-top: solid 1px #dddddd;
}
#related-posts ul li {
    list-style: none;
    border-bottom: solid 1px #dddddd;
}
#related-posts ul li a {
    display: block;
    position: relative;
    padding: 1em 2em 1em 0;
}
#related-posts ul li a::after {
    font-family: FontAwesome;
    content: "\f054";
    color: #cccccc;
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -10.5px;
}

最後の二つは右側の矢印みたいなアイコンを出すためのやつなのですが、これだけではアイコン表示されないので悪しからず。Font Awesome Iconsを使用している方は出ます。

以上で問題なく表示でいるかと思います。

今後サムネイルを表示したい! となるまではこれのままでいくかな。