前はBlogger使ってたけど日本語のカスタマイズの資料が少ないうえに、コメントやトラックバックも癖があって使いにくかった。
ってことで時間もあるのでMovable Type使って一から構築してみた。今後CMSを使ってサイト構築って機会はあるだろうからプロセスをメモ。
- スクリーンショットをPhotoshopで作る。
サイズは実寸でさらに仮想の日記を書き込んだ状態を作る。 - スクリーンショットをプリントしてレイアウトをボックスで切っていく。
それをCSSのボックスレイアウトに当てはめてみる。この段階でid、class名や画像の名前を決める。 - ボックスレイアウトを見ながら構造だけのHTMLを作る。
ここはテキストエディタでHTML直書き。 - 構造だけのHTMLにidやclassを割り振ってCSSのレイアウトに備える。
- CSSでレイアウト。
Dreamweaver使ってブラウザ互換を確かめながらスクリーンショットのとおりにレイアウトする。レイアウト上の微調整はここで済ませておく。 - 1~5の手順で複数のページを作ってリンクを確かめる。
- 出来上がったHTMLをMovable Typeのテンプレートに変換する。
主に更新される情報をMovable Typeの独自タグに置き換える作業と、一枚のページをヘッダーやフッターとかに切り分けてモジュール化する。ここが一番時間かかるけど、あらかじめ各ページの具体的な青写真を作っておくと作業的に進められる。 - コメントありや、画像あり、トラックバックなんかいくつかのパターンで投稿してみて動作を確かめる。問題がなければ完成。
とまぁこんな感じ。
デザイン作業ははじめのPhotoshopでスクリーンショット作る時だけだからここで手を抜くと後が大変。ある程度構築しやすいレイアウトを考えるのも大事。
しかしMovable Typeが吐き出すソースがスゲェ汚い。テンプレートの視認性を優先して独自タグに合わせて整理すりゃいいのか、吐き出すソースの視認性を優先してHTMLのタグに合わせて整理すりゃいいのか、なかなか折合いがつけれなかった。
参考にさせてもらったサイトは見栄えもソースもキレイ。拡張性やメンテナンスのこと考えるとどっちのソースもキレイにしとかんとあかん。