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

テーマ性の高いブログの場合は、テーマに合わせてデザインするということになりますが、ワタクシのブログのようにノンテーマ的な場合は、自由すぎて考えづらいところがありますｗ
テーマやデザインの好みは色々ありますので一概には「コレ」とは言えませんので、「こんな感じがイイナァ」というようなデザインのホームページを見つけて参考にすると良いカモ？

さて、ブログのデザインがイメージできたところで実際に具現化していくわけですが、ブログっぽい（らしい）レイアウトというのがありまして、下図のような感じであります。


それぞれのスペースに大小があったりメニュー（プラグイン）部が右だったり左だったり両方にあったりするパターンもありますが、概ねこのような感じの場合が多いです。
忍者ブログの場合も「新規テンプレート作成」を行った場合、図のようなレイアウトとなります。（フッタが微妙に違いますが･･･）

前に使っていたテンプレートのデザインに少々手を入れたモノをサンプルに以降の手順等を説明していこうかと思います。（テンプレート使用時は記事の両隣にプラグインのスペースを配した３カラムレイアウト）
※デザイン的にどーとかっていうのはナシの方向でｗ



サンプルのような各ブロック、スペースがハッキリしているものはHTMLのコーディングが比較的単純になるので作りやすいかと思います。慣れないうちはこんな感じでブロック毎に画像等を入れてデザインしていくと良いかもしれません。

IEのウィンドは実際にブラウザで表示されたらどんな感じになるんだろう？という目安で
その中にデザインを作りこんでいます。今回は使用率の高いXGAサイズ(1024×768pixel)のフルスクリーンのモノを使って最小スクリーンSVGAサイズ(800×600pixel）を想定して、メインとなるスペースの幅は760pixelになっています。
780pixelで作ってたつもりだったんですが･･･おかしいな(´･ω･`)？

今回のサンプルでは特に意識はしていませんが、アフリエイトをする場合に広告スペースを設けると思うので、参考までに割とよく見られるサイズをメモっておきます。
[ヨコ]

• ビッグバナー：728×90
• バナー：468×60
• ハーフバナー：234×60

[タテ]

• スカイスクレイパー：120×600
• ワイドスカイスクレイパー：160×600
• 縦バナー：120×240

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