MovableTypeオリジナルテンプレートを作ろう

ブログのタイトルや説明文をなどを表示するヘッダー部分をデザインしてみましょう。
背景に色をつけたり、枠線で囲ったり、背景画像を使って、見栄えの良いブログを作ってみましょう。

「1カラム型テンプレート：スタイルシートの作り方」で使ったスタイルシートを例にして説明しますね。

まずは、おさらいからです。
1カラム型テンプレートのスタイルシートでは、ヘッダー部分を以下のように定義しました。

これに、背景色の定義を追加すると以下のようになります。

背景色を指定するには、background-colorという属性を使います。
上の例では、背景色に#00FFFF（Aqua）を指定しています。

実際に表示すると以下のような感じになります。

次に、ヘッダー部分全体を枠線で囲ってみましょう。

枠線は、borderという属性を使います。
border-topが上線、border-bottomが下線、border-leftが左線、border-rightが右線です。

線の種類は、dotted（点線）、dashed（粗い点線）、solid（実線）、double（二重線）、groove（谷線）、ridge（山線）です。

線の太さはpx(ピクセル）で指定します。

線の色は、カラーコードで指定します。

記述方法は、「border-top:線の太さ 線の種類 線の色;」という具合です。

ヘッダー部分を実線で囲んでみましょう。

上の例を実際に表示すると以下のようになります。

★ワンポイントアドバイス

背景色よりちょっと濃い色やちょっと薄い色を使って、上線と左線のみ表示させたり、下線と右線のみ表示させると浮いてるように見えますよ。

次に、ヘッダー部分の背景に画像を使ってみましょう。

画像を使うには、background-colorの代わりに、background-imageという属性を使います。

記述方法は、「background-image:url(画像ファイルのパス);」という具合です。

また、画像を繰り返して表示させるには、background-repeatという属性を使います。
repeat-xで横方向、repeat-yで縦方向に繰り返し表示し、repeatは、横と縦の両方向繰り返します。
なお、繰り返して表示させない場合は、no-repeatを指定します。

では、具体的にヘッダー部分にを使ってみましょう。

これを表示すると、以下のような感じになります。