ソネブロの構造解析（その２）

ソネブロの構造解析（その１）から続きます。

構造解析の続き

５記事

【 .articles 】
記事全体の設定です。

例：[.articles]の背景に赤色を設定

.articles {
background:#FF0000;
}

【 .articles-title 】
記事のタイトル部の設定です。

例：[.articles]の背景に赤色、[.articles-title]の背景に黄色を設定

.articles {
background:#FF0000;
}

.articles-title {
background:#FFFF00;
}

【 .articles-body 】
記事本文の設定です。

例：[.articles]の背景に赤色、[.articles-body]の背景に黄色を設定

.articles {
background:#FF0000;
}

.articles-body {
background:#FFFF00;
}

【 .articles-top 】
記事全体の上部にある空のボックス。デザイン用の空白です。

例：[.articles]の背景に赤色、[.articles-top]の高さを（見えるように）20px、背景をシアン色に設定

.articles {
background:#FF0000;
}

.articles-top {
height:20px;
background:#00FFFF;
}

【 .articles-bottom 】
記事全体の下部にある空のボックス。デザイン用の空白です。

例：[.articles]の背景に赤色、[.articles-bottom]の高さを（見えるように）20pxに設定し背景をマゼンタ色に設定

.articles {
background:#FF0000;
}

.articles-bottom {
height:20px;
background:#FF00FF;
}

※ 予想される場所と違う、不思議な箇所が変更されてしまいました。

【 .posted 】
記事本文の下のリンク部全体です。

例：[.articles]の背景に赤色、[.posted]の背景に黄色を設定

.articles {
background:#FF0000;
}

.posted {
background:#FFFF00;
}

【 .postDate 】
記事の日付・時間部分の設定です。

例：[.articles]の背景に赤色、[.posted]の背景に黄色、[.postDate]の背景にシアン色を設定

.articles {
background:#FF0000;
}

.posted {
background:#FFFF00;
}

.postDate {
background:#FF00FF;
}

６エントリー
この項は「プレビュー」で表示することが出来ません。
編集しながら「保存」して確認することになります。
よって、見た目がほぼ完成し公開出来るようになってから編集しましょう。

【 .entry 】
「nice!」、「コメント」、「コメントを書く」、「トラックバック」それぞれを囲むブロックの設定です。各エントリーの設定を一括指定できます。

例：[.entry]の背景に赤色を設定

.entry {
background:#FF0000;
}

【 .etnry h4 】
「コメント」、「コメントを書く」、「トラックバック」それぞれのタイトル部の設定です。各エントリーのタイトル設定を一括指定できます。

例：前項の設定と[.entry h4]の背景に緑色を設定

.entry h4 {
background:#00FF00;
}

【 .entry ul 】【 .entry li 】【 .entry dl 】【 .entry dt 】【 .entry dd 】【 .entry form 】
エントリーのリスト、テーブル、入力フォームの設定を一括指定するようです。

例：前項までの設定と上記のスタイル名に青色を設定

.entry ul, .entry li, .entry dl, .entry dt, .entry dd, .entry form {
background:#0000FF;
}

【 #nice 】
nice!の領域全体に関する設定です。

例：[#nice]の背景に黄色を設定

#nice {
background:#FFFF00;
}

【 .nice-buttom 】
未確認です。nice!を押すボタンのことだと思われます。

【 #nice h4 】
nice!のタイトル部の設定です。
タイトルの前にあるちょっとダサイアイコン（失礼！）の設定はここで行われております。

例：前項の設定と[#nice h4]の背景に赤色を設定

#nice h4 {
background:#FF0000;
}

【 #nice form 】
未確認。nice!ボタンの上位設定と思われます。

【 #nice li 】
もらったnice!一覧表示部の設定です。

例：前項までの設定と[#nice li]の背景にマゼンタを設定

#nice li {
background:#FF00FF;
}

【 #comments 】
コメントの領域全体に関する設定です。

例：[#comments]の背景に緑色を設定

#comments {
background:#00FF00;
}

【 .each-comment 】
各コメント全体に関する設定です。

例：前項の設定と[.each-comment]の背景に黄色を設定

.each-comment {
background:#FFFF00;
}

【 .comments-body 】
各コメントの本文全体に関する設定です。

例：前項までの設定と[.comments-body]の背景に赤色を設定

.comments-body {
background:#FF0000;
}

【 .caption 】
各コメントのユーザー名および日付の部分の設定です。

例：前項までの設定と[.caption]の背景にシアンを設定

.caption {
background:#00FFFF;
}

【 .each-comment img 】
各コメントの前に表示されるアイコンの設定です。

例：前項までの設定と[.each-comment img]のpaddingに5px,背景にマゼンタを設定

.each-comment img {
padding:5px;
background:#FF00FF;
}

【 #comments .delete 】
未確認。「チェックしたコメントを消去」ボタンの設定と思われます。

【 #comment-write 】
「コメントを書く」の領域全体の設定です。

例：[#comment-write]の背景にマゼンタを設定

#comment-write {
background:#FF00FF;
}

【 .comment-input 】
コメント入力領域（テキストエリア）に関する設定です。

例：前項までの設定と[.comment-input]の背景に黄色を設定

.comment-input {
background:#FFFF00;
}

【 .comment-button 】
未確認。「コメント送信」ボタンに関する設定と思われます。

【 #comments form 】
未確認。コメント入力領域およびコメント送信ボタンの上位の設定と思われます。

【 #comment-write dt 】【 #comment-write dd 】
コメント入力欄に関する設定です。
　　 　　

#comment-write dt	お名前、コメント、URLなどの左側の列
#comment-write dd	入力欄やボタンなどの右側の列

例：前項までの設定と[#comment-write dt]の背景に青色、[#comment-write dd]の背景に緑色を設定

#comment-write dt {
background:#0000FF;
}

#comment-write dd {
background:#FF00FF;
}

【 #comment-write textarea 】
コメント入力領域（テキストエリア）に関する細かな設定です。

例：前項までの設定と[#comment-write textarea]の背景に赤色を設定

#comment-write textarea {
background:#FF0000;
}

【 #trackback 】【 .trackback-button 】
コメントを入力する領域に関する設定です。
　・#trackback：トラックバック全体
　・.trackback-button：「簡単トラックバック」ボタン

【 #trackback-write p 】【 #trackback-write form 】
未確認。トラックバック入力領域に関する細かな設定と思われます。

【 .each-trackback 】【 .trackback-url input 】
未確認。
　・.each-trackback：各トラックバックの表示の設定と思われます。
　・.trackback-url input：トラックバックのＵＲＬ入力領域の設定と思われます。

【 #related ul 】【 #related li 】
未確認。

ソネブロの構造解析（その３）に続きます。

【もくじ】へ

コメント 2

文字間を調節する記述をどこにしたらよいかわかりませんでしたが、
こちらの記事で解決できました＾＾
わかりやすい解説で助かります＼(^o^)／
by nana_hyr (2011-12-09 18:05) 

＊ nana_hyrさん ＊

ハジメマシテ♪
お役に立てたようで、良かったです。(^^)
機会がありましたら、また参考にしてくださいね。
今後ともよろしくお願いします♪
by かほりん (2011-12-09 19:33)