• TOP
• ブログ

【ZELOカスタマイズ】関連記事をおしゃれに表示するための簡単な方法【Blogger】

2020.7.8 2020.7.9 ブログ

この記事ではBloggerテンプレートZELOで関連記事をおしゃれに表示する方法について解説していきます．

目次[非表示]

• 1はじめに
• 2関連記事の設定
• 3関連記事の表示
• 4CSSの追加
• 5まとめ
  • 5.1関連記事

はじめに

私がブログを始めたのが2~3年ほど前なのですが当時は日本語対応のBloggerテンプレートは少なくてZELOというテンプレートを使用するという選択肢が多かったかと思います．

それが現在はQooQなども増えておりBloggerのテンプレート界隈は賑わっていますよね．私自身ではHTMLなどは全然書けないのでありがたい限りです．

というわけで私も最近出てきたテンプレートに乗り換えたいなとも思うんですが現在使っているHTMLのソースコードは秘伝のタレレベルで継ぎ足し継ぎ足しを行なってきておりもはや原型を留めていません．テンプレートを乗り換えるには変更した部分のコードを再度移植するという途方もない作業が待っているためうかうか乗り換えれないというわけです．

これからもZELOのコードを改変しながら使っていこうねと決意したところで今回はオシャレな関連記事を表示していきましょう．QooQとかだとなんかいい感じの関連記事が自動で作られるそうなんで羨ましいなと思いながら色々情報を探してきましたのでみなさんに共有したいと思います．

この設定をすることで以下の画像のような感じで関連記事を挿入することができます．

関連記事の設定

というわけでまずは関連記事の設定を行なっていきましょう．私はこちらのブログの記事を参考にさせていただきました．

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

ちなみにHTMLコードの編集をしていくので必ずバックアップを取っておいてください．
まずはHTMLののすぐ上の部分に以下のコードを挿入してください．

<!--Related Posts widget with Thumbnails Code Before Head Start-->
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
var relatedpoststitle=&quot;関連記事&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>
<!--Related Posts widget with Thumbnails Code Before Head Ends-->

関連記事の表示

それでは記事内で関連記事を表示したい部分に以下のコードを挿入してください．ちなみに私は<b:include data=‘post’ name=‘post’/>のすぐ下に挿入しています．これで記事本文のすぐ下に関連記事を表示することができます．

<!--Related Posts widget Start-->
<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 href='http://helplogger.blogspot.com/2012/04/simple-related-posts-widget-for-blogger.html' rel='nofollow' style='font-size: 9px; color: #CECECE; float: right;'>Simple Related Posts Widget</a></div></b:if>
<!--Related Posts widget End-->

CSSの追加

最後にこの関連記事表示用のCSSを追加して完成です．テーマ>カスタマイズ>詳細設定>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;
}

まとめ

というわけで今回は簡単に関連記事ウィジェットを表示する方法について解説しました．取り組んでいて思ったんですがほとんどのブログさんがアドセンスの関連コンテンツで関連記事などを表示されているので私もゆくゆくは関連コンテンツを扱えるレベルのブロガーになってみせるぞという気持ちが湧き上がってきましたね．

というわけで今回もこの辺りで．最後まで読んでくださってありがとうございました．