Paroday

Paroday:ニュースやアニメのレビュー、FC2ブログのテンプレート・プラグインなどを配信しています。

もしかして Parody ではありませんか? yes

関連記事リストを指定した場所に表示する方法

関連記事リストを指定した場所に表示

 テンプレート変数を使わずに、個別ページにおいて関連記事リストを指定した場所に表示する方法です。表示方法『個別ページの記事下』が対象です。

 自動挿入される関連記事リストは、表示箇所が記事本文下部に限定されています。それをコメントの上部やサイドバーなど任意の場所に表示するスクリプトです。

 関連記事リストの仕様やデザインスタイル、テンプレート変数を使用して任意の場所に設置する方法については、記事下に同じカテゴリの記事を表示する関連記事リスト機能をご覧ください。


変更箇所 ▼ テンプレート : 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がオフのときも関連記事リストが表示されなくなりますのでご注意ください。


関連記事
  1. comment
  2. あれはんどろ 2010-09-09 22:20 No.512 #-URLhttp://n23.blog91.fc2.com

    スクリプト使わなくても、独自タグで関連記事の表示を調節できるようになりましたね。サムネイルもタイトルとともに表示できたらもっといいのになぁと、さらに改良される事に期待。

  3. Pdy 2010-09-10 14:03 No.513 #-URL

    なりましたね!
    すごいタイミングです。
    感動しました。
    改良を重ねていくうちに、気が付いたら、別の機能になってるかもしれません。
    関連の関連の記事リスト。

コメント

Icon ※必須 :
Pass  ※入力した英数字を識別コードとしてNoに表示(123→LkZag.iM)

トラックバック

http://paro2day.blog122.fc2.com/tb.php/607-6d8bba2a

  1. trackback