2011年01月17日

【第36回】コメント欄の構成

ブログのコメント欄のデザインを変更してみましょう!

ということでまず今回は、Seesaaブログのコメント欄の構成を解説したいと思います。

こちらが、そのコメント欄の構成です。

SD_036_02.jpg

複雑ですね。

以下で順番に解説していきます。

@#comments
コメント欄全体を定義しているのが、この#commentsです。
こねこ(左サイドバー)テンプレートでは上下左右のpaddingと上のmargin、そして背景色のみが定義されています。

A.comments-head
「この記事へのコメント」および「コメントを書く」の部分のみに適用されているクラスです。

B.comments-body
1つのコメント全体を定義しているクラスになります。
コメントが複数個ある場合、そのコメントの数だけこのクラス、および下記CとDは繰り返されて表示されます。

C.text
コメントの本文部分に適用されているクラスです。
この.textクラスは、ブログの記事本文でも使用されているため、コメントの本文と記事本文の書式は同じになります。

D.comments-post
コメントの「Posted by」の部分を定義しているクラスです。
こねこ(左サイドバー)テンプレートでは、このクラスの下に点線が定義されており、それがコメント同士の境目の線として機能しています。


以上が、コメント欄の主な要素構成となります。

それでは次回以降、少しコメント欄の書式を変更してみましょう。

▼▼▼▼▼▼▼▼▼▼▼▼▼
参考になりましたら
クリック&応援をお願いします
にほんブログ村 ブログノウハウへ
▲▲▲▲▲▲▲▲▲▲▲▲▲

【PR】FXシステムトレードで着実に利益を重ねる長期資産運用方法o(^0^)o ほくほくFX
【PR】日々の運用成績やユーザーの情報満載のブログo(^0^)o ほくほくポートフォリオ
posted by o(^0^)o ほくほく at 19:32| Comment(0) | PCブログデザイン | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。