Movable Typeの中身の解説はよく見かけますが、実際どんなツールを使ってどのような工程で行うのか、というカスタマイズ方法そのものに焦点を当てた記事を殆ど見たことが無かったので、自分の方法を紹介してみます。自分自身、HTMLやCSSにそこまで慣れてはいないので、初心者だけどカスタマイズに挑戦してみたい!って人の参考になればと思います。

数年前なら需要がありそうな記事ですねw
vicunaもFirebugもFFFTPも今更な感じですが、まあ書きます。

-------------------

mt.Vicuna - Movable Type テンプレート
まず複雑なMTのデフォルトのCSSを見やすくするところから。
そのままでも十分カッコいいテンプレートなのですが、カスタマイズも非常にやりやすく考えられています。CSSの構造が、少なくともMTのそれよりは分かりやすくなると思います。MT4.2からMTに元々あるウィジェットマネージャーにも対応して、ますます便利。

Firebug :: Firefox Add-ons
Firefoxのアドオンです。
fb2.jpg

fb4.jpg

ブラウザでHTML/CSSソースの確認ができ、さらにソース内の要素にマウスを重ねれば、その要素の位置及びmargin/paddingが視覚的に確認できます。すごい!
そしてその要素に関わるCSSを下に表示してくれるのですが、何重にも継承している場合でも、複数のファイルにまたがっている場合でもきっちり表示してくれます。ここを変えたい!という時に、修正箇所が一発で分かります。同一要素に複数のプロパティが被った場合も、優先される部分以外は斜線で消してくるという親切さ。ちなみに数値を書き換えればその場でプレビューも可能。完璧です。
公式のスクリーンショットではその良さが伝わっておらず、勿体ない気がします。


FFFTP
ff.jpg

FTPクライアントの鉄板ですね。かなり前からありますが、
軽くてシンプルで使いやすくてソフトなのでずっと使ってます。
Vicuna内のCSSを全部開いておいて、Firebugでプレビュー/確認が取れたら、随時実際のCSSを書き換えていきます。ある程度修正が進んだら、FFFTPでアップして反映させます。
FFFTPを使って、Vicunaテンプレートのフォルダを、一括してMTのmt-static/themesフォルダにアップします。その際、「新しければ上書き」を選択すれば、先程変更を行ったところのみアップされます。

まとめ

  • Vicunaのサイトを見つつ、サイト全体の大まかな形を設定する。
  • カスタマイズの時は、Vicuna内の関連するCSSファイル全部と
    Firebugの入ったFirefoxとFFFTPを起動しておく。
  • Firebugで修正箇所の確認→実際にCSS修正→FFFTPでアップ→ウマー

もっと良い方法もあると思いますが、初心者が適度な自由度を保ちつつも、簡単にカスタマイズする方法としては、無難なところだと思います。長く多くの人に使われてるだけあって、この3つのテンプレート・アドオン・FTPクライアントはかなりの完成度だと思います。Vicunaなんて本当に良く考えられてて、毎度感心します。

Home > Tips & Chutorials > | Web > mt.Vicuna + Firebug + FFFTPでMovable Typeカスタマイズ

Comments:0

Comment Form