fc2blogでコメントナンバーを記事ごとに1から順番に振る方法

更新
2012年09月05日(水)

fc2blogではコメントナンバーはblog全体で通番です。JavaScriptを使えば、記事ごとに1から番号を振れます。当サイト作者が作成した次のテンプレートについてです。

概要

  1. コメントナンバーをJavaScriptで記事ごとに1から順番に番号を振る方法です。

  2. 記事ごとのコメントナンバーと、blog全体での通番の両方を表示できます。

  3. customtemplate ver1.2.0以降、valid-seo-2c と valid-seo-3c の ver1.1.2以降はデフォルトで記事ごとのコメント番号が表示されます。このページの設定は不要です。

メリット

  1. その記事でそのコメントが何番目かが一目瞭然になります。

テンプレートのHTMLを編集

  1. 次のコードを見つけます。下図で反転している部分です。

    
    <!--comment-->
    <!-- ▼▼▼ 既に投稿されたコメントを表示するスペース 開始 ▼▼▼ -->
    <dl class="comments round <%comment_name>">
    <dt id="comment<%comment_no>" class="comment-title"><%comment_title></dt>
    <dd class="comment-body"><%comment_body></dd>
    <dd class="comment-footer">
    <ul>
    <li>No.<%comment_no></li>
    
    valid-seo-111-comment-number-1.png
  2. 下記コードに入れ替えます。

    
    <script type="text/javascript">
    <!--
    var i=1;
    // -->
    </script>
    <!--comment-->
    <!-- ▼▼▼ 既に投稿されたコメントを表示するスペース 開始 ▼▼▼ -->
    <dl class="comments round <%comment_name>">
    <dt id="comment<%comment_no>" class="comment-title"><%comment_title></dt>
    <dd class="comment-body"><%comment_body></dd>
    <dd class="comment-footer">
    <ul>
    <li class="comment-no">
    <script type="text/javascript">
    <!--
    document.write("No.", i);
    i=i+1;
    // -->
    </script>
    <span> (No.<%comment_no>)</span></li>
    
    valid-seo-111-comment-number-2.png

テンプレートのCSSを編集

その記事のコメントナンバーのみを表示

  1. CSS編集の/*コメント・トラックバック*/の段落あたりに次のコードを追加します。

    
    .comment-no span{display:none;}
    
    valid-seo-111-comment-number-3.png

その記事のコメントナンバーとblog全体の通番を表示

  1. blog全体通番に装飾しない場合は、CSSで編集する部分はありません。上記コードも入れません。

  2. 装飾する場合は、上記コードの代わりに次のようなコードを追加します。下記コードは一例です。colorなどのプロパティをカスタムできます。

    
    .comment-no span{color:#aaa;font-size:85%;}/*blog全体通番の装飾*/
    

2012年7月24日追記:次回改訂時にCSSでコメント番号

  1. JavaScriptを使わずにCSSだけでできました。今後のテンプレートの改訂(ver1.1.2以降)で、CSSだけでコメント番号が記事ごとに連番になるようにします。

以上です。

関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)