TopMovable Typeテンプレート > 2007年5月
2007年5月11日

Movable Type 3.3 テンプレート(XHTML 1.0 Strict)

May 11,2007 2:00 AM
Tag:[, , , ]
Permalink

当サイトで配布中の Movable Type テンプレートを 3.3 用にバージョンアップしました。新しいテンプレートは下記の「Movable Type テンプレート」のページからダウンロードしてご利用ください。

Movable Type テンプレート

主な変更点は下記の通りです。

1.XHTML 1.0 Strict

これまで配布していたテンプレートのXHTML 1.0 文書型は「XHTML 1.0 Transitional」でしたが、今回「XHTML 1.0 Strict」に変更しました。

XHTML 1.0 Strict では XHTML のお作法が XHTML 1.0 Transitional より少し厳しくなります。例えば引用を示す blockquote 要素では、その直下にインライン要素・テキストを記述するのではなく、ブロックレベル要素(p 要素など)を記述することになります。ブラウザではブロックレベル要素が欠落しても問題なく表示されますが、XHTML 1.0 Strict のお作法に少しずつ慣れていくと良いでしょう(このサイトは XHTML 1.0 Transitional ですが)。

この変更に伴って下記の修正も実施しました。

  • form 要素に fieldset 要素追加
  • textarea 要素に初期値設定(エントリー・アーカイブ)

2.各アーカイブページの title 要素を「記事名+ブログ名」に変更

これまで各アーカイブページの title 要素は「ブログ名+記事(アーカイブ)名」で表示されるようにしていましたが、SEO を考慮して「記事名」が先頭に表示されるよう変更しました。タイトルやアーカイブ名に検索キーワードが含まれていると有利です。

3.サイドバーの XHTML マークアップ変更

div 要素を多用していたサイドバー、および各メニューリストのマークアップを定義リスト(dl/dt/dd)に変更しました。(X)HTMLでは文書の構造を明確にするためのもので、無意味に div を多用することは推奨されていません。この点に関しては反省を踏まえて見直しを行ないました。

4.float 解除を after 擬似要素に変更

これまで固定レイアウトの float による流し込み解除は br 要素に clear プロパティを与えておりましたが、適切なマークアップではありませんでしたので、after 擬似要素による流し込み解除に修正しました。

関連記事:CSS の after 擬似要素で回り込みを解除する

5.フォントサイズを % 指定に変更

px 指定だったため、IE6 での文字サイズ変更が有効にならなかったのですが、% 指定に変更することで有効になります。参考サイトは下記です。ありがとうございました。

また JavaScript によるフォントサイズ変更が多少簡単に設定できるようになります。

関連記事:Slider によるフォントサイズ変更でアクセシビリティを向上させる

この変更により、デフォルトのフォントサイズはこれまでよりかなり大きくなっています。これまでのフォントサイズを再現するには IE6 で「小」にしてください。デフォルトのフォントサイズを変更したい場合は、スタイルシート冒頭の

body {
    font-size: 100%;
}
html>body {
    font-size: 12pt;
}

の赤色部分を変更してください。他で指定している部分はこの値の相対値として変動します。ちなみにこれまでのテンプレートと近いデフォルト表示をするには、

body {
    font-size: 83.3%;
}
html>body {
    font-size: 11pt;
}

にしてみてください。

6.line-height の単位を削除

line-height は行間を指定するプロパティです。これまでは % 指定を行っていましたが、このプロパティに単位を与えると、子孫要素のフォントサイズを変更すると、期待する行ボックスにならないとのことです。
良い例が「タグクラウド」で、line-height に単位を与えていると、大きな文字が現われた時、フォントサイズによっては小さな文字に重なり、小さな文字のリンクが有効にならない可能性があります。

参考サイトは下記です。ありがとうございました。

7.エントリータイトルにパーマリンクを設定

これまでエントリー本文下の投稿時刻にのみパーマリンクを設定していましたが、ユーザビリティおよびSEO(内部リンクには意味のある文言があう方が良い)を考慮し、エントリータイトルにもアンカーを追加しました。

8.エントリータイトルの目印を border プロパティに変更

ある意味このテンプレートのトレードマークだった「●」印から border プロパティによる罫線に変更しました。

9.pre 要素用 CSS 追加

プログラムコード等を表示する場合を考慮して、pre 要素用の CSS を追加しました。

10.バナーの class 属性名変更

先人の方々の意見を参考に「banner」から「header」に変更しました。

11.カレンダーのマークアップおよびセレクタ名変更

thead および tbody を追加。またセレクタ名が混沌としていたので全面的に見直しました。

12.追記部分の MTEntryIfExtended タグを MTIfNonEmpty に変更

3.3 では MTIfNonEmpty が推奨されているので変更しました。

13.エントリー画像用CSS設定削除

エントリーに表示する画像を想定して CSS を設定していましたが、左上に表示する場合しか対応していなかったので削除しました。

14.コメントエリアの div 要素整理

コメント部分のマークアップはデフォルトテンプレートの構造をある程度継承していましたが冗長な div 要素を削除しました。なおコメント・トラックバックに関してはサイドバー並みのマークアップ見直しはできておりません。予めご容赦ください。

15.コメントアウトされたマークアップをMTIgnoreで括る

コメント・トラックバックのポップアップ画面用のアンカーを簡単に切り替えられるよう、コメントアウトした状態で記述していましたが、冗長なマークアップとして残ってしまうのを避けるため、MTIgnore を利用して、ページに表示されないように変更しました。

16.その他

