Movable Type使ってみた

作業中...前はBlogger使ってたけど日本語のカスタマイズの資料が少ないうえに、コメントやトラックバックも癖があって使いにくかった。

ってことで時間もあるのでMovable Type使って一から構築してみた。今後CMSを使ってサイト構築って機会はあるだろうからプロセスをメモ。

  1. スクリーンショットをPhotoshopで作る。
    サイズは実寸でさらに仮想の日記を書き込んだ状態を作る。
  2. スクリーンショットをプリントしてレイアウトをボックスで切っていく。
    それをCSSのボックスレイアウトに当てはめてみる。この段階でid、class名や画像の名前を決める。
  3. ボックスレイアウトを見ながら構造だけのHTMLを作る。
    ここはテキストエディタでHTML直書き。
  4. 構造だけのHTMLにidやclassを割り振ってCSSのレイアウトに備える。
  5. CSSでレイアウト。
    Dreamweaver使ってブラウザ互換を確かめながらスクリーンショットのとおりにレイアウトする。レイアウト上の微調整はここで済ませておく。
  6. 1~5の手順で複数のページを作ってリンクを確かめる。
  7. 出来上がったHTMLをMovable Typeのテンプレートに変換する。
    主に更新される情報をMovable Typeの独自タグに置き換える作業と、一枚のページをヘッダーやフッターとかに切り分けてモジュール化する。ここが一番時間かかるけど、あらかじめ各ページの具体的な青写真を作っておくと作業的に進められる。
  8. コメントありや、画像あり、トラックバックなんかいくつかのパターンで投稿してみて動作を確かめる。問題がなければ完成。

とまぁこんな感じ。

デザイン作業ははじめのPhotoshopでスクリーンショット作る時だけだからここで手を抜くと後が大変。ある程度構築しやすいレイアウトを考えるのも大事。

しかしMovable Typeが吐き出すソースがスゲェ汚い。テンプレートの視認性を優先して独自タグに合わせて整理すりゃいいのか、吐き出すソースの視認性を優先してHTMLのタグに合わせて整理すりゃいいのか、なかなか折合いがつけれなかった。

参考にさせてもらったサイトは見栄えもソースもキレイ。拡張性やメンテナンスのこと考えるとどっちのソースもキレイにしとかんとあかん。