---

• テンプレート変数を使っている場合
• テンプレート変数を使っていない場合

テンプレート変数を使っている場合

　表示方法の『テンプレート変数のみ』が対象です。関連記事の設置方法については、記事下に同じカテゴリの記事を表示する関連記事リスト機能の表示場所 : 『テンプレート変数のみ』をご覧ください。

---

　設置したコードの中にある次のような箇所を変更します。

<a href="<%topentry_relate_url>"><%topentry_relate_title></a>

　a要素（リンク）の後にはてなブックマークを表示するコードを追加します。

<a href="<%topentry_relate_url>"><%topentry_relate_title></a>
<a href="http://b.hatena.ne.jp/entry/<%url><%topentry_relate_url>" target="_blank"><img src="http://b.hatena.ne.jp/entry/image/<%url><%topentry_relate_url>" alt="" class="relateImg" /></a>

　個別ページでのみはてなブックマークを表示する場合は <!--permanent_area--> で囲みます。

<a href="<%topentry_relate_url>"><%topentry_relate_title></a><!--permanent_area-->
<a href="http://b.hatena.ne.jp/entry/<%url><%topentry_relate_url>" target="_blank"><img src="http://b.hatena.ne.jp/entry/image/<%url><%topentry_relate_url>" alt="" class="relateImg" /></a><!--/permanent_area-->

変更箇所 ▼ テンプレート : スタイルシートの編集

　使用しているテンプレートのスタイルシートに次のコードを加えて完成です。

img.relateImg {
 margin: 0 !important; padding: 0 !important;
 border: 0 none !important; vertical-align: middle !important;
}

---

　現在表示している記事タイトルを非表示にする場合は、テンプレートの次の箇所を変更します。既に非表示になっている場合は必要ありません。

　<!--relate_list--> の直後に赤字部分を追加。

<!--relate_list--><!--relate_entry_other-->

　<!--/relate_list--> の直前に赤字部分を追加。

<!--/relate_entry_other--><!--/relate_list-->

---

　TweetBuzzのツイート数を表示する場合も、同様にコードを追加します。

<a href="<%topentry_relate_url>"><%topentry_relate_title></a>
<a href="http://b.hatena.ne.jp/entry/<%url><%topentry_relate_url>" target="_blank"><img src="http://b.hatena.ne.jp/entry/image/<%url><%topentry_relate_url>" alt="" class="relateImg" /></a>
<img src="http://tools.tweetbuzz.jp/imgcount?url=<%url><%topentry_relate_url>" alt="" class="relateImg" />

　はてなブックマークが不要なときは追加したはてなのコードを削除します。

• ▲

テンプレート変数を使っていない場合

　表示方法の『個別ページの記事下』『一覧ページの記事下』『個別、一覧ページの記事下』が対象です。

---

変更箇所 ▼ テンプレート : HTMLの編集

　記事出力部分 <!--/topentry--> の直後に次のコードを追加します。『関連記事』部分には任意のテキストを指定します。関連エントリとすれば、リストの見出しが関連エントリになります。

<!--/topentry-->

<!--not_edit_area--><!--not_category_area--><!--not_titlelist_area-->
<script type="text/javascript"><!--
(function(){
 var _d=document,dl=_d.getElementsByTagName('dl');
 for(var i=0,j=dl.length;i<j;i++){
  if(dl[i].className.indexOf('relate_dl')<0)continue;
  dl[i].getElementsByTagName('dt')[0].firstChild.nodeValue='関連記事';
  for(var k=0,a=dl[i].getElementsByTagName('a');k<a.length;k++){
   var n=a[k],iH=_d.createElement('img'),aH=_d.createElement('a');
   aH.target='_blank';iH.alt='';iH.src='http://b.hatena.ne.jp/entry/image/'+n.href;
   aH.href='http://b.hatena.ne.jp/entry/'+n.href;aH.appendChild(iH);
   n.parentNode.appendChild(_d.createTextNode(' '));n.parentNode.appendChild(aH);
   k++;
  }
 }
})();
--></script>
<!--/not_titlelist_area--><!--/not_category_area--><!--/not_edit_area-->

　表示方法を『個別ページの記事下』にしているときは最初と最後の行を次のように変更します。

<!--not_edit_area--><!--not_category_area--><!--not_titlelist_area-->
　↓変更
<!--permanent_area-->

