テンプレートについて

忍者ブログ用のテンプレートです。
共有テンプレートに登録していますので、ぜひつかってください。

あなたのブログ、
WUXGA(1920x1200)などの大きい画面で見たことありますか？
VGA(640x480)などの小さい画面で見たことありますか？
固定幅のブログテンプレートを使用していると、
大きい画面で見たら、左右又はどちらかになにも置かれてない空間ができ、
小さい画面で見たら、どこかの領域がウインドウに収まらずにはみ出したり、下に落ちたり、複数の領域が重なってしまいます。
場合によっては閲覧不可能であったり、閲覧可能でも閲覧者を不快にさせてしまうかもしれません。

大きい画面や小さい画面を用意して確認することは難しいと思いますが、
ウインドウサイズを大きくしたり小さくしてブログを表示してみると、固定幅のテンプレートか可変幅のテンプレートかわかります。

ここで使用しているテンプレートは、
指定しないとバランスが悪くなる可能性があるため、左右のサイドバーのwidth（横幅）
忍者ブログのテンプレートのプレビューがプラグインを大量に入れてくるため、上下領域のmax-height（最大の縦幅）
を指定していますが、それ以外の領域サイズは可変です。
横幅640pxもあれば閲覧不可能なほど大きく崩れることは無いと思いますし、（640pxじゃ見にくいと思いますが）
大きい画面で閲覧しても全領域を有効に使えます。

また、領域サイズの固定だけでなく、フォントのサイズを固定（px値などで指定）しているテンプレートもありますが、
フォントサイズを固定すると、大きい画面で閲覧する人や視力の悪い人には見づらかったり見ることが不可能なこともあるかもしれません。
ここで使用しているテンプレートはフォントサイズの指定には相対サイズ以外使用していません。


ブラウザは
Firefox 3.0
MSIE 7.0
Google Chrome 0.4
Opera 9.6
にて確認しています。
確認できませんが、
SafariはWebKitなんでGoogle Chromeと同じように表示されると思うんで問題ないはずです。
一部テンプレートではposition:fixedを使用しているため、MSIE 7未満は他のブラウザと表示が変わりますが、
MSIE 7未満でも閲覧に支障がないようにしています。

幅可変2カラム（白）

プレビュー

幅可変の２カラムレイアウトのテンプレートです。
白系の色です。

プラグインカテゴリーについて
プラグインカテゴリー１：左サイドバー
プラグインカテゴリー２：中央上部
プラグインカテゴリー３：記事下
プラグインカテゴリー４：右上
プラグインカテゴリー５：左下
です。

左サイドバーの横幅は336pxとなっています。（左右マージン10px）
右サイドバーは、AdSenseのレクタングル（大）サイズ（336x280）がフィットするようにするために336pxとなっています。
左右マージンが10pxあるので、フィットさせるには
<div style="margin:0px -10px;">プラグインのタグ</div>
のように内部に-10pxでmargin指定するとフィットします。（マージンにマイナス値を指定する場合はIE６に気をつけてください。）

全テンプレートを修正し、更新申請しました。

幅可変３カラム - 001
幅可変３カラム - 002
幅可変３カラム - 003
幅可変３カラム - 004
を修正し、更新申請しました。
審査を通ったら新しいものが共有テンプレートに公開されます。

-名称の変更
わかりにくいんで、
幅可変３カラム （白）
幅可変３カラム （灰）
幅可変３カラム （桃）
幅可変３カラム （青）
と、色が分かるようにしました。

-ナビゲートリンクの表示位置の変更
ナビゲートリンク（次のページとかのリンク）を、今までは上に表示していましたが、下に表示するようにしました。
特にカテゴリーページですが、次のページを見る際は、
通常、ページの内容をすべて見た後で次のページにいこうすると思います。
ですので、下に次のページへのリンクがあった方がいいと考えました。
また、ブログの場合は上についていてもいいとおもいますが、
サイトの構造によっては上にあると見栄えが悪くなると考えました。

-コメントフォームを初期状態で非表示に
記事ページを開いた際、
コメント入力フォームがコメントの下に表示されますが、
これを初期状態で非表示にし、
「コメントを書く」リンクをクリックした場合に表示するようにしました。
サイトの構造によっては、コメントフォームが表示されると見栄えが悪くなると考え、変更しました。

-右サイドバーの横幅を変更
左右サイドバーの横幅は200pxでしたが、
右サイドバーのみ300pxにしました。
AdSenseのレクタングル（中）サイズが300x250ですが、
同等のサイズのコンテンツを右サイドバーに設置できるようにしました。
右サイドバーは300pxですが、内部にプラグインを設置する場合、
横marginが3px確保されます。
したがいまして、
フリーエリアプラグインで300pxのコンテンツを設置する場合は
<div style="margin:0px -3px">コンテンツ</div>
のように<div>タグで囲んで、横マージンに-3pxを指定するときっちり収まります。
左右のサイドバーの合計幅が500pxですので、横サイズ640pxのブラウザでの閲覧は厳しくなったと思います。