ススメ 【忍者ブログ】テンプレートの作成 その３

テンプレートのデザインが決まったらHTMLにコーディングするワケですが、デザインをHTML化する場合、テーブルタグを主体にコーディングする方法とスタイルシート主体にする方法の大別して2種類の手法があります。ワタクシの場合は基本的に後者のスタイルシートを使ってデザインをHTML化していますので、説明等はスタイルシートを主体としたものになります。

では、コーディングを始める前に･･･
いきなりエディタでタグを書き始めると大変ですが、予めどのように「組む」かという々考えておくとコーディングが進めやすいのでオススメです。
具体的には、下図のような感じでデザインを構成するブロックを考えます。
（シンプルなレイアウトなので構成もシンプルになりますｗ）


bodyタグ内に一つの大枠を「MAIN」として上から順に「HEADER」「BODY」「FOOTER」といった具合にブロックを作り「BODY」内に「PLUGIN」「ENTRY」という感じです。
これらのブロックをHTMLでdivタグを使ってコーディングし、スタイルシートでコントロールしてレイアウトしていきます。

HTMLはこんな感じ※bodyタグ内

<div id="MainBlock">
	<div id="HeaderBlock">
		～ヘッダの内容～
	</div>
	<div id="BodyBlock">
		<div id="EntryBlock">
			～エントリーの内容～
		</div>
		<div id="PluginBlock">
			～プラグインの内容～
		</div>
	</div>
	<div id="FooterBlock">
		～フッターの内容～
	</div>
</div>

大まかなブロックを決めたところで、デザインした画像をどう扱っていくか考えます。
HTMLで画像を扱う場合はimgタグで文章中に表示したり（インラインイメージ）、各ブロックの背景として表示させる事ができるのですが、作ったデザインのイメージの要素をどちらで表示させるかを決めておきます。

ヘッダブロックでは「SUSUME::342blog」のロゴにリンクを付けておきたいのでインラインイメージとしその他部分を背景画像として扱うことにします。
ボディブロックは、プラグインとエントリブロックはボーダーと背景色で表現し、その背景はタテの繰り返し背景、ブロックの上部はドロップシャドウがあるのでその部分をインラインイメージで･･･。
フッターブロックはブロックサイズそのまま一枚の画像を背景画像にします。

アトは決めた画像を作るor切り出すという作業になります。
とりあえずサンプルでは、こんな感じになりました。
全体の背景
HeaderBlockの背景
BodyBlockの背景
FooterBlockの背景
HeaderBlockに使用するロゴ
BodyBlock上部の画像

追記）記事タイトルの背景を忘れておりました･･･。
BodyBlock記事タイトル背景

使用するサイズの画像ですので、とりあえず試したい方はリンク先の画像をDLしてください。

「【忍者ブログ】テンプレートの作成 その１」へ
「【忍者ブログ】テンプレートの作成 その２」へ
「【忍者ブログ】テンプレートの作成 その４」へ