こちらの関連記事表示は旧バージョンです。全面的に改良した新バージョンを作成したので、こちらの記事をご覧ください↓

Blogger用の関連記事表示を改良しました | IB-Note

Blogger用の関連記事表示を改良したので、詳細と導入方法についてご紹介します。

itblogger-note.blogspot.com

とっても便利なBloggerですが、標準プラグインが少ないのが玉に瑕。

私みたいにテーマをフルカスタマイズしている人だと、あちこちで問題に直面することも多いかと思います。その内の一つが関連記事表示。

探すとプラグインが無いことはないのですが、使い勝手がいまいちだったり・・・

というわけで今回、色々情報を探し回った末、海外製のコードを改造してプラグイン化してみました。以下で詳しい特徴や導入方法についてご紹介します。

特徴

プラグインの主な特徴は以下の通りです。

コードについて

今回改造させてもらったソースは下記サイトのものです。制作者様に感謝。

ソース：How to Add Related Posts Widget with Thumbnails to Blogger / Blogspot

コードは主にJavaScript中のタグとCSSをいじらせてもらいました。

そのままでも関連記事を表示させることはできるんですが、表示が固定されていたりタグの配置が微妙だったりしたため修正してます。

表示機能自体は他の海外製コードと違い全く問題なかったため、そのまま採用させてもらいました。中の動作がどうなっているかは正直よくわかってないんですが←

ちなみに、表示に関してはイマドキなflexboxを使ってます。元コードはfloatを使ってましたが、レイアウト崩れの原因になりやすいので変更しました。

いざ、導入

早速、関連記事表示を導入してみましょう。

テーマのバックアップ

最初にテーマのバックアップを取っておきましょう。

管理画面から「テーマ」→「バックアップ」を選択し、ダウンロードしてファイルを保存します。

HTMLの編集1

「テーマ」→「HTMLを編集」をクリックし、編集画面を開きます。

</head>の直前に以下のコードを追加します。

