汎用的に使える最近流行りの3カラムブログ用テンプレートを公開します

汎用的に使える最近流行りの3カラムブログ用テンプレートを公開します

イメージ

こんばんは。最近はドラクエ9でレベル上げばかりをしているishidaです。

以前、[使える CSS テクニック] CSSで色々なカラムレイアウト(段組)を実現するの記事を書きましたが、反響が大きかったようでしたので今回は続編です。

ブログ(MovableTypeやWordPress)のデフォルトテンプレートって、divを多く使用しているためcssだけを差し替えるにも結構手間がかかります。
そこで今回は汎用的に使えるブログ詳細ページのテンプレート(XHTML+CSS)を作ってみました。
皆様のコーディング時間短縮になれば幸いです。

ブログ3カラムレイアウト

まずはサンプルをご覧ください。

XHTML構造は以下のようにしてます。

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をセットにしましたので、ご利用になりたい方は以下からダウンロードしてください。

  • このエントリーをはてなブックマークに追加

この記事を読んだ人にオススメ