こんばんは。最近はドラクエ9でレベル上げばかりをしているishidaです。
以前、[使える CSS テクニック] CSSで色々なカラムレイアウト︵段組︶を実現するの記事を書きましたが、反響が大きかったようでしたので今回は続編です。
ブログ︵MovableTypeやWordPress︶のデフォルトテンプレートって、divを多く使用しているためcssだけを差し替えるにも結構手間がかかります。
そこで今回は汎用的に使えるブログ詳細ページのテンプレート︵XHTML+CSS︶を作ってみました。
皆様のコーディング時間短縮になれば幸いです。
ブログ3カラムレイアウト
まずはサンプルをご覧ください。
●3カラムブログ用テンプレートのサンプルページ
XHTML構造は以下のようにしてます。
ヘッダーとフッターはブラウザ幅いっぱいに広がるようにしています。
またXGAモニタに最適化するため表示エリアは980pxになっています。
コーディング仕様
●文書型‥XHTML 1.0 transitional
●XML宣言‥なし
●文字コード‥UTF-8
●改行コード‥LF
対象ブラウザ
以下のブラウザでの表示確認はしています。その他については確認していませんので、ご了承ください。
Windows
●IE 6~8
●FireFox 3.0~3.5
●Google Chrome 2.0
●Opera 9.5
Mac
●Safari3.0
●FireFox3.0~3.5
●Opera 9.6
サンプルレイアウト ダウンロード
今回ご紹介したXHTML&CSSをセットにしましたので、ご利用になりたい方は以下からダウンロードしてください。