スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
公開: --年--月--日, カテゴリ: スポンサー広告

ブログ改装メモ(4) コメント表示を掲示板風に変更してみた

コメント表示をもっとすっきりさせたいと考えていて、そう言えば掲示板のスタイルは誰が・いつ書込みをしたのかが分かりやすくていいなということで、あの普及していると思われる馴染みのありそうなデザインを模倣してみた。 ちなみに、この記事はvoidspaceの再利用記事です。パーマリンクの末尾番号が変なのはそのため。以上、心の声終了。

更新: 2011-01-11
 もう少し詳しく記事を書いたので参考にどうですか。『FC2ブログのコメント表示を掲示板風にする方法

構成要素の比較

変更前


<!-- コメント書込みと編集エリアについては省略している -->

<!--comment_area-->
<h3 id="comment-top">* comment *</h3>
<!--comment-->
<div class="<%comment_name>">
    <div class="section" id="comment<%comment_no>">
        <h4 class="comment-header"><%comment_title></h4>
        <div class="comment-body">
        <%comment_body>
        </div>
        <p class="comment-footer">
        <span class="year"><%comment_year>-<%comment_month>-<%comment_day></span>
        <span class="url"><%comment_mail+name>&nbsp;|<%comment_url+str>&nbsp;|<a href="<%comment_edit_link>" title="コメントの編集">edit</a>&nbsp;|</span>
        </p>
    </div>
</div>
<!--/comment-->
<!-- この間省略 -->
<!--/comment_area-->

変更後


<!-- コメント書込みと編集エリアについては省略している -->

<div class="module-comment">
    <!--comment_area-->
    <!--topentry-->
    <h3 class="thread-title">現在書き込まれているコメントは、(<%topentry_comment_num>)件です。</h3>
    <!--/topentry-->
    <dl class="thread">
    <!--comment-->
        <dt class="<%comment_name>" id="comment<%comment_no>"><%comment_no> :<span class="handle"><%comment_url+name></span>:<%comment_year>/<%comment_month>/<%comment_day>(<%comment_wayoubi>) <%comment_hour>:<%comment_minute>:<%comment_second> ID:<%comment_trip> <a href="<%comment_edit_link>" title="コメントの編集" rel="nofollow">コメントの編集</a></dt>
        <dd><%comment_body></dd>
    <!--/comment-->
    </dl>
<!-- この間省略 -->
    <!--/comment_area-->
<!-- この間省略 -->
</div>

各所に散らばっていたdiv要素を一つに纏めてコメントはdl要素を利用、dt要素で投稿者情報をdd要素でコメント本文を表示させている。この構成は参考にした掲示板と同じで、折角なので投稿者の名前のフォントカラーも合わせている。あと、投稿者がURIを入力すれば名前にアンカーが生成されて一目で分かるようにも。

その他管理者コメントのみcontentプロパティでテキストを生成させて他と見分けやすくしている。ただしInternet Explorer 7以下は対応していないため生成内容は表示されない。まあ別に表示されなくても問題ない。

今回の範囲で利用したテンプレート変数一覧

<!--comment_area--><!--/comment_area-->
記事の個別表示で、コメントを受け付けている場合に表示されるブロック
<!--comment--><!--/comment-->
その記事に付いたコメントを件数分出力するブロック、以下はこのブロック内で有効になる単変数。
<%comment_no>
コメントの通番を表示
<%comment_url+name>
URLリンク付き投稿者名を表示
<%comment_trip>
トリップ(パスワード入力時に生成)を表示
<%comment_year>, <%comment_month>, <%comment_day>
投稿年、月、日を表示
<%comment_hour>, <%comment_minute>, <%comment_second>
投稿時、分、秒を表示
<%comment_wayoubi>
投稿曜日を表示(書式:月/火/水...)
<%comment_body>
コメント本文を表示

コメントのタイトルはどうしようか考えたけど結局表示させないようにしている。なのでコメント投稿フォームからも入力できないようにした。メールアドレス入力欄は元々無いしこちらも公開していないので設けるつもりも無し。

ところで、この記事書いてる途中で思い付いたんだけどTwitter風にしてみても面白いかもしれない。最新のコメントのみフォントサイズ大きくしてみたりとか。実際にどこかやってるところが既にあるような気がするんだけどどうなんだろう、もしお目にかかったらブックマークしておこう。

公開: 2010年12月06日, カテゴリ: ぶろぐいじり