2005年7月21日

MovableTypeのスタイルシート解析

MovableTypeのスタイルシートに記述されている内容を説明します。
記述内容を理解し、各クラスやセレクタなどがブログのどの部分に対応しているのか把握すると、カスタマイズもしやすくなります。
カスタマイズの際には、是非参考にしてくださいね。

＜スタイルシート：MovableType3.17＞

body {
margin: 0px 0px 20px 0px;
background-color: #8FABBE;
text-align: center;
}

a {
text-decoration: underline;
}

a:link {
color: #8FABBE;
}

a:visited {
color: #8FABBE;
}

a:active {
color: #8FABBE;
}

a:hover {
color: #006699;
}

h1, h2, h3 {
margin: 0px;
padding: 0px;
font-weight: normal;
}

#container {

line-height: 140%;
margin-right: auto;
margin-left: auto;
text-align: left;
padding: 0px;
width: 700px;
background-color: #FFFFFF;
border: 1px solid #FFFFFF;
}

#banner {
font-family: Verdana, Arial, sans-serif;
color: #FFFFFF;
background-color: #999999;
text-align: left;
padding: 15px;
border-bottom: 1px solid #FFFFFF;
height: 39px;
}

#banner-img {

display: none;
}

#banner a {

color: #FFFFFF;
text-decoration: none;
}

#banner h1 {

font-size: xx-large;
}

#banner h2 {

font-size: small;
}

#center {
float: left;
width: 500px;
overflow: hidden;
}

.content {
padding: 15px 15px 5px 15px;
background-color: #FFFFFF;
color: #666666;
font-family: Verdana, Arial, sans-serif;
font-size: x-small;
}

#right {
float: left;
width: 200px;
background-color: #FFFFFF;
overflow: hidden;
}

.content p {
color: #666666;
font-family: Verdana, Arial, sans-serif;
font-size: x-small;
font-weight: normal;
line-height: 150%;
text-align: left;
margin-bottom: 10px;
}

.content blockquote {
line-height: 150%;
}

.content li {
line-height: 150%;
}

.content h2 {
color: #666666;
font-family: Verdana, Arial, sans-serif;
font-size: x-small;
text-align: left;
font-weight: bold;
margin-bottom: 10px;
}

.content h3 {
color: #666666;
font-family: Verdana, Arial, sans-serif;
font-size: small;
text-align: left;
font-weight: bold;
margin-bottom: 10px;
}

.content p.posted {
color: #999999;
font-family: Verdana, Arial, sans-serif;
font-size: x-small;
border-top: 1px solid #999999;
text-align: left;
margin-bottom: 25px;
line-height: normal;
padding: 3px;
}

.sidebar {
padding: 15px;
}

#calendar {
line-height: 140%;
color: #666666;
font-family: Verdana, Arial, sans-serif;
font-size: x-small;
padding: 2px;
text-align: center;
margin-bottom: 30px;
}

#calendar table {
padding: 2px;
border-collapse: collapse;
border: 0px;
width: 100%;
}

#calendar caption {
color: #666666;
font-family: Verdana, Arial, sans-serif;
font-size: x-small;
text-align: center;
font-weight: bold;
text-transform: uppercase;
letter-spacing: .3em;
}

#calendar th {
text-align: center;
font-weight: normal;
}

#calendar td {
text-align: center;
}

.sidebar h2 {
color: #666666;
font-family: Verdana, Arial, sans-serif;
font-size: x-small;
text-align: center;
font-weight: bold;
text-transform: uppercase;
letter-spacing: .3em;
}

.sidebar ul {
padding-left: 0px;
margin: 0px;
margin-bottom: 30px;
}

.sidebar ul ul {
margin-bottom: 0px;
}

.sidebar #categories ul {
padding-left: 15px;
}

.sidebar li {
color: #666666;
font-family: Verdana, Arial, sans-serif;
font-size: x-small;
text-align: left;
line-height: 150%;
margin-top: 10px;
list-style-type: none;
}

.sidebar #categories li {
list-style-type: circle;
}

.sidebar img {
border: 3px solid #FFFFFF;
}

.photo {
text-align: left;
margin-bottom: 20px;
}

.link-note {

font-family: Verdana, Arial, sans-serif;
font-size: x-small;
line-height: 150%;
text-align: left;
padding: 2px;
margin-bottom: 15px;
}

#powered {
font-family: Verdana, Arial, sans-serif;
font-size: x-small;
line-height: 150%;
text-align: left;
color: #666666;
margin-top: 50px;
}

#comment-data {
float: left;
width: 180px;
padding-right: 15px;
margin-right: 15px;
text-align: left;
border-right: 1px dotted #BBB;
}

