MovableTypeオリジナルテンプレートを作ろう

ポータルサイトやショッピングサイトでよく見かけるページの左右に配置されたメニューBOXを作ってみましょう。

まずは、完成形からお見せします。

今回は、このメニューBOXの作り方をご説明しますね。

最初にスタイルシートで、BOXの大きさ（横幅）を定義します。

横幅は、width属性を使います。
そして、単位には、px（ピクセル）を使います。

では、メニューBOXの横幅を160pxで定義してみましょう。

.menu-boxという要素は、『クラス要素』と言って、定義する属性をグルーピングしてくれます。
まあ、もっとわかりやすく説明すると、複数の属性を定義した集合体といったところでしょうか

クラスを定義するには、属性の最初に、『.（ピリオド）』を使います。
クラスの名前は、自由につけられますので、後で見てわかりやすい名前をつけましょう。

ここでは、menu-boxというクラスを『.menu-box』と定義しています。

上のmenu-boxに、境界線（枠線）を濃い青色で表示する定義を追加してみましょう。

境界線（枠線）は、borderという属性を使います。
「border:1px solid #0000cc;」で、上下左右に、太さ1px、線の種類は実線(solid)、カラーは濃い青色(#0000cc)の線を表示します。

次に、メニュータイトル部分を定義します。

メニューのタイトルには、HTMLのh1〜h6タグを使うのが良いでしょう。

ここでは、h5タグを使ってみます。

完成形のように、背景色に、濃い青色、文字色は白で定義します。

h1〜h6タグは、ブロック要素と言います。
ブロック要素は、要素の前後に改行が入ります。

さらに、h1〜h6タグは、要素の上下に、余白が多くとられますので、これを「margin:0;」で無くしてします。

「padding:3px;」は、文字と境界線の間に、3px分の余白を作っています。

背景色は、「background-color:#0000cc;」で、濃い青色を指定
文字色は、「color:#ffffff;」で、白を指定しています。

以上で、スタイルシートの準備が完了しました。

上で作成したスタイルシートを使って、インデックステンプレートなどを編集します。

メニューBOXを表示させたい位置に、以下のように記述します。

これで、メニューBOXが完成です。

では、詳しく説明します。

まず、「<div class="menu-box">」で、ここからメニューBOXの記述がはじまることを宣言します。

次に「<h5>メニュータイトル</h5>」で、メニュータイトルを表示します。

続けて、「メニュー１<br />」〜「メニュー５<br />」で、メニューリストを表示します。

最後に、「</div>」で、メニューBOXの記述が終わったことを宣言します。

実際には、このメニューBOXに、カテゴリー一覧やコメント、トラックバックなどを表示して使いますよね。

メニューBOXに、カテゴリー一覧を表示する場合は、以下のように記述します。

メニュータイトルを「カテゴリー」に変更します。

「メニュー１<br />」〜「メニュー５<br />」の変わりに、Movable Typeのカテゴリー一覧を表示するMTタグを使っています。

「<MTSubCategories>」は、これから、カテゴリーを表示するための記述がはじまることを宣言しています。

「<MTSubCatIsFirst><ul></MTSubCatIsFirst>」は、（サブカテゴリを設定している場合）兄弟カテゴリの中で最初のカテゴリのときだけ表示される内容を記述します。

「<li><MTCategoryLabel></li>」は、カテゴリ名を表示しています。

「<MTSubCatsRecurse>」は、すべてのカテゴリが表示し終わるまで、繰り返して表示させるMTタグです。

「<MTSubCatIsLast></ul></MTSubCatIsLast>」は、兄弟カテゴリの中の最後のカテゴリのときに表示される内容を記述します。

「</MTSubCategories>」は、ここでカテゴリーを表示するための記述が終わったことを宣言しています。

上記のように、h5タグについて、スタイルを定義すると、すべてのテンプレートで使われるh5タグに、このスタイルが適用されてしまいます。

例えば、メインページでは、メニュータイトルとして使い、エントリーアーカイブページでは、普通のh5タグとして使いたい場合もあるでしょう。

そのような場合は、メニューBOXで使うh5タグだけに適用するスタイルの定義方法があります。

menu-boxクラスの中のh5タグについて、スタイルを定義するやり方です。

上記のように、h5の前に、「.menu-box」を記述すると、「<div class="menu-box">」〜「</div>」で囲まれたh5タグだけに、スタイルが適用されます。