見やすさ求めてリニューアル

trackBacks (0)　givenComments (2)　Feb 9, 2007

ブログを書き始めてもう四ヶ月が経とうとしている。ことあるたびに、「（デザインのせいで）ブログが読みづらい」とのお叱りをいただいていた。Movable Typeの初期デザインに少し手を加えて、お茶を濁す程度に色を変えて、幅を広くしてみたりしたけれど、やはり読みづらい。

ただでさえ文章が長いのだから、デザインくらいはすっきりさせてできるだけ読みやすくしよう、と考えてはいたものの、なかなか手をつけることが出来なかった。そう思い始めて早三ヶ月。やっと昨晩気持ちが乗ってきて、リニューアルしてみた。久々にCSSとかHTMLとか書いてみたけれど、とにかく目が乾燥した。次なるリニューアルのためにいくつかメモ。

IEはやはりIE

CSSの大敵であるインターネットエクスプローラー。予想に反することなく、今回も何かと足を引っ張られた。どうにかValidなCSSだけで書ければ、、とがんばってみたけれど、二カ所で止むなく（泣く泣く）IEハック（7も含め）を使用した。（「*+html」「* html」）

リニューアルのポイント

リニューアルするにあたって念頭に置いていた点が三点。

リキッドレイアウトの全画面表示（ナビゲーションは固定幅）
ナビゲーション部分をとにかくすっきり読みやすく。（行間とか重要だったりする。あとはリストマーカーとか。）
コメントやトラックバックの存在感アップと可読性向上。（せっかくいただくコメントやトラックバックだから、それも是非コンテンツの一部として読んでほしい。）
フォーム部分のさっぱり感の演出。（コメントを書きたくなるようなフォームを目指してみた。コメント増えたらいいけれど。。）
全体として、白を基調にしてプレーンなイメージ。（前のデザインが黒過ぎたから。）

参考にしたサイトなど

MTの「最近のTrackback」にエントリーのTitleとPermalinkを！（プラグインなしではできなかったのか。。これはかなり役に立った。）
Movable Type ユーザマニュアル: テンプレート・タグ（これさえあれば、MTのテンプレは問題なさそう。）
マニュアルに無いMTIfNonZeroタグ（今回はあまり使わなかったけれど、うまく使えばわりとおもしろいものができそう。）
Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト（やっぱり原点はこれです。）
かつお（弊社の優秀なCSS使いです。）

今後の課題

写真を全部右側にフロートさせる。（そのためにはアマゾンのリンクを全部貼り直さなければいけない。。）
他のウェブサービスと連携して何かコンテンツを増やす。（flickerとかかな。。）
「キーワードリンク」は外部リンクということが視覚的にわかるようにリストマーカーをそれっぽいものに変更する。

テレビヘッドの謎

ちなみに、この最高にかっこいいロゴと「テレビヘッド」は親友のデザイナーに作ってもらいました。ほんとにありがとうございます。

trackbackUrl for this entry:

ぴかり　at 00:05 on Feb 10, 2007

☆祝リニューアル☆

今後のTVheadブログのますますの繁栄をお祈りいたします！

デザインかっこいいね。みならうわ♪

K　at 00:26 on Feb 10, 2007

>ぴかり
コメントありがとう。ますます繁栄したいです。デザインは適度なごちゃごちゃ感とすっきり感をバランス良くまとめたいと思ってやりました。ぴかりのvoxもすばらしい調和具合でした。