Melog

ここ数日で以下の変更を行った。

• Movable Typeを 4.1 にバージョンアップ
• それに伴い、Movable Typeのテンプレート修正。主にMTSetVarsタグを使用したテンプレートのモジュール化。
• 一部にアイコン追加。

Movable Typeのバージョン4.1がリリースされたので導入。この4.1のバージョンアップではいくつかタグが追加されていて、その中に「MTSetVars」がある。これは変数を設定するタグ。従来のMTSetVarやMTSetVarBlockと異なるのは、こちらはブロック内で変数を一括指定できること。なお、複数行に渡る値はやはり従来通りMTSetVarBlockを使う必要があるようだ。これはMTSetVarsブロック内でも宣言できる。

Moavble Typeで変数を使う主な目的は、同じ情報群のテキストを一纏めで管理できることや、テンプレート別に変数を設定することで、インクルードされたモジュールの挙動を呼び出し元別に変更できること等が挙げられる。
また、従来あった「MTSetVarをページの先頭で宣言すると、改行が挿入されてしまう問題」もこれによって解決できる。（参考：ページ先頭の改行を削除する – The blog of H.Fujimoto、ページの先頭に改行が入る問題（MTRemoveBlank） – MovableTypeのススメ）
今回は、そのテンプレート別にヘッダ情報を変更するといった形で、テンプレート内容を簡略化したことが主な変更となるので、外観上はほとんど変わってない。

そのテンプレート修正ついでに、サイトにアイコンを追加した。転送量が増えることや、外部ファイルが多くなってファイルの煩雑になるといった理由でサイトのデザインに画像を使ってこなかったけど、最近何となく気が変わった。
そもそもそんな真剣に考えるほど転送量が増えるわけでもないし、ユーザビリティの観点から考えると、視認しやすいアイコンの存在はそれなりに必要とされるのではないかと。

ただし、恐らくユーザの割合が最も多いであろうInternet Explorerではこのアイコンは見えない。何故ならば、CSSの「content」プロパティによってアイコンが追加されているから。これは現状、IEでは未サポート。CSS2への完全対応が予定されているIE8になって、初めて見えるようになる…はず。

CSS 2に対応したForefox、Opera、及びそれぞれでは以下のように見える。

Firefox

Opera

Safari

img要素ではなく、CSSのcontentプロパティで行ったのは、この場合はあくまでもアイコンとテキストは別々の要素ではなく、全体で一つの要素を形成しているため。主体はリンクであり、アイコン画像はテキストを修飾する付属物であると考えられるため、アイコンをリンクのスタイルとしてCSSで指定する事は、理にかなっていると言える。
…などともっともらしい理由をつけたけど、正直なところは、一々imgタグ挟むのがめんどいから。とはいえ、前に挙げた理由も正しい理由であることに変わりはない。

ちなみに、今回使ったアイコンは以下のサイトにあるアイコン。結構有名なサイトのようで。

DHTML Site – Free 16×16 Icons