Bloggerで「関連記事」リストを表示する

ニュース記事なんかでも、最近は関連記事リストが付いていることが多くて、僕も割と利用する。
だけど、Bloggerでそういうカスタマイズって出来るなんてことは一切考えていなかったので、良くお邪魔するクリボウさんのサイトでその方法を発見したときは衝撃を受けた。

Blogger で「関連記事」リストを表示する 2 つの方法

で、早速導入してみた。あ、クリボウさんのところでは方法が2つ紹介されているが、僕の所では最初の方法だけ試している。2つめの方が簡単なんだけどね。
ラベルごとの関連記事を表示する
論より証拠。
まず、どのようになったかと言うのを紹介する。
結果
関連記事リスト
これは、このブログの「ケフィアを飲むレシピ」の一番下に付けられた関連記事リストである。
「/料理」の部分がラベルに相当し、料理ラベルの直近のリスト6つを並べてある。
導入方法
ここからはクリボウさんのサイトの内容そのままコピーするか、リンクを貼るだけで済ませるべきなんだろうけれど、一応説明だけしておく。
  1. Blogger 管理画面「テンプレート > HTML の編集」ページを選択。
  2. HTMLの編集画面に移り、「ウィジェットのテンプレートを展開」にチェックを入れる。
  3. テンプレートのテキストエリアから、以下の文字を見つける。ブラウザの検索を使うと便利。
    <b:includable id='main' var='top'>
  4. 見つけた行の前に、 クリボウさんの所に紹介されているコードを貼り付ける。
       1:  <b:includable id='related-posts' var='posts'>
       2:  <b:if cond='data:blog.pageType == &quot;item&quot;'>
       3:  <div class='similiar'>
       4:  <div class='widget-content'>
       5:  <h3>Related Post:</h3>
       6:  <div id='data2007'/>
       7:     <script type='text/javascript'>
       8:   
       9:     var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
      10:     var maxNumberOfPostsPerLabel = 6;
      11:     var maxNumberOfLabels = 3;
      12:   
      13:     function listEntries10(json) {
      14:     var ul = document.createElement(&#39;ul&#39;);
      15:     var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ? 
      16:                   json.feed.entry.length : maxNumberOfPostsPerLabel;
      17:     for (var i = 0; i &lt; maxPosts; i++) {
      18:     var entry = json.feed.entry[i];
      19:     var alturl;
      20:   
      21:         for (var k = 0; k &lt; entry.link.length; k++) {
      22:           if (entry.link[k].rel == &#39;alternate&#39;) {
      23:             alturl = entry.link[k].href;
      24:             break;
      25:           }
      26:         }
      27:         var li = document.createElement(&#39;li&#39;);
      28:         var a = document.createElement(&#39;a&#39;);
      29:         a.href = alturl;
      30:   
      31:  if(a.href!=location.href) {
      32:     var txt = document.createTextNode(entry.title.$t); 
      33:     a.appendChild(txt);
      34:     li.appendChild(a);
      35:     ul.appendChild(li); 
      36:  }
      37:     }
      38:       for (var l = 0; l &lt; json.feed.link.length; l++) {
      39:         if (json.feed.link[l].rel == &#39;alternate&#39;) {
      40:           var raw = json.feed.link[l].href;
      41:           var label = decodeURIComponent(raw.substr(homeUrl3.length+13));
      42:           var txt = document.createTextNode(label);
      43:           var h = document.createElement(&#39;b&#39;);
      44:           h.appendChild(txt);
      45:           var div1 = document.createElement(&#39;div&#39;);
      46:            div1.appendChild(h);
      47:           div1.appendChild(ul);
      48:           document.getElementById(&#39;data2007&#39;).appendChild(div1);
      49:         }
      50:       }
      51:     }
      52:     function search10(query, label) {
      53:   
      54:     var script = document.createElement(&#39;script&#39;);
      55:     script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
      56:      + label +
      57:      &#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
      58:     script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
      59:     document.documentElement.firstChild.appendChild(script);
      60:     }
      61:   
      62:     var labelArray = new Array();
      63:     var numLabel = 0;
      64:   
      65:     <b:loop values='data:posts' var='post'>
      66:       <b:loop values='data:post.labels' var='label'>
      67:         textLabel = &quot;<data:label.name/>&quot;;
      68:       
      69:         var test = 0;
      70:         for (var i = 0; i &lt; labelArray.length; i++)
      71:         if (labelArray[i] == textLabel) test = 1;
      72:         if (test == 0) { 
      73:            labelArray.push(textLabel);
      74:            var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ? 
      75:                   labelArray.length : maxNumberOfLabels;
      76:             if (numLabel &lt; maxLabels) {
      77:               search10(homeUrl3, textLabel);
      78:               numLabel++;
      79:            }
      80:         }
      81:       </b:loop>
      82:     </b:loop>
      83:     </script>
      84:  </div>
      85:  </div>
      86:  </b:if>
      87:  </b:includable>
  5. 次に、テキストエリアから
    <div style='clear: both;'/> <!-- clear for photos floats –>
    というコードを見つけ出し、その次の行に
    <b:include data='posts' name='related-posts'/>

  6. を挿入しておしまい。


このブログでもソースコードを貼る方法を導入しないと、見づらくて仕方が無いorz

一応、ソースコードをハイライトして表示する手段を使ってみたんだけど……、イマイチだorz

今後、改善できたらしていこうと思うけど、暫くは試行錯誤が続きそうだ。

今回、クリボウさんのところのソースコードを貼り付けなかったのも、それが理由である。そのうち改善するつもりなんだけど。







ランキングへの応援クリックよろしく!





    このブログの人気の投稿

    ハンドブレンダーをオススメ

    エーハイム2213、呼び水でホースを口で吸うのが嫌な人の為に