掲示板をデザインする

掲示板を作成するのページで書いたように、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>

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

LINEで送る
このエントリーを Google ブックマーク に追加
[`yahoo` not found]
GREE にシェア

This entry was posted in WordPress and tagged , , . Bookmark the permalink.

One Response to 掲示板をデザインする

  1. Pingback: PS Disable Auto Formatting – <p> や <br /> が自動挿入されるのを防ぐ | あんとんさんち

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です