<!-- [START] 関連記事表示用コード1 -->
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpJms9mnNPfhuWkuWFCoMCTzb9wop7cvTs5LlisKd79TN06TOEHDwmB5mMkes27EY6H9XQpbkqNOCMDA3WoyWJDi8D2C3-SDQCYI3UJzKTE5QG1fdGjSBNC5snDeJmc-x9EggqNenPEmU/w400/";showRandomImg=true;aBold=true;summaryPost=400;summaryTitle=20;numposts1=12;numposts2=4;function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}
  function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();if(numposts2<=json.feed.entry.length){maxpost=numposts2}else{maxpost=json.feed.entry.length}for(var i=0;i<maxpost;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;pcm='<a href="'+posturl+'">'+pcm+' comments</a>';var trtd='<div class="col_maskolis"><h2 class="posttitle"><a href="'+posturl+'">'+posttitle+'</a></h2><a href="'+posturl+'"><img class="related-img" src="'+img[i]+'"/></a><div class="clear"></div></div>';document.write(trtd);j++}}var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpJms9mnNPfhuWkuWFCoMCTzb9wop7cvTs5LlisKd79TN06TOEHDwmB5mMkes27EY6H9XQpbkqNOCMDA3WoyWJDi8D2C3-SDQCYI3UJzKTE5QG1fdGjSBNC5snDeJmc-x9EggqNenPEmU/w400/'}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<div class="related-text">'+relatedpoststitle+'</div>');document.write('<div class="p-container"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><div class="related-img" style="background-image: url('+thumburl[r]+');"></div><div class="related-title">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
<style type='text/css'> 
.related-text{font-size: 1.5em;font-weight: bold;margin: 2em 0 1em;border-bottom: 2px solid #444;}.p-container{display: flex;flex-wrap: wrap;}#related-posts a{display: block;width: 24%;color: #444;margin: 0 1% 2em 0;transition: all 0.3s ease;}#related-posts a:hover{opacity: 0.7;}.related-img{width: 100%;height: 110px;background-size: cover;background-position: center;}.related-title{font-size: 90%;margin-top: 10px;}@media screen and (max-width: 600px){.p-container{justify-content: space-between;}#related-posts a{width: 48%;margin-right: 0;}}
</style>
</b:if>
<!-- [END] 関連記事表示用コード1 -->

コードの挿入位置は下の画像を参考にしてください↓

HTMLの編集2

次に、以下のコードを関連記事を表示させたい位置に自由に置いてください。私の場合はコメント欄の後に配置しています。

<!-- [START] 関連記事表示用コード2 -->
<b:if cond='data:blog.pageType == "item"'>
  <div id='related-posts'>
    <b:loop values='data:post.labels' var='label'>
      <b:if cond='data:label.isLast != "true"'>
      </b:if>
      <b:if cond='data:blog.pageType == "item"'>
        <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=99"' type='text/javascript'/>
      </b:if>
    </b:loop>
    <script type='text/javascript'>
    var currentposturl="<data:post.url/>";
    var maxresults=8; //設定オプション1
    var relatedpoststitle="関連記事"; //設定オプション2
    removeRelatedDuplicates_thumbs();
    printRelatedLabels_thumbs();
    </script>
  </div>
</b:if>
<!-- [END] 関連記事表示用コード2 -->

よくわからないという人は、とりあえず「Ctrl+F」で次のコード部分を探してください。2つあった場合は2番目のほうで止まってください。

<div class='post-footer'>

この部分の直前に配置すると、記事の詳細情報やリアクションが表示されている場所の上に関連記事が表示されます。当ブログでいうと下の画像の部分です。

以上で、導入は完了です。テーマを保存し、ブログを確認してみてください。

下の画像のように関連記事が正しく表示されていればOKです。

オプション

基本設定

記事の表示数とタイトルを変えることができます。

記事表示数

HTML編集2で追加したコードのうち、以下の赤い数字部分をお好みの表示数に変えてください。

var maxresults=8; //設定オプション1

ちなみに、以下のコードの青い数字部分は読み込む記事の最大件数です。記事総数よりも大きい数字になるように設定してください。（例：100記事以上の場合、"999"など）

<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=99"' type='text/javascript'/>

タイトル

タイトルを「関連記事」から「こちらの記事もおすすめです」等、自由に設定できます。

以下のコードの赤字部分を変えてください。

var relatedpoststitle="関連記事"; //設定オプション2

上級設定

もはやオプションと言っていいかわかりませんが、自信がある人向けです。

例えば、今回の表示ではタイトル部分が<div>要素になっているので、これを<h4>等に変えたいという人は関連記事表示用コード1のJavaScript部分の対象タグを書き換えてください。

詰まってて見づらいですが、ジーっと見ていればいけるはずです・・・！

表示部のデザイン変更

コピペで簡単に適用できるデザインをいくつか用意しました。

<style type='text/css'>...</style>

となっている部分を、各スタイルのCSSに置き換えてください。

ボックス型

<style type='text/css'>
.related-text{font-size: 1.5em;font-weight: bold;margin: 2em 0 0.5em;}.p-container{display: flex;flex-wrap: wrap;}#related-posts a{display: block;width: 24%;color: #444;padding: 1em;margin: 0 1% 1em 0;box-sizing: border-box;border: 1px solid #ddd;transition: all 0.3s ease;}#related-posts a:hover{opacity: 0.7;}.related-img{width: 100%;height: 110px;background-size: cover;background-position: center;}.related-title{font-size: 90%;margin-top: 10px;}@media screen and (max-width: 600px){.p-container{justify-content: space-between;}#related-posts a{width: 48%;margin-right: 0;}}
</style>

スレッド型

<style type='text/css'>
.related-text{font-size: 1.3em;font-weight: bold;text-align: center;padding-bottom: 0.2em;margin-top: 2em;border-bottom: 5px double #444;}.p-container{display: flex;flex-direction: column;}#related-posts a{display: flex;align-items: center;width: 100%;color: #444;padding: 0.8em 0;border-bottom: 1px solid #eee;transition: all 0.3s ease;}#related-posts a:hover{opacity: 0.7;}.related-img{width: 150px;min-width: 140px;height: 100px;background-size: cover;background-position: center;}.related-title{margin-left: 1em;}
</style>

タイル型

<style type='text/css'>
.related-text{font-size: 1.5em;font-weight: bold;margin: 2em 0 0.5em;}.p-container{display: flex;flex-wrap: wrap;}#related-posts a{position: relative;display: block;width: 32.3%;color: #444;margin: 0 1% 1% 0;transition: all 0.3s ease;}#related-posts a:hover{opacity: 0.7;}.related-img{width: 100%;min-height: 150px;background-size: cover;background-position: center;}.related-title{position: absolute;bottom: 0;width: 100%;font-size: 90%;color: #fff;background: rgba(0,0,0,0.65);padding: 0.3em;box-sizing: border-box;}@media screen and (max-width: 600px){.p-container{justify-content: space-between;}#related-posts a{width: 49.5%;margin-right: 0;}}
</style>

いかがでしょうか。

ん？デザインがいまいちイケてない？・・・そこは皆さんで素敵にアレンジしてください(;^ω^)

CSSは気を配って設定したつもりですが、環境によっては表示が変になってしまうこともあると思います。そうした場合、可能な範囲で値を調整するようにしてください。

ちなみに、どれも一応レスポンシブデザインになっているので、PC/スマホ問わずお使いいただけます。メディアクエリのブレークポイントは600pxです。

注意点

関連記事に関して

関連記事はラベルを利用して表示しているため、ラベルが正しく設定されていないと関連記事として表示されません。ご注意ください。

CSSに関して

今回のコードではfloatを一切使用していないため、一部のブラウザやバージョンが古いブラウザでは正しく表示されない場合があります。

現在、基本的にどのブラウザも最新バージョンではflexboxに対応しているようですが、必要に応じてベンダープレフィックスを付けるようにしてください。

YouTubeサムネ画像に関して

YouTubeのサムネ画像は自動取得できません。そのため、YouTube動画しかない記事の場合、別途サムネ用の画像を設定するようにしてください。

最後に

今まで理想の関連記事表示を追い求め、かなりの時間を費やしてきましたが、これでやっと終止符を打つことができました。

必要最小限の構成で実用的に仕上がっていると思うので、関連記事表示でお悩みの方はぜひ一度お試しください。