higuchi.com blog

The means justifies the ends

模様替え [究極の3列レイアウト]

春なので、このブログのページデザインを少しリニューアル。以前は、左側にメニューとナビゲーションの列、右側はウィンドウいっぱいまで記事本体という2カラムのレイアウトでしたが、今度は右側にもカラムを設けて3カラムレイアウトです。以前同様、ブラウザのウィンドウのサイズを変えると、それに合わせて本文部分の幅が自在に変わるリキッドレイアウト。ゼロからページレイアウトを作る根性もデザインセンスもないので「ありもの」をパクってきました。

今回ベースにしたのは Matthew James Taylor という方の《The 'Holy Grail' 3 column Liquid Layout》というテンプレート。名前にある Holy Grail というのは、《ダ・ヴィンチ・コード》や《インディ・ジョーンズ》にも出てきたけど聖杯のこと。転じてみんなが探し求める『至高の目標』みたいな意味があるようなんですが、こういう大層な名前をつけるにはそれなりの理由があるようです。

作者本人によるこのレイアウトのウリは、

  • HTML の構造上、本文部分に当たる真ん中のカラムが一番先に書かれていて、左右のカラムはその後に書いてある
  • ブラウザーの非互換性に対応するために、トリッキーなハックを使ったり、JavaScript で動的に属性を書き換えたりすることがよくあるのだけれど、このレイアウトではそれがない
  • カラムの長さがまちまちな場合、短いカラムの左右の罫線が途中で切れたりすることがない
  • カラムの背景に画像ファイルなどを使わず CSS だけで書いてある
  • Mac/Windows、IE/FireFox/Safari/Opera と、メジャーなブラウザーを幅広くサポート
  • ブラウザ側でテキストの表示サイズを変えてもレイアウトが崩れない。Mac のマルチタッチのトラックパッドでついうっかり「つまむ」とか「広げる」操作をしてもちゃんと見える
などなど。平たくいうと「シンプルな構造で、どんなブラウザでも同じようにきれいに見える」というところがセールスポイントなんだけど、私が一番うれしいと思ったのは HTML の構造上、真ん中のカラムが最初に書いてあるというところ

最近の検索エンジンは、ページの最初の方に書いてあることをより重要視して検索するという仕掛けになっているものが多いので、各ページの主旨にあたる本文が入っているカラムはできるだけ HTML の最初の方に現れた方が SEO 上よろしいとされています。ところが、素直に作った複数カラムのレイアウトだと、HTML の中では左のカラムから順に書いていく構造になっていることが多いので、 HTML の最初の方は左カラムのナビゲーションメニューやリンク先のテキストばかりになっちゃう。
このレイアウトを使うとそれが回避できるんですね。

しかし、いつも思うのだけれど、こういう個人ブログのページデザインをお手頃なお値段でかっこよくテイラーメイドしてくれるデザインサービス、だれかやってくれないかなあ。けっこうニーズはあると思うんだけど。というか、だれかうちのページレイアウト、デザインとマークアップしてくれー。

コメント

Andyさんのコメント:

> こういう個人ブログのページデザインをお手頃なお値段でかっこよくテイラーメイドしてくれるデザインサービス
ほしいですねえ。でも手間の割にもうからないんでしょうねえ。

フォームのところがちょっと変なようです。カーソル位置が上にずれるような。

さんのコメント:

3万~5万でブログデザインやってくれるサービスならいくつかありますよ。
blogdesign.netとか、aamall.jpとか。

HTMLコーディングの質とデザインの両立を考えると慎重にデザイナーを選ばないといけないので、ヘッダー部分の作成だけ頼むとかするほうがいいかもしれないですけど。

コメントを書く

関連するかもしれない記事

モバイルフレンドリー [ブログのデザインをレスポンシブにしてみたよ]

Google 様が「今後、モバイル端末でも読みやすいように考慮されているページが検索結果の上位に現れ...

この記事を読む »

灯りが点くようです [丸の内の冬支度]

灯りが点くようです [丸の内の冬支度]

12月を目前にして、丸の内界隈もクリスマス的演出の準備が始まりました。 昨日の帰りには通勤ル...

この記事を読む »

新生「ペンギンのペンギン」

祝!復刊 [ペンギンのペンギン]

新生「ペンギンのペンギン」1980年代の前半にリブロポートという出版社から出ていた「ペンギンのペンギ...

この記事を読む »

将軍様はミリタリーおたく? [金正日のジャンパー]

将軍様はミリタリーおたく? [金正日のジャンパー]

写真は本文と関係ありませんってば  とある方から...

この記事を読む »

230円

訳あって短い [シガーライターソケット用USB電源アダプタ]

最近お気に入りの香港ガジェット通販サイト DealExtreme.com からご紹介。 前回の記事にもちらっと出...

この記事を読む »

歳末サービス [パワポ版 ブログ、グーグル、アテンション]

一部の物好きな方からリクエストを頂戴しておりました、“ブログ、グーグル、アテンション”のネタで使っ...

この記事を読む »

温泉旅館の案内図

Webサイト=建造物 [田舎の温泉旅館のようなサイトができる理由]

図は本文とは関係ありませんとある非営利団体のWebサイトのメンテをしているのですが、このサイトが実に...

この記事を読む »

白山陶器のG型しょうゆさし

おいしい卵かけご飯のために [白山陶器のしょうゆさし]

G型しょうゆさしお昼ごはんのついでにスモークチップ(燻製の煙を出すために使う、香りの強い材木を細切...

この記事を読む »

Googleの新しいUI

Googleの左のうざいやつの消し方 [Demand Media 風アプローチの実験]

検索結果ページ左のナビゲーションエリアGoogle 様の画面といえば質実剛健、ムダなものを排したストイッ...

この記事を読む »

誰のためのデザイン? [スピンドルグリル]

誰のためのデザイン? [スピンドルグリル]

最近のトヨタ車、レクサスとかクラウンとかのフロントグリルの形。 スピンドルグリルと呼ぶそう...

この記事を読む »