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

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

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

■ 完成サンプル

	ブログカスタマイズ講座～デザイン編 ・画像を利用した枠を作成するには ・画像を利用した枠の作成（テーブルヴァージョン） ・画像を利用した枠の作成（CSSヴァージョン） 　MTカスタマイズ講座～デザイン編 ・画像で作成した枠で囲む（テーブルヴァージョン） ・画像で作成した枠で囲む（CSSヴァージョン）

カスタマイズ方法（MovableType編）

では、エントリー部分を画像で作成した枠で囲む方法を例にして説明します。

1. 画像枠を作成する
まず、画像を使用して枠を作成します。
作成方法は、画像を利用した枠の作成（CSSヴァージョン）を参考にしてください。

２. 画像をアップロードする
作成した画像をサーバーにアップロードします。
画像のアップロード方法は、ファイル、画像のアップロード方法を参考にしてください。

３. CSS（スタイルシート）を編集する
次に、「スタイルシート」を編集します。下記の記述を追加します。

＜スタイルシート＞

.Box{ width:xxpx; background:url(画像（中央）URL) #ffffff repeat-y; } .BoxTop{ background:url(画像（上辺）URL) top left no-repeat; margin-top:0px; height:xxpx; } .BoxBottom{ background:url(画像（下辺）URL) bottom left no-repeat; margin-bottom:0px; height:xxpx; }

横幅、画像ＵＲＬ、画像の高さは、使用する画像にあわせて、記入してください。

4. HTMLを編集する
次に、「メインページ」「カテゴリー・アーカイブ」「個別エントリーアーカイブ」「日付アーカイブ」を編集します。

編集方法は、各テンプレートの　<MTEntries>～</MTEntries>で囲まれた部分（省略部分）を、挟むように記述します。
赤い文字が追加する記述です。

＜メインページ、カテゴリ、個別エントリー、日付アーカイブ＞

<MTEntries> <div class="Box"> <div class="BoxTop"></div> 　（省略） <div class="BoxBottom"></div> </div> <br> </MTEntries>

編集後は保存して再構築すると完了です。

テーブルヴァージョンと比べると、かなり記述が少なくて、すっきりしていますね。

ブログランキングに参加中です。応援お願いします。