スポンサーサイト

コメントリスト部分

コメントリストとは、投稿されたコメントを「環境設定の変更>ブログの設定>コメントの表示の方法」で新しい順か、古い順かで設定した通りに並んで表示される部分です。コメント投稿部分を上にするパターンと、コメントリストを上にするパターンがありますが、ここではコメントリストを上にするパターンで解説します。コメント投稿部分を上にする場合は、記述する位置をコメント投稿部分の下にすれば投稿部分が上に表示され、リスト部分が下に表示されます。

スタイルシート部分

h4#comheader, h4#tbheader {
	font-size: 100%;
	font-weight: bold;
	margin: 5px 0px 5px 0px;
	padding: 6px 0 6px 25px;
	background: #ffffff;
        border: 1px solid #999999;
	color: #000;
}
.content {
	margin: 0px 0px 10px 0px;
	padding: 15px 5px 5px 5px;
	line-height: 140%;
	border: 1px solid #999999;
}
.comtitle {
      background-color: #dcdcdc;
      border: 1px solid #999999;
      }
.comfooter, .tbfooter {
      margin: 0px;
      text-align: right;
      font-size: 70%;
}

HTML部分

    <!--/nextentry-->
  </div>
  <h4 id="comheader"><a id = "comment" name="comment">コメント</a></h4>
    <!--comment-->
      <div class = "comtitle">
        <a id="comment<%comment_no>"><%comment_title></a>
      </div>
      <div class="content">
        <%comment_body>
          <div class =  "comfooter">
            <%comment_year>/<%comment_month>/<%comment_day>(<%comment_wayoubi>)
<%comment_hour>:<%comment_minute>:<%comment_second> |
          <%comment_url+str> | <%comment_mail+name> #<%comment_trip>
          [<a href="<%comment_edit_link>">編集</a>] 
          </div>
      </div>
    <!--/comment-->

スタイルシート部分

ここで説明するHTML部分の解説はコメントリスト部分のみですが、スタイルシートはコメントリスト部分とトラックバックリスト部分と併せて設定しています。

h4#comheader, h4#tbheader

ここでは共に表示が同じですのでコメントのヘッダー部分と共にトラックバックのヘッダー部分のスタイルも設定しています。コメントとトラックバックのタイトル部分を表示させています。

.content

コメントとトラックバックの本文表示部分の設定をしています。

.comtitle

コメントごとのタイトル部分の設定をしています。

.comfooter,. tbfooter

コメントとトラックバックのフッター部分の設定をしています。フッター部分には投稿時間やコメントの編集リンクを表示させます。テキストを右寄せ(text-align: right;)しています

HTML部分

今回使用するFC2変数

  • <!--comment-->・・その記事に投稿されたコメントを繰り返し表示する
  • <%comment_no>・・Noを表示する
  • <%comment_title>・・コメントのタイトルを表示する
  • <%comment_body>・・コメント本文を表示する
  • <%comment_year>・・コメントが投稿された「年」を表示
  • <%comment_month>・・コメントが投稿された「月」を表示
  • <%comment_day>・・コメントが投稿された「日」を表示
  • (<%comment_wayoubi>・・コメントが投稿された「曜日(和風)」を表示
  • <%comment_hour>・・コメントが投稿された「時間」を表示
  • <%comment_minute>・・コメントが投稿された「分」を表示
  • <%comment_second>・・コメントが投稿された「秒」を表示
  • <%comment_url+str>・・コメント投稿者のブログURL付き「URL」テキストを表示
  • <%comment_mail+name>・・メールアドレス付き「mail」テキストを表示
  • <%comment_trip>・・トリップを表示します。トリップとはパスワードで記述したテキストを暗号化する事です。
  • <%comment_edit_link>・・コメントの編集へのリンクを表示します。

<h4 id="comheader"><a id = "comment" name="comment">コメント</a></h4>

コメントヘッダー部分を表示しています。a nameは、記事フッター部分でこの位置へ移動するリンクを張り、クリックするとこの位置へ移動します。

<a id="comment<%comment_no>"><%comment_title></a>

そのコメントのNoを表示する<%comment_no>という変数を使用し、右メニュー部分のコメントリンクでクリックするとそのコメントの位置まで移動するようにしています。ここではその位置を指定しています。

ゼロから創るテンプレートトップ

  1. 記事フッター部分
  2. RDF部分
  3. コメントエリア
  4. エントリーナビゲーション
  5. コメントリスト部分
  6. コメント投稿フォーム
  7. コメント編集フォーム
  8. トラックバックURL表示
  9. トラックバックリスト部分
  10. ページナビゲーション部分
  11. left(記事フッター部分~left終わり)ソース

前後の記事

最近の記事

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。