ヘッダーメニュー for Movable Type

Movable Type Tips ヘッダーメニュー

Movable Typeで、見栄えの良い横メニューをMovable Typeのタグと、スタイルシートだけで構築する方法を紹介。できるだけシンプルにするため、サブメニューは省いてある。

ブログのカテゴリは縦表示が当たり前!?

ブログとなると、どうしてもカテゴリが縦一列に並んでいるイメージがある。確かにカテゴリが多いと、横表示にした場合、はみ出る可能性があったり、横スタイルが定着しているために、探しやすいというメリットはある。でも、どのブログも縦表示じゃつまらないし、一般のサイトの場合は流行は横表示が一般的。縦表示なんて、とうの昔に捨て去られたのだ。(最近、サイト作るとき横表示にする割合が増えてるけど・・・)

というわけで、SCREAMOは今も昔も横表示を徹底させている。スタイルシートに少し精通していないと、崩れてしまったりカスタマイズがにしにくかったりとデメリットはあるけれども、この辺は学習するだけで突破できる。是非スタイルシートを学習する第一歩として、この横カテゴリ表示を試してみてはどうだろう。

ヘッダーメニュー

Movable Typeのタグを使って組み込んでみる

まず、下記のソースをカテゴリを表示させたい箇所に組み込んでもらいたい。

<ul id="menu-top">
<MTTopLevelCategories>
<MTIfNonZero tag="MTCategoryCount">
<li><a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a></li>
<MTElse>
<li><$MTCategoryLabel$></li>
</MTIfNonZero>
</MTTopLevelCategories>
</ul>

ちなみに、Movable Type4デフォルトの場合は、ヘッダー直下が無難なところ。ヘッダーテンプレートの<div id="content">直前に入れればだいぶ良い感じになる。

投入したソースは、基本的に<ul><li>のコンビネーション。<MTTopLevelCategories>〜</MTTopLevelCategories>は、トップカテゴリを吐き出させるタグで、間に<$MTCategoryArchiveLink$>と書くと、カテゴリアーカイブのURLが代入され、<$MTCategoryLabel$>と書くと、カテゴリ名が代入される。

組み込んだソースの一部

<li><a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a></li>

上記ソースの意味

<li><a href="カテゴリアーカイブのURL">カテゴリ名</a></li>

<MTIfNonZero tag="MTCategoryCount">タグは、カテゴリにエントリが書かれている場合には、こうなる。という指示を出し、<MTElse>からは、カテゴリにエントリが書かれていない場合には、こうなる。という意味で、組み込んだソースの場合は、エントリが書かれているカテゴリは、<li><a
href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a></li>を表示させて、書かれていない場合は<li><$MTCategoryLabel$></li>を表示させる命令を出している。なぜなら、エントリが書かれていなくて、ただカテゴリが登録されている場合は、コンテントエリアが空白なページができているので、リンクが張ってあっても意味がないからだ。ちなみにMovable
Type4の場合、Movable Type3とは違い、ページ自体は吐き出されているので、<MTIfNonZero tag="MTCategoryCount">を無視しても、構造自体は問題ない。

次はスタイルシートでデザインだ!!

ヘッダーメニュー 縦

ソースを組み込んで、すべてのページを再構築してみよう。Movable Type4デフォルトの状態からカスタマイズした場合は、左のスクリーンショットのように表示されていると思う。この状態の場合は、カテゴリは縦表示になっているし、ただ文字が並んでいるだけで、全く美しくない。ここからスタイルシートで横表示にさせて、メニューっぽくデザインしていこう。

スタイルシート

ul#menu-top {
margin-top: 10px;
background-color: #e0e0e0;
height: 23px;
margin-right: 40px;
padding: 5px;
border: 2px solid #f2f2f2;
}
ul#menu-top li {
width: 100px;
height: 20px;
background-color: #ab0404;
float: left;
margin-right: 5px;
color: white;
text-align: center;
border-bottom: 3px solid #600201;
line-height: 23px;
text-shadow: white 0 0 5px;
}
ul#menu-top li a {
color: white;
width: 100px;
height: 20px;
display: block;
text-decoration: none;
}
ul#menu-top li a:hover {
background-color: #600201;
border-bottom: 3px solid black;
}

少しごちゃごちゃしているが、上記のソースで重要なところは、ul#menu-top li の float: left;。これを書き込む事によって、<li>〜</li>が左に詰まっていくイメージをしてもらいたい。<li>に横幅を指定しない場合は、左から右までめいっぱい<li>の領域を作ろうとするので、<li>の横幅を
width: 100px; と記入して指定すると、うまく左に詰まってくれる。(必ずしも100pxにしないといけない訳ではない)

そのほかのソースは、<li>の色を指定したり、マウスオーバーさせた場合に色を変えてみたり、文字を中央に持って行き、縦の位置を調整したりしている。スタイルシートがよくわからない場合は、一つ一つのワードを検索してみると、勉強になるかもしれない。

ちなみに、先日エントリに書いたドロップシャドウも今回は組み込んでいる。下のスクリーンショットを見てもらうとわかるが、文字が白く光っていることだろう。SafariやOpera9.5以上のみサポートしないプロパティだが、ちょっとしたスパイス程度に組み込んでみるのも面白いと思う。

ヘッダーメニュー 完成

related story