Igaloglog

グローバルメニューで、現在のページのカテゴリメニューの色を変えたいとします。
基本的に、開いているページのカテゴリメニュー<li>にclass="self"みたいなクラスを付けてあげればいいんですが、これがDreamweaverのテンプレート機能を使っていたとしたら、そううまくはいきません。なんせ各カテゴリごとにいじれませんからな。
で、<li>にclass="self"付けたいからといって、仕方なくテンプレート外したり、メニュー周り編集可能領域にしたりすると、そこいらで修正が発生したときに非常に面倒くさい。なんとかならんもんか。

というわけで、Dreamweaverでテンプレート状態でありながら、現在のページの<li>にクラスをつける方法を。

Dreamweaverの「オプション領域」というものを使います。
「オプション領域」とは、作成したドキュメントにコンテンツの表示・非表示を制御することができるテンプレートオブジェクトです。

まず、テンプレートを開きます。
まあ、大体のメニュー周りは以下のようになっていることと思います。

<ul>
<li><a href="../index.html">HOME</a></li>
<li><a href="../page01.html">ページ01</a></li>
<li><a href="../page02.html">ページ02</a></li>
</ul>

この状態からまず、メニューをコピペし、2つを用意します。

<ul>
<li><a href="../index.html">HOME</a></li>
<li><a href="../index.html">HOME</a></li>
<li><a href="../page01.html">ページ01</a></li>
<li><a href="../page01.html">ページ01</a></li>
<li><a href="../page02.html">ページ02</a></li>
<li><a href="../page02.html">ページ02</a></li>
</ul>

こんな感じ。

1つ目の<li><a href="../index.html">HOME</a></li>を選択し、[挿入]→[テンプレートオブジェクト]→[オプション領域]をクリック。
出てきたダイアログで、「詳細」タブを選択し、「式を入力」の項目に、

category=='home'

と入力します。
同様に、もう1つの<li><a href="../index.html">HOME</a></li>を、今度は、

category!='home'

と入力します。
※違いは!マークの有無です。見落とさないように注意してくだされ。
そして、1つ目の<li>（!マークのないほう）に『 class=”self”』を追加します。

ソースは、

<!-- TemplateBeginIf cond="category=='home'" -->
<li class="self">
<a href="../index.html">HOME</a>
</li>
<!-- TemplateEndIf -->
<!-- TemplateBeginIf cond="category!='home'" -->
<li>
<a href="../index.html">HOME</a>
</li>
<!-- TemplateEndIf -->

こんなことになります。
※わかりやすく改行してますが、1行表記でももちろんOKです。

こんな感じで、category==’home’のhomeの部分をそれぞれメニューに合わせて換えながら、残りの<li>もオプション領域で囲んでいきます。
最終的なソースは、

<ul>
<!-- TemplateBeginIf cond="category=='home'" -->
<li class="self"><a href="../index.html">HOME</a></li>
<!-- TemplateEndIf -->
<!-- TemplateBeginIf cond="category!='home'" -->
<li><a href="../index.html">HOME</a></li>
<!-- TemplateEndIf -->
<!-- TemplateBeginIf cond="category=='page01'" -->
<li class="self"><a href="../page01.html">ページ01</a></li>
<!-- TemplateEndIf -->
<!-- TemplateBeginIf cond="category!='page01'" -->
<li><a href="../page01.html">ページ01</a></li>
<!-- TemplateEndIf -->
<!-- TemplateBeginIf cond="category=='page02'" -->
<li class="self"><a href="../page02.html">ページ02</a></li>
<!-- TemplateEndIf -->
<!-- TemplateBeginIf cond="category!='page02'" -->
<li><a href="../page02.html">ページ02</a></li>
<!-- TemplateEndIf -->
</ul>

こんなことになります。

上のソースでは、categoryの値が’home’であるならば、1つ目のオプション領域を表示し、categoryの値が’home’でなければ、2つ目のオプション領域を表示するよ、続いて以下略という指定がなされています。
まあ、IF文みたいなもんですね。
もし、categoryがhomeなら<li class="self"><a href="../index.html">HOME</a></li>が。もし、categoryがhome以外なら<li><a href="../index.html">HOME</a></li>が表示されます。
という感じです。

さらに、テンプレートのソースの</head>直前に、

<!-- TemplateParam name="category" type="boolean" value="true" -->

という1文が追加されていますので、これを、

<!-- TemplateParam name="category" type="text" value="" -->

と修正します。

これで、テンプレートの作成は完了。

続いて、各カテゴリでテンプレートプロパティを修正します。
[修正]→[テンプレートプロパティ]をクリック。
トップページの場合、[category]の値をhomeにします。
ページ01の場合、[category]の値をpage01にします。……
グローバルメニューに絡むページは全部修正します。

全ページなんで、すでにページいっぱいの人は面倒でしょうが我慢しましょう。
メニューをテンプレートから外しちゃうより、後々ラクチンです。

あとは、CSSで.selfに背景色を指定するだけです。
これで、現在のページのカテゴリの色を変えることができるようになります。

いやー大変だった。おつかれ！