コメントリスト部分

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

スタイルシート部分

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部分

今回使用するＦＣ２変数

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

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

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

スポンサーサイト

前後の記事

最近の記事

コメントリスト部分

前後の記事

最近の記事

Search

ＦＣ２blogビギナーズガイド

コラム

作成したツール

月別アーカイブ

Links