So-net無料ブログ作成
検索選択
使い方トップ » デザイン » CSSセレクタ(タグ)一覧

CSSセレクタ(タグ)一覧

SSブログで設定しているセレクタ(ID、クラス属性)一覧
ページ全体
セレクタ 内容
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カラムを指定したときのページ全体