ページ全体 |
セレクタ |
内容 |
例 |
body |
ページ全体(背景、余白、文字など) |
背景色を黒(#000000)に変更します。
body {
background:#000000;
} |
a |
ページ全体のリンク
未訪問、訪問済み、アクティブ時、マウスオーバー時をまとめて指定します。 |
アンダーラインを表示し、リンク色を赤(#ff0000)に変更します。
a {
text-decoration:underline;
color:#ff0000;
} |
a:link |
ページ全体のリンク(未訪問) |
未訪問リンク色を赤(#ff0000)に変更します。
a:link {
color:#ff0000;
} |
a:visited |
ページ全体のリンク(訪問済み) |
訪問済みリンク色を青(#0000ff)に変更します。
a:link {
color:#0000ff;
} |
a:active |
ページ全体のリンク(アクティブ時) |
アクティブ時のリンク色を緑(#00ff00)に変更します。
a:link {
color:#00ff00;
} |
a:hover |
ページ全体のリンク(マウスオーバー時) |
未訪問リンク色を黄(#ffff00)に変更します。
a:link {
color:#ffff00;
} |
#container |
ヘッダー+バナー+サイド+メイン(フッター以外) |
背景色をグレー(#eeeeee)に変更します。
#container {
width :770px;
background:#eeeeee;
} |
ヘッダー |
セレクタ |
内容 |
例 |
#header |
ヘッダーリンク部分全体 |
|
#memberMenu |
ログイン時に表示されるヘッダーリンク部分(●●さん 管理ページ 新規作成 自分のブログ) |
|
#globalMenu |
常時表示されるヘッダーリンク部分(ブログトップ 使い方 Q&A) |
|
.menuDecoration |
ログイン時に表示される個々のリンク |
|
ブログタイトルバナー |
セレクタ |
内容 |
例 |
#banner |
ブログタイトルバナー全体 |
背景画像を挿入して高さを変更します。
#banner {
background:url(/_images/blog/任意のファイル名) no-repeat;
height:200px;
}
|
#banner h1 |
ブログタイトル |
フォントサイズとフォント種類を変更します。
#banner h1 {
font-size:24px;
font-family:Arial,sans-serif;
} |
#lead |
ブログ説明文 |
フォント色をオレンジ(#ff6600)に変更します。
#lead {
color:#ff6600;
} |
コンテンツ |
セレクタ |
内容 |
例 |
#content |
サイドカラム+メインカラム |
|
#main |
メインカラム全体 |
|
.archive-title |
上部ページングリンク全体 |
|
.archive-bottom |
下部ページングリンク全体 |
|
.archive-name |
ページングリンク |
|
.previousLink |
「前へ」のリンク |
|
.nextLink |
「次へ」のリンク |
|
.archive-links |
「ブログトップへ」のリンク |
|
記事 |
セレクタ |
内容 |
例 |
.articles |
記事全体 |
黒(#000000)の枠線で囲みます。
.articles {
border:1px solid #000000;
overflow:hidden;
} |
.articles-title |
記事タイトル |
背景色を紺(#003399)にして文字色を白(#ffffff)に変更します。
.articles-title {
background:#003399;
color:#ffffff;
} |
.articles-body |
記事本文 |
文字色をグレー(#999999)に変更します。
.articles-body {
color:#999999;
} |
.articles-top |
記事上の空divタグ(デザイン用) |
|
.articles-bottom |
記事下の空divタグ(デザイン用) |
|
.posted |
記事下部リンク部分 |
|
.postDate |
記事下部リンクの日付表示 |
|
エントリー |
セレクタ |
内容 |
例 |
.entry |
「nice!」、「コメント」、「コメントを書く」、それぞれを囲むdivタグ
※各エントリーのCSSを一括指定できます。 |
|
.etnry h4 |
「nice!」、「コメント」、「コメントを書く」、それぞれをのタイトル
※各エントリータイトルのCSSを一括指定できます。 |
|
#nice |
nice!全体 |
|
.nice-buttom |
nice!のボタン |
|
#comments |
コメント全体 |
|
.each-comment |
各コメント |
|
.comments-body |
各コメントのテキスト部分 |
|
.caption |
コメントのユーザー名と日付部分 |
|
#comment-write |
コメントを書く全体 |
|
.comment-input |
コメント入力ボックス |
|
.comment-button |
コメント送信ボタン |
|
サイド |
セレクタ |
内容 |
例 |
#side-a |
サイド左全体 |
|
#side-b |
サイド右全体 |
|
.sidebar |
各サイドバーを囲むdivタグ
※各サイドバーのCSSを一括指定できます。 |
黒(#000000)の枠線で囲みます。
.sidebar {
border:1px solid #000000;
} |
.sidebar-title |
各サイドバータイトル
※各サイドバータイトルのCSSを一括指定できます。 |
黒(#000000)の下線を表示します。
.sidebar-title {
border-bottom:1px solid #000000;
} |
.sidebar-body |
各サイドバーのボディ部分
※各サイドバーボディのCSSを一括指定できます。 |
文字色をグレー(#999999)に変更します。
.sidebar-body {
color:#999999;
} |
.sidebar-end |
各サイドバー下部の空divタグ(デザイン用) |
|
.new |
サイドの「NEW」マーク |
|
#profile |
プロフィール全体 |
|
.profile-img |
プロフィールイメージ |
|
.profile-status |
プロフィールステータス部分 |
|
.nice |
プロフィールステータス部分のnice!アイコン |
|
.profileLink |
プロフィールステータス部分のプロフィールリンク |
|
#calendar |
カレンダー全体 |
|
.carendar-date |
カレンダー上部の年月部分 |
|
.preMonth |
<<(前の月へ)リンク |
|
.nextMonth |
>>(次の月へ)リンク |
|
.thisMonth |
年月リンク |
|
.sun |
日 |
|
.mon |
月 |
|
.tue |
火 |
|
.web |
水 |
|
.thu |
木 |
|
.fri |
金 |
|
.sat |
土 |
|
.link |
カレンダーリンク部分 |
|
#category |
カテゴリー全体 |
|
#latestEntry |
最新記事一覧全体 |
|
#latestComment |
最近のコメント全体 |
|
#commentedEntry |
●●さんがコメントした記事全体 |
|
#favoriteEntry |
●●さんがnice!と思った記事全体 |
|
#favoredMember |
●●さんの記事をnice!と思った人全体 |
|
#subscribedRSS |
読んでいるブログ(RSS)全体 |
|
#search |
記事検索全体 |
|
.search-tbox |
記事検索の入力ボックス |
|
.search-button |
記事検索の検索ボタン |
|
#rssRegist |
読者になる(RSSに登録)全体 |
|
フッター |
セレクタ |
内容 |
例 |
#footer |
フッター全体 |
|
.copyright |
「Powered by SSブログ」テキスト |
|
2カラム左 |
セレクタ |
内容 |
例 |
.columnL |
レイアウトに2カラム左を指定したときのページ全体 |
|
2カラム右 |
セレクタ |
内容 |
例 |
.columnR |
レイアウトに2カラム右を指定したときのページ全体 |
|
3カラム |
セレクタ |
内容 |
例 |
.columnW |
レイアウトに3カラムを指定したときのページ全体 |
|