このエントリーをはてなブックマークに追加

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

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

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

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

下記は、モジュールの、myAlbum-Pを「マイアルバム」、Xoops Yomi-Searchを「リンク集」という名前で 利用している場合のサンプルです。 <body <{if $xoops_pagetitle eq ""}> id="index"<{/if}> <{if $xoops_modulename eq "マイアルバム"}> id="myalbum"<{/if}> <{if $xoops_modulename eq "リンク集"}> id="yomi"<{/if}> >

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

例えば、サイトナビゲーションのモジュールリンク部分を、 モジュール内のページでは常に選択状態のようなデザインにすることも簡単にできます。 xoopsnavi.jpg ナビゲーション部分のHTMLサンプル。 <ul id="navi"> <li id="n_top">TOP</li> <li id="n_myalbum">アルバム</li> <li id="n_yomi">リンク集</li> </ul> デザインのCSSサンプル(抜粋)。 #navi li {background-color:#EEEEEE;} #index #navi li#n_top {background-color:#FFFFFF;} #myalbum #navi li#n_myalbum {background-color:#FFFFFF;} #yomi #navi li#n_yomi {background-color:#FFFFFF;}
上記のように、CSSだけで、モジュール単位のデザイン変更ができるようになります。

WordPressテーマ配布しています

レスポンシブWordPressテーマ LIQUID PRESS

BLOGを購読する

Twitter