---

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

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

<!--/topentry-->

<!--permanent_area-->
<script type="text/javascript"><!--
(function(){
var _d=document,dl=_d.getElementsByTagName('dl');
for(var i=0,j=dl.length;i<j;i++){var L=dl[i];
 if(L.className.indexOf('relate_dl')<0)continue;
 L.getElementsByTagName('dt')[0].firstChild.nodeValue='関連記事';
 var r=_d.getElementById('relatePosition');L.id='relateDl';
 if(r)r.appendChild(L);
 break;}
})();
--></script>
<!--/permanent_area-->

　続いて、リストを表示したい箇所に次のコードを入れて完成です。プラグインの中に入れる場合は、[プラグインの設定][詳細][プラグインの改造]でプラグイン内のHTML編集エリアに入れます。

<!--permanent_area-->
<div id="relatePosition">
<script type="text/javascript">(function(){
var r=document.getElementById('relateDl');
if(r)document.getElementById('relatePosition').appendChild(r);
})();</script>
</div>
<!--/permanent_area-->

---

　リスト内の現在の記事タイトルを非表示にする場合はテンプレートのスタイルシートに以下を追記します。

.relate_dl .relate_ul .relate_li_nolink {
 display: none;
}

　リストの見出し（関連記事）を非表示にする場合は以下を追記します。

.relate_dl .relate_dt {
 display: none;
}

　非表示にならない場合は !important を追加します。

 display: none !important;

---

　関連記事リストにはてなブックマーク数などを表示する場合は、冒頭のコードに以下（赤字部分）を追加します。

<!--/topentry-->

<!--permanent_area-->
<script type="text/javascript"><!--
(function(){
var _d=document,dl=_d.getElementsByTagName('dl');
for(var i=0,j=dl.length;i<j;i++){var L=dl[i];
 if(L.className.indexOf('relate_dl')<0)continue;
 L.getElementsByTagName('dt')[0].firstChild.nodeValue='関連記事';
 for(var k=0,a=L.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++;
 }
 var r=_d.getElementById('relatePosition');L.id='relateDl';
 if(r)r.appendChild(L);
 break;}
})();
--></script>
<!--/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;
}

---

　TweetBuzzのツイート数を表示する場合も関連記事リストにはてなブックマーク数などを表示と同様なのでそちらをご覧ください。

• ▲

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

　次のコードをjsファイルに加えます。はてなブックマークを表示する場合は、先の赤字部分のコードを加えます。
※関連記事リストにはてなブックマーク数などを表示でコードを追加した場合は既存のコードを削除してこちらを追加します。

function FCrelate(){
 var _d=document,dl=_d.getElementsByTagName('dl');
 for(var i=0,j=dl.length;i<j;i++){var L=dl[i];
  if(L.className.indexOf('relate_dl')<0)continue;
  L.getElementsByTagName('dt')[0].firstChild.nodeValue='関連記事';
  var r=_d.getElementById('relatePosition');L.id='relateDl';
  if(r)r.appendChild(L);
  break;
 }
}

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

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

　リストを表示したい箇所に次のコードを入れて完成です。

<!--permanent_area-->
<div id="relatePosition">
<script type="text/javascript">(function(){
var r=document.getElementById('relateDl');
if(r)document.getElementById('relatePosition').appendChild(r);
})();</script>
</div>
<!--/permanent_area-->

• ▲

ご利用にあたって

　記事の長さや表示箇所によっては既存の位置にある関連リストがチラリと表示される場合があります。そのような現象を回避するときはスタイルシートに次のコードを追加します。

.relate_dl {
 display: none;
}
#relateDl {
 display: block;
}

※JavaScriptがオフのときも関連記事リストが表示されなくなりますのでご注意ください。

---

• 【関連項目】
• Paroday - FC2ブログインフォメーション / 仕様関連記事
• 2010 08-30 - 関連記事リストにはてなブックマーク数などを表示する方法
• 2010 08-10 - 記事下に同じカテゴリの記事を表示する関連記事リスト機能を実装

関連記事

• FC2ブログタイトルに＜!search_area_start＞が表示される、スクリプトが動かないときの対処法
• FC2ブログ管理ページのカテゴリ・プラグインなどをスムーズに並び替える
• 記事下に同じカテゴリの記事を表示する関連記事リスト機能を実装
• 関連記事リストを指定した場所に表示する方法
• Twitter公式ツイートボタン　ツイート数と検索ページはTOPSYで設置
• 関連記事リストにはてなブックマーク数などを表示する方法
• 新機能の関連記事リストを未対応のサーバに実装する方法