現在見ているページのメニューの色を変更（ハイライト）する方法
更新日：2016年7月10日
現在見ているページのメニューの色を変更させたいことってありますよね。行き慣れたサイトであれば別ですが、初見のサイトであれば、自分が一体今メニューの何処に属するページを見ているのかが視覚的にパッと分かるとユーザーは使いやすいです。
それでは現在見ているページのメニューの色を変更する方法ですが、Dreamweaverのテンプレート機能のオプション領域を使います。ですので、Dreamweaverを使用していて、尚且つテンプレート機能でメニューを管理していることを前提とした記事ですので、ご了承下さい。
○○.dwtのテンプレートファイルを編集していきます。
また、作業に入る前にバックアップ推奨です。念の為。
まず、Dreamweaverのメニューの「挿入」→「テンプレートオブジェクト」→「オプション領域」を選択し、任意の名前を入力し、「初期設定では表示」のチェックを外した上で「OK」をクリック。これでオプション領域が利用可能になり、2つのソースが挿入されました。
任意の名前を仮に「menu1」とした時に挿入される2つのソースが下記になります。
<!-- TemplateParam name="menu1" type="boolean" value="false" --> <!-- TemplateBeginIf cond="menu1" -->menu1
一見2行目のソースしか挿入されていないように見えるのですが、実は1行目のソースもheadタグの中にこそっと勝手に挿入されています。
<head> <!-- TemplateParam name="menu1" type="boolean" value="false" --> </head> <body> <!-- TemplateBeginIf cond="menu1" -->menu1 </body>
↑全体的な構図でいうと、こんな感じになっています。
上記の2つのソースが挿入されていることを確認したら、下記のように色を変更したい箇所のメニューのソースを入れます。タグに囲まれていたmenu1の文言を書き換えましょう。今回の例ではmenu1.jpgという画像をメニューの部品として使用している例です。下記のように記述します。今回の例としているだけですので、勿論画像でなければ駄目という訳ではありません。
※<!-- TemplateParam name="menu1" type="boolean" value="false" -->の箇所は変更しませんので、下記以降の説明から記述は省きます。
<!-- TemplateBeginIf cond="menu1" -->
次に1行目のソースをコピーしてすぐ下に貼り付け。
1行目のcond="menu1"をcond="!menu1"と「!」を書き足します。
そして2行目のソース（＝1行目のコピー）のmenu1.jpgを色を変更した際の画像に置き換えます。今回の例ではmenu1_change.jpgとしています。
下記のようになります。
<!-- TemplateBeginIf cond="!menu1" -->
これで下準備は完了です。
ここまでしてきたことを簡単に説明しますと、通常時にはmenu1.jpgを表示させ、色を変更した際にはmenu1_change.jpgを表示させるように切り替えるといった設定をしていました。
これまでの要領でメニューの数の分だけ同じ操作を繰り返します。任意の名前は「menu2」「menu3」といった具合に被らないようにだけ注意して下さいね。
そして完成した全体的な構図のものが下記になります。
<head> <!-- TemplateParam name="menu1" type="boolean" value="false" --> <!-- TemplateParam name="menu2" type="boolean" value="false" --> <!-- TemplateParam name="menu3" type="boolean" value="false" --> </head> <body></body><!-- TemplateBeginIf cond="!menu1" -->
- <!-- TemplateBeginIf cond="menu1" -->
- <!-- TemplateBeginIf cond="!menu2" -->
- <!-- TemplateBeginIf cond="menu2" -->
- <!-- TemplateBeginIf cond="!menu3" -->
- <!-- TemplateBeginIf cond="menu3" -->
ここで一回テンプレートファイルは閉じて貰って、あとはメニューの色を変更したいページをそれぞれ編集します。テンプレートファイルを編集したことによってheadタグに記述されている
<!-- TemplateParam name="menu1" type="boolean" value="false" -->
<!-- TemplateParam name="menu2" type="boolean" value="false" -->
<!-- TemplateParam name="menu3" type="boolean" value="false" -->
のfalseの値のいずれtrueに変更します。trueにする値はそれぞれの現在見ているページに連動したメニューと連動している箇所です。
編集がし終わりましたら、最後におおもとのテンプレートファイルを更新します。
更新する箇所がなかったとしても、スペースを入れるだけでも良いので何かしら更新する必要があります。これをしないと反映されないので要注意です。
私も未だにこれをし忘れて「あれ？記述は合ってるはずなのになんで反映されないんだろ…」って事態によく陥りますので。
以上で完成しました！完成したら当サイトHTML・CSS・jQuery・PHPを徹底解説！【Web担当者の作り方】のように、記事内容によってメニューの色が変更されるようになります。
今回の記事はかなり長くてややこしい内容になってしまいましたが、いかがでしたでしょうか？
結構上級者向けの内容ですので挑戦してみたい方だけ挑戦してみて下さいね！
