掲示板をデザインする

2011.09.07

掲示板を作成するのページで書いたように、WordPress で掲示板を作ってみたのだが、色をつけるなど装飾したくなった。
いろいろ調べてみたまとめを書いておく。

掲示板でのタグとスタイルは次のような構造になっている。

<ol class=”commentlist”>

<li class=”comment byuser comment-author-anton bypostauthor even thread-odd thread-alt depth-1″ id=”li-comment-295″>
これ以外にも<li class=”comment odd alt depth-4″ id=”li-comment-300″> だとか、クラス名が変化する。
■ 詳細はこちらで確認できる。
■ あと、こちらのサイトでも詳しく解説してくれている。
comment_class – WordPress テンプレートタグのコメントタグ | Lovelog+*

<div id=”comment-295″>

<div class=”comment-author vcard”>
<img alt=” src=’投稿者画像の場所’ class=’avatar avatar-40 photo’ height=’40’ width=’40’ />
<cite class=”fn”>anton</cite>
<span class=”says”>says:</span></div>
<div class=”comment-meta commentmetadata”>
<a href=”投稿日時へのリンク”>投稿日時</a>
<a class=”comment-edit-link” href=”コメント編集へのリンク” title=”コメント編集”>(Edit)</a>
</div>
<div class=”comment-body”>

<p>テスト1</p>

</div>

<div class=”reply”>
<a class=’comment-reply-link’ href=’/musiccamp/musiccamp-bbs/comment-page-1?replytocom=295#respond’ onclick=’return addComment.moveForm(“comment-295”, “295”, “respond”, “447”)’>返信</a>
</div>

</div>

<ul class=’children’>

<li class=”comment byuser comment-author-anton bypostauthor odd alt depth-2″ id=”li-comment-296″>

<div id=”comment-296″>

<div class=”comment-author vcard”>
<img alt=” src=’投稿者画像の場所’ class=’avatar avatar-40 photo’ height=’40’ width=’40’ />
<cite class=”fn”>anton</cite>
<span class=”says”>says:</span>
</div>
<div class=”comment-meta commentmetadata”>
<a href=”投稿日時へのリンク”>投稿日時</a>
<a class=”comment-edit-link” href=”コメント編集へのリンク” title=”コメント編集”>(Edit)</a>
</div>
<div class=”comment-body”>

<p>テスト2</p>

</div>

<div class=”reply”>
<a class=’comment-reply-link’ href=’/musiccamp/musiccamp-bbs/comment-page-1?replytocom=296#respond’ onclick=’return addComment.moveForm(“comment-296”, “296”, “respond”, “447”)’>返信</a>
</div>

</div>

<ul class=’children’>

<li class=”comment byuser comment-author-anton bypostauthor even depth-3″ id=”li-comment-297″>

<div id=”comment-297″>

<div class=”comment-author vcard”>
<img alt=” src=’投稿者画像の場所’ class=’avatar avatar-40 photo’ height=’40’ width=’40’ />
<cite class=”fn”>anton</cite>
<span class=”says”>says:</span>
</div>
<div class=”comment-meta commentmetadata”>
<a href=”投稿日時へのリンク”>投稿日時</a>
<a class=”comment-edit-link” href=”コメント編集へのリンク” title=”コメント編集”>(Edit)</a>
</div>
<div class=”comment-body”>

<p>テスト3</p>

</div>

<div class=”reply”>
<a class=’comment-reply-link’ href=’/musiccamp/musiccamp-bbs/comment-page-1?replytocom=297#respond’ onclick=’return addComment.moveForm(“comment-297”, “297”, “respond”, “447”)’>返信</a>>
</div>

</div>

</li>

</ul>

</li>

</ul>

</li>

</ol>

あとは、色づけなどしたい箇所をスタイルシートで指定するだけ。
はぁ、疲れた。

コメント