カスタマイズ(CSS)

次は、デザインを大きく左右するスタイルシート(CSS)の部分です。

一番上のほうのものは、ブログ全体に対してのスタイルシートです。

body, h1, h2, h3, form { margin: 0; padding: 0 }
body {
font-family: Verdana, sans-serif;　　フォントのタイプ
background: url(http://blog14.fc2.com/template/arrow_o/image/bg.gif)
repeat-y top center #6D7966;　　ブログ壁紙の部分
font-size: 83%;　　フォントのサイズ
color:#4C4C4C;　　フォントカラー
text-align: center;　　テキストの表示位置
}

a:link { color:#E57300; text-decoration: none; }　　通常のリンクの色
a:active { color: #999; text-decoration: none }　　アクティブリンクの色
a:visited { color: #808080; text-decoration: none }　　訪問済みリンクの色
a:hover { color: #CC7D3D; text-decoration: underline; }　　マウスカーソルが 上に乗ったときの色


/* 全体囲み */
#all { width: 720px;　　ページ全体の横幅
margin: 0 auto;
text-align: left;　　テキストの表示位置
background: #FFF;　　バックグラウンドカラー


H1タグは、サイトタイトルに部分に適応されています。
H1のスタイルシートを変えると、サイトタイトル部分が変化します。

H2タグは、サイト説明文に適応されています。
H2のスタイルシートを変えると、サイト説明文部分が変化します。

H3タグは、記事タイトル、サイドメニュー等に適応されています。
記事タイトル、サイドメニュー等は別々に指定できます。


メニュー部分の幅を変える場合

/* メニュー表示部分 */
#right {
margin: 5px 0;
width: 225px;　ここを変える。
float: right;
overflow: hidden;
background: #FFF;


記事部分の幅を変える場合

/* 記事表示部分 */
#left {
width: 485px;　ここを変える。
float: left;
overflow: hidden;
margin: 5px 10px 0 0;
background: #FFF;

＊メニューの幅＋記事の幅＝ページ全体の横幅にならないと
テンプレートの形が崩れます。


トップページへ