------------------  ブログページのデザイン


以前から「Hatena::Diary」のページデザインが気に入っていませんでした。「Hatena::Diary」のテンプレートの種類は300以上もあるのですが、比較的テーマ性が強いものが多く、独特なイラストが入っていたり、背景にメッセージの強い模様があったりで、私の感覚にあうものがありません。もっとシンプルで基本的な、配色・字体・字の間隔・余白などに神経の行き届いたテンプレートが無いものかと思っていました。
デザイン・建築関係の方のブログを見ていると、圧倒的に多いのが「excite」のブログです。シンプルなデザインのページレイアウトに各自が背景の色をカスタマイズしたり、画像を背景に入れたりして、綺麗なデザインのページが多く見られます。
しかし、既に何件かの方に"http://d.hatena.ne.jp/ya-ao"へリンクして頂いているので、今更プロパイダーを変えるのも煩わしく「Hatena::Diary」でどこまで出来るか試してみました。



ページのテンプレート(Hatenaでは"テーマ"と言います)で癖が無く着色していない「Memo」を選んで、スタイルシートでカスタマイズすることにしました。
まず最初は、ページの印象を左右する配色です。文字は黒にして、本文の背景は目に優しい薄いベージュ色に設定しました。タイトルや見出しは、ベージュに対比して補色の紺色を選び、ぎらついた印象にならないようにダル(彩度の低い)な色調に調整し、なおかつシャープな印象になるように濃い紺色のボーダーで引き締めています。地色はやはりベージュの補色で少し青み掛かったライトグレーを選んで、シャープでありながらも少し華やかで全体には優しい印象を目指しました。
次に、本文・サイドバーの左右の巾や余白を調整し、最後に本文の文字の間隔を少し狭くし、行間を少し大きめにカスタマイズしました。参考書などないので、"http://www.htmq.com/index.htm"のHTMLの記述を参考にしながら、色々と試してみました。まさに試行錯誤です。

長い格闘の末、一応納得のいくページデザインが整いました。一時は本気で「excite」のブログに移籍するつもりでしたが、引き続き「Hatena::Diary」に書き込むことにしました。