2007年06月01日

2007 06.01 Fri


記事のコメントに、コメント番号の数字を付けるカスタマイズ方法の解説です。


番号は、『1、2、3、4、5、・・・』とコメントの左に付いていきます。

『No.1、No.2、No.3、No.4、No.5、・・・』のように、数字の前に文字列を表示とか、
『1げっと、2げっと、3げっと、4げっと、5げっと、・・・』のように、数字の後に文字列を表示する事も可能です。

例:
はに丸素材さん

※ テンプレートやカスタマイズの状態によっては、上手く表示されない場合や、若干のスタイルシートの変更等が必要な場合もあります。



管理画面 > デザイン > コンテンツ > 記事 > コンテンツHTML編集
と進み、HTML内の下記の部分を探します。

<% loop:list_individual_article_children -%>
<div class="comments-body">
<div class="text"><% comment.body | tag_strip | nl2br | clickable('target="_blank" rel="nofollow"') %></div>
<div class="comments-post">Posted by <% if:comment.homepage %><a href="<% comment.homepage | tag_strip %>" target="_blank" rel="nofollow"><% comment.writer | tag_strip %></a><% else %><% comment.writer | tag_strip %><% /if %> at <% comment.createstamp | date_format('%Y年%m月%d日 %H:%M') %><br /></div>
</div>
<% /loop -%>


上記を下記のように書き換えます。

<ol class="comment_no_ol">
<% loop:list_individual_article_children -%>
<div class="comments-body">
<div class="text"><li class="comment_no_li"></li><% comment.body | tag_strip | nl2br | clickable('target="_blank" rel="nofollow"') %></div>
<div class="comments-post">Posted by <% if:comment.homepage %><a href="<% comment.homepage | tag_strip %>" target="_blank" rel="nofollow"><% comment.writer | tag_strip %></a><% else %><% comment.writer | tag_strip %><% /if %> at <% comment.createstamp | date_format('%Y年%m月%d日 %H:%M') %><br /></div>
</div>
<% /loop -%>
</ol>


スタイルシート:例

<style type="text/css">
<!--
.comment_no_ol {
padding:0px 0px 0px 0px; /* 余白 */
margin:0px 0px 0px 0px; /* 余白 */
}
.comment_no_li {
font-size:15px; /* 文字の大きさ */
font-weight:bolder; /* 太文字 */
color:#ff0000; /* 色 */
padding:0px 0px 0px 0px; /* 余白 */
margin:0px 0px 0px 0px; /* 余白 */
float:left; /* 回り込み */
}
//-->
</style>


緑色の部分は、好きなように設定。(よくわからない場合は、無くてもOK。)
・保存する前に、必ずプレビューで確認してみて下さい。
・コメント番号が左にずれる場合は、赤色の部分(margin-left)の数字を『0』以上(10とか30とか)に変更して調整。

でも、各BLOGによってスタイルシート等の設定が異なってくるため、
微調整はご自分で。


参考:
コメント番号を付けるペルソナさん

お疲れさまでした。
参考になりましたらソーシャルメディアで共有してくださいませ。
posted by こさめ
edit  re
この記事へのコメント
コメントを書く
お名前:

ホームページアドレス:(http:を省略して下さい)
http:
コメント: [必須入力]

※ブログオーナーが承認したコメントのみ表示されます。

■ この記事へのトラックバック
カテゴリ
インターネット>ブラウザ・WEBメール(24)
インターネット>Firefoxアドオン、設定(15)
インターネット>Proxomitronフィルター(32)
インターネット>ブログ、WEBサービス(53)
インターネット>アフィリエイト・ポイントサイト(27)
インターネット>楽天、ポイントあれこれ(5)
インターネット>Windows最適設定(32)
インターネット>インターネット設定(17)
インターネット>デスクトップ改造・拡張(7)
インターネット>セキュリティソフト(6)
ブログカスタマイズ>カテゴリー、記事一覧系(38)
ブログカスタマイズ>jQuery(Script)文字系(23)
ブログカスタマイズ>CSS(Script)デザイン(28)
ブログカスタマイズ>ブログパーツ(7)
ブログカスタマイズ>携帯モバイル系(3)
ブログカスタマイズ>SEO・アクセスアップ(31)
マルチメディア>Brackets(5)
マルチメディア>画像系ソフト(6)
マルチメディア>DVD・動画プレイヤー(15)
マルチメディア>動画編集ソフト(6)
マルチメディア>音楽再生プレイヤー(16)
マルチメディア>ネットラジオ配信・編集(3)
マルチメディア>P2Pテレビソフト(4)
マルチメディア>おもしろ動画・感動動画(25)
デザイン>フリー素材 画像(5)
デザイン>HP・ブログ フリー素材(6)
デザイン>イラスト(非素材)(8)
デザイン>作詞作曲編曲MP3(5)
雑記>PC部品・音楽機材(7)
雑記>映画・アニメ・漫画・芸能(14)
雑記>どうでもいい雑学知識(6)
雑記>ゲーム(6)
雑記>スマホ・携帯電話(6)
雑記>カーナビ・ETC(3)
雑記>ネット銀行とか(2)
雑記>18禁?ちょいエロネタ(3)

 (C) 2006 - kosame All rights.