textarea[id="comment-text"] {
width: 80%;
}

.commenter-profile img {
vertical-align: middle;
border-width: 0;
}

【ページ全体の設定】
マージン（上・右・下・左）
背景色
位置揃え（中央揃え）

【全体のリンク設定】
文字の修飾（下線）

【未訪問リンク設定】
文字色

【訪問済みリンク設定】
文字色

【リンク中の設定】
文字色

【カーソル中の設定】
文字色

【見出し文字の設定】
マージン（上下左右）
パディング（上下左右）
文字の太さ（通常）

【コンテンツ表示部（本文とサイドバー）】
行の高さ
右マージン
左マージン
位置揃え（左揃え）
パディング（上下左右）
横幅
背景色
枠（実線）

【バナー部分】
書体

文字色
背景色
位置揃え（左揃え）
パディング（上下左右）
下辺枠（実線）

高さ

【バナー部分のイメージリンクの設定】
レイヤー（非表示）

【バナー部分のリンク文字の設定】
文字色
文字の修飾（なし）

【バナー部分のh1（タイトル）の設定】
文字の大きさ

【バナー部分のh2（説明）の設定】
文字の大きさ

【左側全体の設定】
回り込み（左）
横幅
あふれ部分（非表示）

【エントリー本文設定】
パディング（上右下左）
背景色
文字色
書体

文字の大きさ

【右側全体の設定】
回り込み（左）
横幅
背景色
あふれ部分（非表示）

【エントリー本文設定】
文字色
書体

文字の大きさ
文字の太さ（通常）
行の高さ
位置揃え（左揃え）
下マージン

【引用部分の設定】
行の高さ

【リスト表示の設定】
行の高さ

【h2指定部分の設定】
文字色
書体

文字の大きさ
位置揃え（左揃え）
文字の太さ（通常）
下マージン

【h3指定部分の設定】
文字色
書体

文字の大きさ
位置揃え（左揃え）
文字の太さ（通常）
下マージン

【投稿部分の設定】
文字色
書体

文字の大きさ
上側の枠（実線）

位置揃え（左揃え）
下マージン
行の高さ
パディング（上下左右）

【サイドバーの設定】
パディング（上下左右）

【カレンダー全体】
行の高さ
文字色
書体

文字の大きさ
パディング（上下左右）
位置揃え（中央揃え）
下マージン

【カレンダー本体】
パディング（上下左右）
隣接セルの枠（重ねる）
枠
横幅

【カレンダー（年月）】
文字色
書体

文字の大きさ
位置揃え（中央揃え）
文字の太さ（太い）
大文字・小文字（大文字）
文字間隔

【カレンダー（週）】
文字の大きさ
位置揃え（通常）

【カレンダー（日）】
位置揃え（中央揃え）

【h2指定部分の設定】
文字色
書体

文字の大きさ
位置揃え（中央揃え）
文字の太さ（太い）
大文字・小文字（大文字）
文字間隔

【リスト関連の設定】
左パディング
マージン
下マージン

【リスト関連の設定】
下マージン

【リスト関連の設定】
左パディング

【リスト関連の設定】
文字色
書体

文字の大きさ
位置揃え
行の高さ
上マージン
リストマーク（なし）

【リスト関連の設定】
リストマーク（白丸）

【画像の設定】
枠（実線）

【写真部分の設定】
位置揃え（左揃え）
下マージン

【検索、syndicate部分の設定】
書体

文字の大きさ
行の高さ
位置揃え（左揃え）
パディング（上下左右）
下マージン

【ロゴ部分の設定】
書体

文字の大きさ
行の高さ
位置揃え（左揃え）
文字色
上マージン

【コメント部分の設定】
回り込み（左）
横幅
右パディング
右マージン
位置揃え（左揃え）
右側の枠

【テキストエリアの設定】

横幅

【プロフィール画像の設定】
垂直位置（中央揃え）
枠幅

MovableType クラス・セレクタ一覧表

下記の一覧表では、MovableTypeで使用されている主なクラスやセレクタなどが、ブログのどの箇所に該当するのかまとめています。

＜MovableType3.17 デフォルト・テンプレート＞

クラス・セレクタ	該当箇所
#banner h1	ブログのタイトル
#banner h2	ブログの説明
.content	エントリー全体
.content h2	エントリーの日付
.content h3	エントリーのタイトル
.content p	エントリーの本文
.content p.posted	投稿者・投稿時間・コメントなど
#right	サイドメニュー全体（右側）
.sidebar	サイドメニュー
.sidebar h2	サイドメニューの見出し
.link-note	RSSへのリンクや検索ボックス
#calendar	カレンダー
#powered	powered　by の部分