<!--/not_titlelist_area--><!--/not_category_area--><!--/not_edit_area-->
　↓変更
<!--/permanent_area-->

変更箇所 ▼ テンプレート : スタイルシートの編集

　使用しているテンプレートのスタイルシートに次のコードを加えて完成です。

.relate_dl ul.relate_ul img {
 margin: 0 !important; padding: 0;
 border: 0 none !important; vertical-align: middle; 
}
.relate_dl .relate_ul .relate_li_nolink {
 display: none;
}

---

　はてなブックマークが不要な場合は、'関連記事'; から break; までのあいだを削除します。

<!--not_edit_area--><!--not_category_area--><!--not_titlelist_area-->
<script type="text/javascript"><!--
(function(){
 var _d=document,dl=_d.getElementsByTagName('dl');
 for(var i=0,j=dl.length;i<j;i++){
  if(dl[i].className.indexOf('relate_dl')<0)continue;
  dl[i].getElementsByTagName('dt')[0].firstChild.nodeValue='関連記事';
 }
})();
--></script>
<!--/not_titlelist_area--><!--/not_category_area--><!--/not_edit_area-->

---

　TweetBuzzのツイート数を表示する場合は、k++; の直前に次のコードを加えます。

   n.parentNode.appendChild(_d.createTextNode(' '));n.parentNode.appendChild(aH);
   var iT=_d.createElement('img');
   iT.alt='';iT.src='http://tools.tweetbuzz.jp/imgcount?url='+n.href;
   n.parentNode.appendChild(iT);
   k++;

　使用しているテンプレートのスタイルシートに次のコードを加えて完成です。

.relate_dl ul.relate_ul a img,.relate_dl ul.relate_ul img {
 margin: 0 !important; padding: 0;
 border: 0 none !important; vertical-align: middle; 
}
.relate_dl ul.relate_ul img {
 margin-left: 5px !important;
}
.relate_dl .relate_ul .relate_li_nolink {
 display: none;
}

※TweetBuzzのカウンタは不安定なときが多いようで、0tweetsによくなります。ツイートの検索ページについてはどうしようもないくらい引っかからないため、省いています。

• ▲

head要素内に外部ファイルを置く場合

　次のコードをjsファイルに加えます。TweetBuzzも表示する場合は、k++; の直前に先のコードを追加します。

function FCrelate(){
 var _d=document,dl=_d.getElementsByTagName('dl');
 for(var i=0,j=dl.length;i<j;i++){
  if(dl[i].className.indexOf('relate_dl')<0)continue;
  dl[i].getElementsByTagName('dt')[0].firstChild.nodeValue='関連記事';
  for(var k=0,a=dl[i].getElementsByTagName('a');k<a.length;k++){
   var n=a[k],iH=_d.createElement('img'),aH=_d.createElement('a');
   aH.target='_blank';iH.alt='';iH.src='http://b.hatena.ne.jp/entry/image/'+n.href;
   aH.href='http://b.hatena.ne.jp/entry/'+n.href;aH.appendChild(iH);
   n.parentNode.appendChild(_d.createTextNode(' '));n.parentNode.appendChild(aH);
   k++
  }
 }
}

　記事出力部分 <!--/topentry--> の直後に次のコードを追加します。

<!--not_edit_area--><!--not_category_area--><!--not_titlelist_area-->
<script type="text/javascript">FCrelate();</script>
<!--/not_titlelist_area--><!--/not_category_area--><!--/not_edit_area-->

　表示方法を『個別ページの記事下』にしているときは最初と最後の行を次のように変更します。

<!--permanent_area-->
<script type="text/javascript">FCrelate();</script>
<!--/permanent_area-->

---

• 【更新履歴】
• 2010 09-11 - 変数追加による記事タイトルの非表示について掲載
• 2010 09-10 - テンプレート変数に対応
• 2010 08-30 - 公開

• 【関連項目】
• Paroday - FC2ブログインフォメーション / 仕様関連記事

関連記事

• 記事下に同じカテゴリの記事を表示する関連記事リスト機能を実装
• 関連記事リストを指定した場所に表示する方法
• Twitter公式ツイートボタン　ツイート数と検索ページはTOPSYで設置
• 関連記事リストにはてなブックマーク数などを表示する方法
• 新機能の関連記事リストを未対応のサーバに実装する方法
• 配信停止：Google Adsenseが表示されないFC2ブログサーバを確認
• Twitter 公式ツイートボタンの設置方法