HOME

共通の設定

すべてのページに共通する部分の分析です。


メインページ	カテゴリーアーカイブ

日付アーカイブ	個別アーカイブ

CSS

■bodyタグ　ブラウザに表示される部分全部

body{ <body>…</body>に適用
margin: 0px 0px 20px 0px;ブラウザ枠との間隔
background-color: #8FABBE;背景色を指定（■）
text-align: center;テキストの水平位置（中心に寄せる）
}

margin: 0px 0px 20px 0px;
数字はブラウザのウインドウ枠との間隔となります。
左右の数字は0pxになっているのに余白があるように見えますが、左右と下はブラウザの大きさによって変わってきます。図ではbodyが700pxになっていますが、ブラウザの大きさが800pxだった場合100px分の余白ができるため左右それぞれ50pxずつ割り振られることになります。これが0pxでも左右に余白ができる訳です。

■hxタグ　見出し

h1, h2, h3{ <h1>…</h1>や<h2>…</h2>や<h3>…</h3>に適用
margin: 0px;他のボックスとの間隔
padding: 0px;ボックスと要素の間隔
font-weight: normal;フォントの太さ（普通）
}

※細かな設定－フォントの種類や大きさなどはボックス単位で決めていますのでありません。全ページに共通する部分だけです。

■aタグ　リンク

a{ リンクの部分に設定
text-decoration: underline;テキストの装飾（アンダーライン : a ）
}

a:link{ リンク:まだ訪れていないリンクのスタイル
color: #8FABBE;テキストの色（■）
}

a:visited{ リンク:すでに訪れたリンクのスタイル
color: #8FABBE;テキストの色（■）
}

a:active{ リンク:クリックした際のスタイル
color: #8FABBE;テキストの色（■）
}

a:hover{ リンク:カーソルが重なったときのスタイル
color: #006699;テキストの色（■）
}

ボディー部分

ブラウザに表示されるところで余白を除いた部分を決定しています。ここでサイズを決めています。

■ソース
<div id="container">

…

</div>

■CSS
#container {
line-height: 140%;行間を設定（140%）
margin-right: auto;右の余白（自動設定）
margin-left: auto;左の余白（自動設定）
text-align: left;テキストの水平位置（左寄せ）
padding: 0px;ボックスと要素の間隔（なし）
width: 700px;ボックス横幅（700px）
background-color: #FFFFFF;背景色（白）
border: 1px solid #FFFFFF;ボックスの枠線（線の太さ-1px、線種-実線、色-白）
}

ヘッダー部分

ブログの顔にあたる部分。いわばブログの第一印象を決める大事な所です。
ブログのタイトルやブログの説明などが入ります。
カスタマイズしやすい部分でもあります。

■ソース
<div id="banner">
<h1>←1
<a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$>タイトルが入ります
</a>
</h1>
<h2>←2
<$MTBlogDescription$>説明が入ります
</h2>
</div>

■CSS
#banner {
font-family: Verdana, Arial, sans-serif;フォントの指定
color: #FFFFFF;テキストの色（白）
background-color: #999999;バックの色（■）
text-align: left;テキストの水平位置（左寄せ）
padding: 15px;ボックスと要素の間隔（15px）
border-bottom: 1px solid #FFFFFF;ボックスの下枠線（線の太さ-1px、線種-実線、色-白）
height: 39px;高さ
}

#banner a {<a>…</a>に適用
color: #FFFFFF;テキストの色（白）
text-decoration: none;テキストの装飾（なし）※リンク部分は通常下線がありますがこの場合は無くなります。
}

#banner h1 {<h1>…</h1>に適用
font-size: xx-large;フォントのサイズ（<font size="7">相当）
}←1

#banner h2 {<h2>…</h2>に適用
font-size: small;フォントのサイズ（<font size="3">相当）
}←2