LIQUID DESIGN Tech Blog

XOOPSで使えるテンプレート変数を利用したナビゲーションデザイン

CMS, WebDesign

XOOPSで使えるテンプレート変数を利用した、サイトナビゲーションのデザインについて紹介します。

モジュール固有のidを追加

まず、モジュール固有のidをbodyなどに追加します。
下記のようなテンプレート変数を利用することで、idを追加することができます。
基本的には、モジュール内の全てのページに適用されます。
これだけで、簡単にCSSでモジュールごとに異なるデザインを適用できるようになります（CSSシグネチャ）。

下記は、モジュールの、myAlbum-Pを「マイアルバム」、Xoops Yomi-Searchを「リンク集」という名前で
利用している場合のサンプルです。

<body <{if $xoops_pagetitle eq ""}> id=&#8221;index&#8221;<{/if}><br /> <{if $xoops_modulename eq "マイアルバム"}> id=&#8221;myalbum&#8221;<{/if}><br /> <{if $xoops_modulename eq "リンク集"}> id=&#8221;yomi&#8221;<{/if}><br /> >

ナビゲーションをCSSでデザイン

例えば、サイトナビゲーションのモジュールリンク部分を、
モジュール内のページでは常に選択状態のようなデザインにすることも簡単にできます。
xoopsnavi.jpg
ナビゲーション部分のHTMLサンプル。

</p> <ul id="navi"> <li id="n_top">TOP</li> <li id="n_myalbum">アルバム</li> <li id="n_yomi">リンク集</li> </ul> <p>
デザインのCSSサンプル（抜粋）。
#navi li {background-color:#EEEEEE;}<br /> #index #navi li#n_top {background-color:#FFFFFF;}<br /> #myalbum #navi li#n_myalbum {background-color:#FFFFFF;}<br /> #yomi #navi li#n_yomi {background-color:#FFFFFF;}

上記のように、CSSだけで、モジュール単位のデザイン変更ができるようになります。

この記事を書いた人
LIQUID DESIGN のサービスに関するデザインや技術情報を発信します。
https://lqd.jp/
SNSでフォローする
関連記事
人気記事
WordPressテーマ LIQUID MAGAZINE を使用しています
サービス
アプリがいらない！LIQUID AR/VR
フォローする
liquid
LIQUID DESIGN のサービスに関するデザインや技術情報を発信します。
https://lqd.jp/

本サイトはプロモーションが含まれています。