●CSSの書き直し
このブログのCSSを新たに書き直した。
これまでの物は、4年前にこのサイトを設計した時にデザインした。
それ以降、細かな調整は施したが、基本的には同じだ。
今回も設計の基本思想は変わっていない。
前回をベースにさらに洗練を加え、基本思想に沿うよう勤めた。
- 文字主体のBlogとして文章を読みやすいものにする。
- また、長時間閲覧しても目が疲れないようにする。
- コンテンツを重視し、エントリ閲覧に集中できるようなるべくシンプルにする。
- シンプルでありながら控えめな主張と上品さを心がける。
- サイト閲覧時のレスポンスを良くするため、余分な装飾やギミックはなるべく控える。
今回の基本配色は普段愛用のモレスキン手帳の紙面にブルーブラックの万年筆で書く文字にイメージが近い。
モレスキン紙は漂白された純白ではなく、生成の自然な白である。
さらにルールドは薄いグレーの細いラインが入る。
いつもメモを取る時にはこの組み合わせに心が落ち着く好きな配色である。
ちなみにオフホワイトやアイボリーをベースにロイヤルブルーとポイントにゴールドという配色はとても好きな配色である。
ベースを今までは白（FFFFFF)であったが、紙面のオフホワイトを再現するため、#fbf9f0（C1%、M1%、Y4%、K0%）にした。
これはほとんど白に近く、横に白を比べてみないと解らない程度である。これ以上Yを増やすとこれ見よがしなベージュになる。
解らない程度の控えめなオフホワイトでも長時間の閲覧で目の疲れが大きく違う。
ちなみに、CSS編集にはパニックジャパンのCODAを愛用している。
なかなか16進法の色指示には慣れないので、CODAでは印刷で馴染んだ、CMYKでも色指定ができるのでありがたい。
ただ、CMYKはRGBに比べて色レンジが狭い。
もしCMYKの色レンジから外れた欲しい色があれば個々に設定する。
また、CMYKで色を指定してもRGBまたは16進法に変更する時に数値が微妙に変わる時がある。
特に、PhotoShopでイメージパーツを作成する時には注意が必要である。
レオナルドのサイトタイトル画像のベース調整時にピッタリCMYKで色を指定したのだが、Yが1%減ったりして、画像とベースの際が目立ってしまった。
しかたがないので一度、レイヤーの下地にベース色を指定して、乗算で馴染ませた後、レイヤーを統合、外側の大きな面を削除して透明色にして透明付GIF画像で保存する事で、何とか馴染ませた。
基本ベース #FBF9F0
エントリ文字色 #1E445C（C90%、M60%、Y30%、K30%）
エントリタイトル #23416c 3ピクセル#ccccccによるシャドウぼかし。
ライン #D0D0D0
その他タイトルイメージやTreeのラインもベース色の変更に伴い、微調整を加えた。
基本フォントスタイルをsans-serifに変更した。
等幅フォントも使いやすいのだが、 ゆったりと読むためにこの書体で統一した。
エントリ本文の設定は
サイズ 8pt
行間 200%
文字間隔 1em
本文を読みやすさは、雑誌のレイアウトを参考にして、行間は200%、文字詰めはやや広く1em、1行あたりの文字数も少なめにして読む時の目線の移動をなるべく控えめにした。
合わせて、以前より余白を大目に取って、ゆとりのあるレイアウトにした。
ここまで、神経を使いながら調整してデザインしても、いつもの事だがWindows環境で見ると卒倒したくなるくらい表示が汚い。
IE7（IE6ではレイアウトも崩れる。） FireFoxでも、日本語の表示が汚くて読むに耐えない。
英語は比較的綺麗だが、日本語の表示は前世紀で止まっているようだ。
それだけ日本市場が軽く見られているという事か?
WindowsでもSafariで見れば綺麗に表示できるので、OSだけの問題ではないだろう。
いつも思うのだが、一番流通しているOSとブラウザの日本語表示が汚くて、よくみんな我慢できるものだと思う。
この表示結果の汚さのせいでどれだけWebデザインをする気が削がれているか計り知れない。
Windows環境の人も是非1度SafariでWeb閲覧を試してもらいたいと思う。
そうすればいかに今のブラウザー環境が酷い物か気づかれると思う。
以上簡単な覚え書きだが、MT3の現段階でもう一度全体的にCSSを見直す事は現在制作中のMT4サイトでも活きるだろう。