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' ?>  <h1>hoge</h1> ここにコンテンツ <?php include 'footer.html' ?>
フレームワークの処理の流れ
header.html
ob_start()し、出力バッファリング開始
ヘッダーHTMLを出力

コンテンツHTMLを出力footer.html

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

Continue reading