あまり大がかりな変更を行うと、これまでのカスタマイズ記事も大幅に修正しないといけなくなるため、例えばSEO的に有利な、3カラム固定レイアウトで中央カラムを XHTML 文書の先頭にする、というような変更は行っておりません。
また、左右サイドバーのスタイルに対応する links-left / links-right といった属性名も、同様の理由によりそのままの名称にしています(文書構造にデザインを示す単語を用いるのが適切でないことは理解しています)。

Comments [28] | Trackbacks [5]
2007年5月 8日

「このテンプレートにリンクするファイル」または「ファイルへのリンク」の使い方 for Movable Type

May 8,2007 1:50 AM
Tag:[, , ]
Permalink

Movable Type のテンプレート編集画面を開くと、MT3.x の場合、下に示すスクリーンショット赤枠の「このテンプレートにリンクするファイル」、MT4,x の場合、「ファイルへのリンク」がありますが、このフィールドについての利用方法をご存知ない方が少なくないのではないでしょうか。

Movable Type 3.x
「このテンプレートにリンクするファイル」

Movable Type 4.x
「このテンプレートにリンクするファイル」

このフィールドはオーサリング・ツールを利用する方、あるいはテンプレートをカスタマイズする方にとってはかなり役に立つ機能を有しています。
ということで、本エントリーではこの「このテンプレートにリンクするファイル」および「ファイルへのリンク」の使い方を紹介します。説明に使用しているスクリーンショットは Movable Type 3.x のものですが、Movable Type 4.x の動作も同じです。

1.外部ファイルを Movable Type と同期させる

このフィールドの本来的な使い方は、Dreamweaver、GoLive等のオーサリング・ツールで作成したテンプレートを Movable Type の再構築あるいはテンプレート編集と同期させることです。オーサリング・ツールで作成したテンプレートは編集画面のテキストエリアにペーストするのではなく、このフィールドに外部ファイル名として指定するだけで自動的に読み込ませることができます。
以下、「このテンプレートにリンクするファイル」を設定されたファイルを、便宜上「リンクファイル」と記します。

例えば、作成したテンプレートを下記のようにリンクファイルとして指定します。指定する時にファイルの実体はなくても構いませんが、後で「リンクファイル」となるファイルは指定したパスにアップロードします。

ファイルを同期させる

この状態で、Movable Type の管理画面から(いきなり)再構築を実行すると、リンクファイルの内容をHTMLページやCSSに反映することができます。

またテンプレート編集画面を開くと、リンクファイルの内容がテキストエリアに反映された状態で表示されます。もちろんデータベースにも反映されます(編集画面を表示した時にデータベースに設定されるようです)。

上記をまとめると、次のような振る舞いになります。

リンクファイル操作時に優先されるデータ
再構築編集画面
ありリンクファイルリンクファイル
あり(空)*1データベースデータベース
なしデータベースデータベース

*1:リンクファイルの実体があり、その内容が空(0 バイト)のファイル

つまり、データベースの内容とリンクファイルに差分がある場合は、リンクファイルの内容が空でない限り、リンクファイルが優先されます。

改めて図で示します。
リンクファイルがない場合のテンプレート編集や再構築時の動作は次の通りです。

リンクファイルがない場合

上図のように、テンプレート編集や再構築を実行すると、Movable Type のテンプレート情報は基本的にデータベースから取得し、そのデータを元に HTML や CSS ファイルを出力します。

これと異なり、リンクファイルが存在する場合は、リンクファイルの情報を先に取得してページを生成し、同時にリンクファイルの内容をデータベースに反映する、という訳です(下図)。

リンクファイルがある場合

リンクファイルは、インデックス/アーカイブ/システム/モジュール、すべてのテンプレートに設定することができます。またこのフィールドにはファイル名だけでなく、パスを設定することができます。Movable Type 配布元の Six Apart は、絶対パス("/"から開始)による指定を推奨しています。

この仕組みを理解しておけば、テンプレート編集画面を利用せずに、テンプレートの内容を効率的にHTMLやCSSの内容に反映させることができます。
オーサリング・ツールとの具体的な連携方法例については下記のサイトが参考になるでしょう。

2.テンプレートをバックアップする

本来の利用方法ではありませんが、このフィールドを利用してテンプレートをバックアップする方法がかなり有名です。他のサイトでこのフィールドをそのように利用する方法が多く紹介されてますし、私自身、当初はそういう使い方をするフィールドと思い込んでました。

設定方法は1項と同様、「このテンプレートにリンクするファイル」に任意のパスを設定するだけです。ファイル名はテンプレートと対応がとれるよう、分かりやすい名称にしておくと良いでしょう。まバックアップ用のパス(tmpl 等)を作っておき、そこに出力するようにしておくとサーバ上にファイルが煩雑にならずにすみます。

テンプレートをバックアップする

この設定をしておくことで、テンプレート編集画面上での修正内容がデータベース以外に、リンクファイル、つまり物理的なファイルをサーバ上に保存しておくことができます。
リンクファイルはテンプレート編集画面の「保存」または「保存および再構築」をクリックした時に更新されます。MTタグも変換されず、そのまま出力されます。

万が一、データベースが壊れて、Movable Type にアクセスできなくなってしまっても、テンプレートはファイルに残ってますので、Movable Type を改めてインストールした時に、リンクファイルの内容をテキストエリアにペーストするか、「このテンプレートにリンクするファイル」に保存されているリンクファイルのパスとして設定すれば、簡単に復活させることができます。

2009.05.02
Movable Type 4.x の説明を追加しました。

Comments [8] | Trackbacks [1]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3