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

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

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

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

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

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