MTタグ逆引き辞典

フォルダの階層毎にスタイルを適用する

フォルダとウェブページを使ってメニューを作成する場合、階層が深い場合はインデントして表示する、といった見せ方をしたい場合があります。

フォルダメニュー

今回はテーマPublic Organizationで実現している「3階層目」にCSSを反映させる方法をご紹介します。

テンプレート記述例

まず、メニュー部分のソースでサブフォルダを実現する以下の部分があります。

<mt:SubFolders>
<li class="depth-<$mt:FolderDepth$>">

ポイントはmt:FolderDepthというタグで、現在のフォルダが何階層目か?というのを数字で表示してくれるものになります。
※ mt:FolderDepthタグは、現在はMovableType.netのみのタグとなり、ソフトウェア版にはありません。

これによってクラス名が2階層目ならdepth-2、3階層目ならdepth-3と出力されるのでそれにあわせてスタイルを設定できるようになります。

例えば、Public OrganizationのPC版メニューでは以下のように3階層目だけにCSSを設定しています。

.top-bar-section .f-dropdown .depth-3 {
   margin-left: 15px;
    width: 235px;
}
.top-bar-section .f-dropdown .depth-3 li {
    width: 235px;
}

上記のようにフォルダの階層によってクラス名を出力できるので、以下の記事と組み合わせて応用するば「3階層目にあるウェブページは1カラムにする」といったことも実現可能です。
参考:特定のフォルダ内のウェブページのレイアウトを変更する

使用したMTタグはこちら

Movable Type.net は無料トライアルが可能です。
Web制作者の方で、デモや評価利用をご希望の場合は、制作者向け評価ライセンスをご利用ください。

無料トライアル 資料ダウンロード 制作者向け評価ライセンス