Home > 未分類 > αブログのレイアウト7選

αブログのレイアウト7選

そろそろブログのデザインを変えようと思ってCSS Layoutsのレイアウトテンプレートを見ていたら、結構バリエーションが豊富。

ユーザビリティーなど色々と選ぶ指標はあっても中々決め手に欠く感じでした。そこで他の人はどんなブログレイアウトを使っているのかちょっと調べてみました。

(なお、ブログを選んだときの基準は特にありません。2006年αブロガーから適当に選んだりしました。)

[N]ネタフル

alphablog1.gif

最近流行りだと言われている3カラム(3列ということ)です。全体の横幅は900pxで、それぞれ左420px中280px右180px(余りは余白でpx数は結構適当)。
メニュー部分を2カラムにすることでブログに特徴的な長いサイドメニューを解決。さらに、固定レイアウトでブロガーの意図した通りに表示させることができるのでブロガーに優しい感じです。
by MovableType

百式

alphablog2.gif

一般的な2カラムのレイアウトという印象。けれどもフッターがやたら長い。もうフッターという粋ではないかもしれませんが、ここにメニューなどが詰め込まれている感じです。
実は日本ではこのレイアウトが増えてきていて、上の方の部分がすっきりしますね。800px中、左510px右250pxの固定レイアウトです。幅を800px以内に収めれば大体のPC環境ではストレスなく見れると言われています。
by MovableType

alphablog2-s.gif

naoyaのはてなダイアリー

alphablog3.gif

これもいわゆる2カラムレイアウトですが、メインカラムがブラウザによって伸びたり縮んだりします。
これはブラウザウィンドウの大きさやPCの解像度に依存しないため、ユーザビリティが悪くなりにくいという利点があります(フレキシブルレイアウト)。幅は左75%右残りって感じです。
by はてなダイアリー

My Life Between Silicon Valley and Japan

alphablog4.gif

2カラムレイアウトで、サイドバーが左側についています。フレキシブルレイアウトですが左サイドバーが220pxの固定レイアウトになっています。
今回調べて左サイドバーよりも右サイドバーの方が多い印象を受けました。人は左上からページを見始めるので、本文が左上に近いほうがユーザビリティ的に良いという話もありますが、一般的なサイトでは左メニューが普通ですよね。まず本文を押したいブログでは右メニューの方が人気。
by はてなダイアリー

情報考学 Passion For The Future

alphablog5.gif

2カラムのフレキシブルレイアウトですが、メインカラムの上部にお知らせやカテゴリが載っているのがユニークです。ヘッダーをメインカラムの中に作っちゃったっていうイメージ。左サイドバー220px固定でメインは余りです。
by MovableType

>スラッシュドット ジャパン

alphablog6.gif

昔からある3カラムレイアウトです。左のサイドバーの幅が9.25emと文字の大きさによって変わるのが特徴。
こうすることでどの環境で見ても文字が切れたりすることはありません。右サイドバーが200pxでメインカラムが残りのフレキシブルレイアウトです。
by XOOPS

>FPN

alphablog7.gif

左にメインカラムがくる3カラム固定レイアウトです。ニュースサイトのようなメディアブログなだけあって、メインカラムの下のほうにテーマ別記事一覧が表示されてます。全体幅が850pxでそれぞれ左から500px、180px、170pxです。
TOPページでは記事の一部が列挙されていてまさにニュースサイトっていう感じのブログですね。
by XOOPS

また、ブログレイアウトとは話が反れますが、最近ではエラスティックレイアウトというものも出てきていて注目を集めています。

ご存知の方も多いとは思いますが、フレキシブルレイアウトと固定レイアウトを合わせたようなレイアウトで、文字の大きさに合わせてレイアウト全体が対応するのです。初めて見ると、「オッ」っと思ったりしますw

百聞は一見にしかず、以下にサンプルが公開されているのでご覧ください。ブラウザの文字の大きさを変えてみるとおもしろさが分かります。

» >css Zen Garden: The Beauty in CSS Design

文字小↓
alphablog8-1.gif
文字中↓
alphablog8-2.gif
文字大↓
alphablog8-3.gif

ただこのレイアウトは色々問題があって、これを実現するのにIE6.0では使えないCSSを使ったりする場合もあるのでまだまだ広がっていないのが現状です。画像も普通のやり方では拡大縮小ができませんし。

と、いろいろとレイアウトを見てきました。ブログレイアウト言えど各所におもしろい工夫がちりばめられていたりします。皆さんのブログレイアウトの参考になればコレ幸い!w

【参考】
IE7もサポートしているCSSレイアウトがダウンロードし放題の『CSS Layouts』|POP*POP
ウノウラボ Unoh Labs: エラスティック・レイアウトのご紹介

Similar Posts:

8maki 未分類

  1. No comments yet.
  1. No trackbacks yet.