akiyan.comのデザインをリニューアルしました

akiyan.comのデザインをリニューアルしました。フィードで購読されている方に気づいてほしいのでお知らせします ^^;

今回のデザインでこだわった点は以下の通り。

• 見た目
  • あかぬけること第一
    オリジナリティに固執せずに、クールなサイトのよいと思うところをかなりとりこみました。
  • ロゴ
    フォント好きな友人に相談し時間をかけてレビューしながら決めました。形も少しカスタマイズしているので完全オリジナルです。
  • 線をなるべく使わない
    borderプロパティが便利なのでどうしてもboxや区切り線を多用しがちだったのを、やめました。すっきりしたんじゃないかと。
  • サイドバーのパーツごとの背景
    図形にグラデーションのスクリーンをかけています。このためにFireworksの操作をヘルプを見ながら覚えました。頑張った甲斐があったかと。
  • はてなダイアリーのブログもデザインを統一
    つ http://d.hatena.ne.jp/akiyan/
• 裏側
  • シンプルなHTML
    メンテナンス性を考えて必要最低限のHTMLで済ませました。後からCSSで何でもできるようにあらかじめHTMLを複雑にするのはやめました。
  • CSSの子孫セレクタにclassを使わない
    子孫セレクタってまるでDOMの親ノードを辿るような思考が必要で、思考に時間がかかります。なので、せめてclass付きが連続するセレクタは無しにしました。メンテナンス性重視です。具体的にどうするかというと、「div.content div.section」としてたところを「div.content-section」にしてしまう感じです。「div.content-section p」といった、class無しの子孫セレクタは使います。
  • CSSは1ファイル
    1ファイルで済むなら1ファイルのほうが断然いいです。
  • フレームワークを単純化
    オリジナルのフレームワークでMVC構成になっていたのをやめました。現在、以下のような感じで書かれています。

    <?php include 'header.html' ?>
    <!--
    <meta:title>ここにタイトル</meta:title>
    <meta:path>ここにパンくずリストのHTML</meta:path>
    -->
    <h1>hoge</h1>
    
    ここにコンテンツ
    
    <?php include 'footer.html' ?>

  • フレームワークの処理の流れ
    • header.html
      • ob_start()し、出力バッファリング開始
      • ヘッダーHTMLを出力
    • コンテンツHTMLを出力
    • footer.html
      • フッターHTMLを出力
      • ob_get_contents()で出力バッファを取得
      • 取得したバッファから meta:title 要素と meta:path を探し、ヘッダーHTMLのタイトルとパンくずリストを置換
      • gzip圧縮し、クライアントへ送信

今のところリニューアルが完了しているのはサイトトップ・カテゴリメニュー・ブログのみです。