トップページ > MTカスタマイズ講座 > 解析編 > MovableTypeのスタイルシート解析

MovableTypeのスタイルシート解析

2005年7月21日

MTカスタマイズ講座 > 解析編

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 の部分

以上、MovableTypeのスタイルシートについて説明しました。


MovableType 解析編 - 講義一覧

MovableType 解析編の講義一覧です。

　解析編
・MovableTypeのテンプレート概要
・MovableTypeの構造図
・MovableTyoeのスタイルシート解析
・MovableTypeのメインページ解析
・MovableTypeのカテゴリー・アーカイブ解析
・MovableTypeの個別エントリーアーカイブ解析
・MovableTypeの日付アーカイブ解析

講義を受講されたら、1クリックの応援お願いします。人気ブログランキング

パーマリンク | 投稿者 りっち | 2005年7月21日 01:24 | del.icio.usに追加 | livedoorクリップに追加
はてなブックマーク はてなブックマークに追加 はてなブックマーク件数 | Yahoo!ブックマークに登録 Yahooブックマークに登録


関連記事


トラックバック

このエントリーのトラックバックURL:

コメント

fJ*cR|Ih, jj.ex-navi.biz, 熟女股間に中出しドロリ, http://jj.ex-navi.biz/nakadashi/123.html

投稿者 熟女股間に中出しドロリ : 2011年10月 4日 14:40

あなたのサイトには、連絡先のページを持っていますか？私はあなたに電子メールを送信したいのですが、それを見つける問題を抱えしかしだ。私はあなたが聞くことに興味を持つかもしれないあなたのブログのためにいくつかのアイデアを持っている。いずれにせよ、偉大なウェブサイトと私はそれが時間の経過とともに改善することを楽しみにしています。

投稿者 ontario payday loans : 2012年1月12日 09:54

そこにちょっと、私はあなたのウェブサイトは、ブラウザの互換性の問題があるかもしれないと思う。私はSafariであなたのブログサイトを見ると、それは正常に見えるが、Internet Explorerで開くときに、それはいくつかオーバーラップしています。私はちょうどあなたに素早く頭を与えたいと思った！他の、その、素晴らしいブログ！

投稿者 search engine optimization vancouver : 2012年1月13日 07:29

コメントしてください




保存しますか?

(書式を変更するような一部のHTMLタグを使うことができます)

メニュー

ブログ作成講座

ブログ作成講座
只今、講義中！お静かに＾＾
基礎知識編
・ブログとは
・コメントとは
・トラックバックとは
・RSSとは
・Pingとは
開設編
・ブログの選び方
・無料ブログ比較
・MovableType設置方法
・タイトルの決め方
・レイアウトの決め方
・魅力的な記事の書き方
運営編
・アフィリエイト登録
・アクセスアップ方法
・アクセス解析の設置
・カウンタの設置
・掲示板の設置
・ランキングの参加効果

ブログ別！作成講座

ブログカスタマイズ講座

ブログアフィリエイト講座

最新ニュース

コミュニティー

リンク


最近のエントリー

カウンター


 RSSリーダーで購読する


アクセス解析