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

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

構造解析の続き

７サイド

【 #side-a 】【 #side-b 】
サイドバー全体の設定です。
左側と右側のサイドバーを個別に設定することができます。
　　 　　

#side-a	左側のサイドバー
#side-b	右側のサイドバー

例：[#side-a]の背景に赤色を設定

#side-a {
background:#FF0000;
}

【 .sidebar 】
各サイドバー全体の設定です。
各サイドバーのスタイルを一括指定できます。

例：[#side-a]の背景に赤色、[.sidebar]の背景に黄色を設定

#side-a {
background:#FF0000;
}

.sidebar {
background:#FFFF00;
}

＜ページ上部＞

＜ページ下部＞

【 .sidebar-title 】
各サイドバーのタイトル部の設定です。
各サイドバーのタイトル部のスタイルを一括指定できます。

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

.sidebar-title {
background:#FF0000;
}

【 .sidebar-body 】
各サイドバーの内容部分の設定です。
各サイドバーの内容部分のスタイルを一括指定できます。

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

.sidebar-body {
background:#FF0000;
}

【 .sidebar-end 】
各サイドバーの下部の設定です。
デザイン用となります。
尚、「白スキン」には設定がなかったので、このスタイルに高さをつけて表示させてみます。

例：[.sidebar-end]の高さを10px、背景に赤色を設定

.sidebar-end {
height:10px;
background:#FF0000;
}

【 .sidebar-body ul 】【 .sidebar-body li 】【.sidebar-body dl】【.sidebar-body dt】【.sidebar-body dd】【.sidebar-body form】
各サイドバーの内容に関する設定です。
リストやテーブル、フォームについての設定を一括指定できます。

例：[.sidebar-body li]の背景に赤色を設定

.sidebar-body li {
background:#FF0000;
}

【 .new 】
読んでるブログの新着記事に表示される「NEW」の設定です。

例：[.new]の背景に黄色を設定

.new {
background:#FFFF00;
}

【 #profile 】
プロフィール全体の設定です。
プロフィールの領域のみ個別設定が可能です。

例：[#profile]の背景に赤色を設定

#profile {
background:#FF0000;
}

【 .profile-img 】【 .profile-status 】【 .profileLink 】
プロフィール内の個々の設定です。
　　 　　 　　

.profile-img	プロフィール用の画像の設定
.profile-status	ナイス数、記事数などのステータス部の設定
.profileLink	プロフィールリンク（ブログクルーザーのリンク）部の設定

例：[.profile-img]のパディングを5px、背景に黄色を設定、[.profile-status]の背景にシアン色を設定

dt.profile-img {
padding:5px;
background:#FF0000;
}

.profile-status{
background:#00FFFF;
}

【 .nice 】
「nice!」の文字部分の設定です。

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

.nice {
background:#FF0000;
}

【 #calendar 】
カレンダー全体の設定です。

例：[#calendar]の背景に赤色を設定

#calendar {
background:#FF0000;
}

【 .carendar-date 】
カレンダー上部の年月の設定です。

例：[.carendar-date]の背景に赤色を設定

#calendar {
background:#FF0000;
}

【 .preMonth 】【 .nextMonth 】【 .thisMonth 】
カレンダー上部の年月の設定です。
　　 　　 　　

.preMonth	＜＜（前の月へ）リンク
.nextMonth	＞＞（次の月へ）リンク
.thisMonth	年月リンク

例：[.preMonth][.thisMonth]の背景にシアン色、マゼンタ色を設定

.preMonth {
background:#00FFFF;
}

.thisMonth {
background:#FF00FF;
}

【 .sun 】【 .mon 】【 .tue 】【 .wed 】【 .thu 】【 .fri 】【 .sat 】
カレンダーの曜日の設定。
　　 　　 　　 　　 　　 　　 　　

.sun	日	.mon	月
.tue	火	.wed	水
.thu	木	.fri	金
.sat	土

例：[.sun][.sat]の背景に赤色、青色を設定、それ以外の背景に黄色を設定

.sun {
background:#FF0000;
}

.sat {
background:#0000FF;
}

.mon, .tue, .wed, .thu, .fri {
background:#FFFF00;
}

【 .link 】
カレンダーリンク（記事がある日）部分の設定。
実際には[#calendar td.link]と記述しないと思ったように設定できない模様。

例：[#calendar td.link]の背景に赤色を設定

#calendar td.link {
background:#FF0000;
}

【 #calendar td 】
カレンダーリンク以外（記事がない日）の部分の設定です。

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

#calendar td {
background:#FFFF00;
}

【 #category 】【 #latestEntry 】【 #latestComment 】【 #trackBack 】【 #commentedEntry 】【 #favoriteEntry 】【 #favoredMember 】【 #subscribedRSS 】
サイドバーに表示される各項目の個別設定です。
　　 　　 　　 　　 　　 　　 　　 　　

#category	カテゴリ一覧全体
#latestEntry	最新記事一覧全体
#latestComment	最近のコメント全体
#trackBack	最近トラックバックされた記事全体
#commentedEntry	●●さんがコメントした記事全体
#favoriteEntry	●●さんがnice!と思った記事全体
#favoredMember	●●さんの記事をnice!と思った人全体
#subscribedRSS	読んでいるブログ（RSS）全体

例：[#latestEntry]の背景に赤色を設定

#latestEntry {
background:#FF0000;
}

【 #search 】
記事検索全体の設定です。

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

#search {
background:#FFFF00;
}

【 .search-tbox 】【 .search-button 】
記事検索の入力領域および検索ボタンの設定。
　　 　　

.search-tbox	記事検索の入力ボックス
.search-button	記事検索の検索ボタン

例：[.search-tbox]の背景にシアン色を設定

.search-tbox {
background:#00FFFF;
}

【 #rssRegist 】
読者になる（RSSに登録）全体の設定です。

例：[#rssRegist]の背景に赤色を設定（但し、背景画像はそのまま）

#rssRegist {
background: #FF0000 url("/_common/skins/19/images/arrowR_large.gif") no-repeat left center;
}

８フッター

【 #footer 】
フッター（ページ最下部）全体の設定です。

例：[#footer]の背景に赤色を設定

#footer {
background:#FF0000;
}

【 .copyright 】
「Powered by So-net blog」と書かれたテキスト部の設定です。

例：[#footer]の背景に赤色、[.copyright]の背景に黄色を設定

#footer {
background:#FF0000;
}

.copyright {
background:#FFFF00;
}

９カラム

【 .columnL 】【 .columnR 】【 .columnW 】
未確認。
　　 　　 　　

.columnL	レイアウトに2カラム左を指定したときのページ全体
.columnR	レイアウトに2カラム右を指定したときのページ全体
.columnW	レイアウトに3カラム右を指定したときのページ全体

以上。

【もくじ】へ

コメント 2

今日も読むだけで頭がぎゅうぎゅう～（笑）
図書館でタグとかスタイルシートの辞典借りてきてぼちぼち読んでます。
いつか、ここの記事がすらすら～って読めますように。
by miacat (2008-08-08 18:41) 

＊ miacatさん ＊

コツを掴んだらすらすら〜ですよ。
というか、要は言葉が解れば簡単なんですよね。
ちょっと専門用語が入ると難しく思えますが、よく考えれば英語ですから！
でも前のカスタムスキンでmiacatさんはご自分でやられてるから、今更勉強しなくても大丈夫ですって〜！

次から実践編に入る予定ですが、丁寧に書くつもりなのでそっちの方が簡単だと思いますよ。
お楽しみに〜♪
by かほりん (2008-08-08 20:29)