<$MTCategoryBasename$>を使って,カレントディレクトリの時のメニュー表示をCSSで切り替える方法を紹介しています。
前回の内容は、カテゴリページにて<$MTCategoryBasename$>を使ってのカテゴリー毎の表示変更の方法でした。今回は、このエントリータグを使ってCSSでメニュー表示変更の方法です。カテゴリーページにてカレントディレクトリの時のメニュー表示を切り替える方法となります。いろいろと試してみたらうまくいきましたのでご紹介しておきます。
カレントディレクトリの時のメニュー表示：ユーザーが閲覧しているカテゴリにて、そのカテゴリーのメニュー表示だけを変えて、今どこの階層にいるかを認識してもらう方法です。わかりやすく言えば、Amazonで各ショッピング部門にいるときもメニューの帯とメニューボタンの表示がその部門にいるという表示になるかかと思います。その方法をこちらにてご紹介します。
この方法を使えば、ユーザーが今自分がどのカテゴリーを閲覧しているかをわかってもらえます。
本当は、Amazonのようなメニューで説明する方がいいのでしょうが、デフォルトメニューでご紹介しておきます。
カレントディレクトリのCSS切り替えコード
下記はデフォルトのコードになります。このコードに<$MTCategoryBasename$>を２箇所追加します。
<div class="module-conten <$MTCategoryBasename$>">
上記のdiv要素に<$MTCategoryBasename$>を追加します。module-contenとの間に半角スペースを空けます。
<li class="module-list-item" id="<$MTCategoryBasename$>"><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a>
上記のli要素にid指定で<$MTCategoryBasename$>を設定します。
以下のようなコードになります。
このコードでCSSでカレントディレクトリの場合の切り替え表示を設定します。
CSSの設定は、個々のカテゴリー名によってことなりますので、例を使って説明します。
cat1,cat2,cat3のメインカテゴリがあり、各メインカテゴリにサブカテゴリsubcat11,subcat12,subcat21,subcat22,subcat31,subcat32があるとします。
生成されるカテゴリーリストは以下のとおりになります。
- cat1
- subcat11
- subcat12
- cat2
- subcat21
- subcat22
- cat3
- subcat31
- subcat32
例えば、上記のカテゴリーリストでカレントディレクトリの時の文字の色を赤に設定する場合は、以下のようになります。表示方法は、いろいろとあると思います。以下のようなパターンでCSSを設定することでカレントディレクトリのカテゴリ表示を切り替えることが可能です。
上記で気をつけることは、サブカテゴリがメインカテゴリと同じ設定になります。これは、デフォルトのテンプレートタグでカテゴリリストを生成した場合、親カテゴリのli要素の中の指定に従うことになります。先ほどの例を、テンプレートタグで生成されるコードは、以下のようになります。(リンク先などtitleタグも省きます。
上記のコードは、カテゴリー「cat1」のときに生成されるコードとします。subcat11とsubcat12は、cat1のli要素に入りますので、一緒にCSSの指定を受けることになります。サブカテゴリーも同じ扱いをされたくないので、以下のような個別のCSSの設定もしておかなければなりません。
上記の設定でいろいろと試してみてください。文字の色を変えたり、背景を指定したりといろんな表示をすることが可能です。 デフォルトのテンプレートにて表示確認してあります。
コメントする