2005年9月 9日

画像を利用した枠の作成（CSSヴァージョン）

ブログカスタマイズ講座 > デザイン編

今回は、「画像を利用した枠の作成方法（CSSヴァージョン）」について説明します。

画像を利用すると、下の完成サンプルのように、角が丸い枠で囲むことができます。今回は、CSSを利用して作成する方法を説明します。

■ 完成サンプル

　ブログカスタマイズ講座～デザイン編

・画像を利用した枠を作成するには
・画像を利用した枠の作成（テーブルヴァージョン）
・画像を利用した枠の作成（CSSヴァージョン）

　MTカスタマイズ講座～デザイン編

・画像で作成した枠で囲む（テーブルヴァージョン）
・画像で作成した枠で囲む（CSSヴァージョン）

画像を利用した枠の作成方法（CSS ver.）

1．枠の画像を作成する
まず、描画ソフトなどを使って枠を作成します。

2．画像を分割する
作成した画像枠を下記のように3分割します。

3．CSSを編集する
スタイルシートで、上記で作成した画像を背景に指定します。

＜記述例＞

.boxtop{
background:url(画像URL) top left no-repeat;
margin-top:0px;
height:xxpx;
}

.boxmiddle{
width:xxxpx;
background:url(画像URL) #ffcc99 repeat-y;
}

.boxbottom{
background:url(画像URL) bottom left no-repeat;
margin-bottom:0px;
height:xxpx;
}

画像URL、横幅、高さは、使用する画像に応じて、書き換えてください。

4．HTMLを編集する
HTMLファイルに、下記のような記述を追加します。

＜記述例＞

中央部分にテキスト等を書き込むと完成です。