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

前回作った背景画像やインラインイメージを使ってまずは大枠となるブロックをコーディングします。HTMLは前回載せましたソースをベースに各タグ（段落タグなど）と全体の状態を見る為に仮の文章を挿入していきます。

デザイン、レイアウトを確認する場合に注意しなければいけないのが、トップページと記事ページの表示内容の違いを把握しなければいけません。（後々の忍者ブログ独自タグを挿入する場合にも重要）
違いを簡単に説明すると、トップページでは記事本文を複数表示（デフォルトでは5件だったかな？）し、記事ページでは１件の記事本文と追記記事、コメント、トラックバックを表示します。（カテゴリ表示やカレンダーでの表示はトップページと同じくくりになります。）

まずは、大まかなブロックをスタイルシートでコントロールしてレイアウトしようと思いますので比較的HTMLが短いトップページから進めていきます。

HTMLはこんな感じ･･･（bodyタグ内）

<div id="MainBlock">
  <div id="HeaderBlock">
    <p><a href="#">ブログのタイトル</a></p>
    <p>ブログの説明文ブログの説明文ブログの説明文ブログの説明文</p>
    <p><a href="#"><img src="img/smp_LOGO.gif" alt="342blog" 
width="246" height="31" /></a></p>
  </div>
  <div id="BodyBlock">
    <p><img src="img/smp_bodyHEAD.gif" alt="" width="760" height="5" /></p>
    <div id="EntryBlock">
      <!--繰り返す部分 始め-->
      <div class="EntryInnerBlock">
        <p><a href="#">記事のタイトル</a></p>
        <div class="EntryText">
          <p>記事の本文記事の本文 ～中略～ 記事の本文記事の本文。</p>
          <p><a href="#">[続きを読む]</a></p>
          <div class="EntryFooter">
            <a href="#">2006/01/10 (Tue)</a> 
            <a href="#">カテゴリ</a> 
            <a href="#">Trackback(2)</a> <a href="#">Comment(2)</a>
          </div>
        </div>
      </div>
      <!--繰り返す部分 終わり-->
    </div>
    <div id="PluginBlock">
      <div class="PluginInnerBlock">
        ～プラグインの内容～
      </div>
    </div>
    <p class="blogNavi">[next][1][2][3][4][prev]</p>
  </div>
  <div id="FooterBlock">
    <p><a href="#">忍者ブログCM</a>　<a href="#">忍者ブログCM</a></p>
  </div>
</div>

ソースが長くなってしまうので、記事の繰り返す部分は１つにしていますけども、実際は５つ繰り返して作っておく事で、より実際に近い感じで確認できるようになります。（各ブログの設定に合わせると良いかと）
また、同じ理由でプラグイン部分は省略しています。

上のソースをブラウザで確認すると･･･
文字とイメージが並んでいるだけのものになります。

で、ここからがスタイルシートで各ブロックをコントロールしてレイアウトしていくという寸法ｗ
スタイルシートの記述方法には、「外部リンク」「埋め込み」「インライン」と３つ方法がありますが、ここでは「外部リンク」でスタイルシートを記述していきます。

各ブロックは次のようにコントロールしていきます。
MainBlock：幅760pixelでウインドウの中央寄せ（センタリング）
HeaderBlock：高さ100
EntryBlock：幅601pixelMainBlock内右寄せ
PluginBlock：幅142pixelMainBlock内左寄せ
FooterBlock：高さ61pixel
とこんな感じで大まかなスタイルシートはこんな感じになります。

* {
	margin: 0px;
	padding: 0px;
}
body {
	background-image: url(img/bg_hairline.gif);
}
#MainBlock {
	width: 760px;
	margin-right: auto;
	margin-left: auto;
}
#HeaderBlock {
	height: 100px;
	background-image: url(img/smp_headerBG.gif);
	background-repeat: no-repeat;
}
#BodyBlock {
	background-image: url(img/smp_bodyBG.gif);
	background-repeat: repeat-y;
}
#BodyBlock .blogNavi {
	clear: both;
	text-align: center;
}
#EntryBlock {
	width: 601px;
	float: right;
}
#PluginBlock {
	float: left;
	width: 142px;
}
#FooterBlock {
	clear: both;
	height: 61px;
	background-image: url(img/smp_footerBG.gif);
}

各ブロック内の中はグダグダですが、大きなブロックのレイアウトはできていると思います。
※画像ファイルのパスは環境に合わせてって事で･･･一応フラットでも問題ないと思いますが、後々ブログ用にアップしたときにパスを一気に置換する時便利なので何かしらディレクトリ内に収めておくと良いかもしれません。

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