Top > CMS・ブログ > FC2ブログ > カスタマイズ > 最近のコメント > 2007年3月
2007年3月23日

FC2ブログの「最近の記事+コメント」プラグインをきれいなツリーにする

March 23,2007 2:20 AM
Tag:[, , , ]
Permalink

FC2ブログの人気プラグイン「最近の記事+コメント」のツリー表示を、画像を使ってきれいなツリーにするカスタマイズです。

「最近の記事+コメント」プラグインのきれいなツリー

以下、カスタマイズ方法です。すでに「最近の記事+コメント」プラグインを適用されている状態から説明を開始します。
適用されていない場合は、FC2 ブログ管理画面より、「プラグインの追加 [ 公式 / 共有 ]」の「共有」のリンクをクリックし、次ページに表示されている「最近の記事+コメント」をクリック、さらに次ページで「追加する」のフォームボタンをクリックしてください。これで、その少し上にある「プラグインカテゴリー」の位置に「最近の記事+コメント」が表示されます。

1.プラグインのHTML編集

FC2ブログの管理画面より、[環境設定] - [プラグインの設定] で、プラグインカテゴリーに表示されている「最近の記事+コメント」の右側にある「HTMLの変更」をクリックします。

HTML編集

次のページで表示されたテキストエリアをスクロールし、下の内容、

テキストエリア

を、下のリストの赤色部分を削除し、青色を追加してください。よく分からない方は「変更後」のリストをマウスコピーし、元のソースコードの同じ行の部分と丸ごと入れ替えてください。
テキストエリアが狭いので、任意のエディタに一旦コピーしてから編集した方が分かりやすいでしょう。

変更前

var FMT_HEAD         = '<UL>';
var FMT_PARENT_HEAD  = '  <LI style="text-align:left">';
var FMT_PARENT_BODY  = '    %ENTRY% %EXTRA%';
var FMT_COMM_HEAD    = '';
var FMT_COMM_BODY    = '    <BR />├ %COMMENT%';
var FMT_COMM_TAIL    = '';
var FMT_PARENT_TAIL  = '  </LI>';
var FMT_TAIL         = '</UL>';
var FMT_PARENT_BODYL = FMT_PARENT_BODY;
var FMT_COMM_BODYL   = '    <BR />└ %COMMENT%';

変更後

var FMT_HEAD         = '<UL>';
var FMT_PARENT_HEAD  = '  <LI style="text-align:left">';
var FMT_PARENT_BODY  = '    %ENTRY% %EXTRA%';
var FMT_COMM_HEAD    = '<UL>';
var FMT_COMM_BODY    = '    <LI class="tree"> %COMMENT%</LI>';
var FMT_COMM_TAIL    = '</UL>';
var FMT_PARENT_TAIL  = '  </LI>';
var FMT_TAIL         = '</UL>';
var FMT_PARENT_BODYL = FMT_PARENT_BODY;
var FMT_COMM_BODYL   = '    <LI class="tree_end"> %COMMENT%</LI>';

大体お分かりと思いますが修正内容は、ツリー用のテキストを削除し、その代わりに順序なしリストタグ(ul / li)を追加しています。この追加した ul タグおよび li タグは必ず大文字で記述してください。小文字で記述すると内容が全く表示されなくなるという不具合が確認されました。

2.スタイルシートの修正

スタイルシートに下記を追加してください。
設定は当サイトで公開しているテンプレートに合わせておりますので、ご利用のテンプレートによってはプロパティの設定を変更する必要があるかもしれません。予めご了承ください(分からない場合はご質問ください)。

.tree {
    margin-left: 3px;
    padding: 0 0 0 15px;
    background: url(http://blog-imgs-13.fc2.com/k/o/i/koikikukan/tree_lst.gif) no-repeat 2px 0;
    list-style: none;
}
.tree_end {
    margin-left: 3px;
    padding: 0 0 0 15px;
    background: url(http://blog-imgs-13.fc2.com/k/o/i/koikikukan/tree_end.gif) no-repeat 2px 0;
    list-style: none;
}

また、ツリー画像のURLは私のサイトにある画像を読み込むようにしています。他の画像を利用したい場合は、ご自身のサイトに画像ファイルをアップロードし、その画像ファイルを読み込むようにしてください。
tree_lst.gif は 途中のツリー画像、tree_end.gif は最後のツリー画像です。

3.コメントの日付が表示されない場合

コメントのついた記事に日付が表示されない([--/--]となる)のは、「環境設定」で設定した記事数に含まれない記事に対してコメントが投稿された場合です。本カスタマイズの影響ではありませんので、ご注意ください。

2008.08.03
ツリー画像のURLを変更しました。また、3項を追加しました。

Comments [50] | Trackbacks [1]
2007年3月12日

FC2ブログのツリー化された「最近のコメント」のリンクから該当コメントにジャンプする

March 12,2007 1:50 AM
Tag:[, , , ]
Permalink

FCブログの一部のテンプレートで利用されているツリー化スクリプトを修正し、ツリー化された「最近のコメント」のリンクから該当のコメントに直接ジャンプする方法を紹介します。

ご質問された方が利用されているテンプレートは [simple-w] というものですが、カスタマイズ自体は Jugem カスタマイズ講座から継承された汎用的なもので、下記のサイトで同じスクリプトが公開されています。

1.「最近のコメント」タグの変更

抜粋で変更箇所を掲載します。a 要素にコメント番号を示すための id 属性を追加しています。

変更前

    :
<!--rcomment--> 
<li>
<%rcomment_etitle><br/>
<a href="<%rcomment_link>#comment_head"><%rcomment_name><span class="day"> (<%rcomment_month>/<%rcomment_day>)</span></a>
</li> 
<!--/rcomment-->
    :

変更後

    :
<!--rcomment--> 
<li>
<%rcomment_etitle><br/>
<a href="<%rcomment_link>#comment_head" id="comment<%rcomment_no>"><%rcomment_name><span class="day"> (<%rcomment_month>/<%rcomment_day>)</span></a>
</li> 
<!--/rcomment-->
    :

2.スクリプトの修正

こちらも抜粋で変更箇所を示します。追加した処理で、コメントリストに付与した id 属性値を取得し、それを各コメントリンクの href 属性の # の後方に設定しています。

変更前

    :
if (idName.indexOf('comment') > -1 || idName.indexOf('tb') > -1) { 
  var tmpText = objList.innerHTML.split("⇒"); 
  tmpText[0] = tmpText[0].slice(0,tmpText[0].search(/<BR/i)); 
  this.base = Array('<a href="',linkUrl,'">',tmpText[0],'</a>').join(''); 
  this.elem = objLink.innerHTML; 
} else if (idName.indexOf('entry') > -1) {
    :

変更後

    :
if (idName.indexOf('comment') > -1 || idName.indexOf('tb') > -1) { 
  var tmpText = objList.innerHTML.split("⇒"); 
  tmpText[0] = tmpText[0].slice(0,tmpText[0].search(/<BR/i)); 
  this.base = Array('<a href="',linkUrl,'">',tmpText[0],'</a>').join(''); 
  var linkId = objLink.getAttribute('id'); 
  var tmpLink = linkUrl.split("#"); 
  this.elem = '<a href="' + tmpLink[0] + '#' + linkId + '">' + objLink.innerHTML + '</a>';
} else if (idName.indexOf('entry') > -1) {
    :
Comments [2] | Trackbacks [1]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner


AMN
Categories
Monthly Archives
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3