トップページ > スタイルシート > 右サイドメニューに「小見出し」をつける NO.56

右サイドメニューに「小見出し」をつける NO.56

2006年05月08日
右サイドメニューの「Customizing Menu」の項目が増えてきたので、「小見出し」を付けることにします。作業はメニューモジュールに小見出しのテキストを追加してスタイルシートで装飾します。


ここで大事なのは、「カテゴリー一覧で特定のカテゴリーを表示・非表示にする」プラグインです。そのままカテゴリーを表示させるタグを記述すると小見出しがつけられません。このプラグインで小見出しの下に表示するカテゴリーをコントロールします。サブカテゴリーを使う方法もあると思いますが、タグが複雑になるしサイトの構成も複雑になるので私はこの方法ですっきりシンプルに行きます♪


右サイドはモジュール化してあるので、モジュール・テンプレートの「menu」を編集します。「Cutomizing Menu」の部分のソースは下記のように記述します。


「class="menu"」で外枠を「class="munutitle"」で枠の見出しのスタイルを指定しています。新しく「class="midashi"」を指定して、小見出しのスタイルをあとで指定します。ソースの内容は「プラグイン【FilterCategories】の設置」を参考にしてみてください。<!--ここから・・・-->~<!・・・ここまでがひとつのかたまり-->を繰り返しかつ表示させるカテゴリーを選択することによって、見やすいメニューが作れると思います。


【変更後のソース】
<div class="menu">
<div class="menutitle">CUSTOMIZING</div>
<!--ここから・・・-->
<div class="midashi">インデックス・テンプレート</div>
<MTCategories show_empty="1">
<MTFilterCategories include="カテゴリーA">
<ul>
<li><a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel pmhc=""$>(<$MTArchiveCount$>)</a></li>
</ul>
</MTFilterCategories>
</MTCategories>
<!・・・ここまでがひとつのかたまり-->
<div class="midashi">アーカイブ・テンプレート</div>
<MTCategories show_empty="1">
<MTFilterCategories include="カテゴリーB|カテゴリーC">
<ul>
<li><a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel pmhc=""$>(<$MTArchiveCount$>)</a></li>
</ul>
</MTFilterCategories>
</MTCategories>
</div>


« フッターの背景色を変更 NO.55 | トップページ | 右サイドメニューのリストマークを変更する NO.57 »