このコーナーでは、テンプレートのカスタマイズについて、実際のサンプルページを元に紹介していきます。

皆さん、こんにちは。 おちゃのこネットの刑部です。
今回のデザイン道場は、カテゴリ用のデザインを利用してメニューを作成する方法です。
※カテゴリ一覧をスタイルシートで非表示にしている場合は、表示されません。
※カテゴリ一覧のデザインをカスタマイズされている場合は、そのデザインで表示されます。

http://cafe0808.ocnk.net/



自由記入欄にhtmlタグを貼り付ける

管理画面→デザイン管理→画像とコメントの設定ページから自由記入欄に下記のhtmlタグを貼り付けてください。


<div class="side_box">
<div class="category_title">
<h3>タイトル</h3>
</div>
<div class="category_list">

<ul>
<li>
<span class="mcategory">
<a href="リンク先">メインカテゴリ※サブカテゴリなし</a>
</span>
</li>

<li>
<span class="mcategory">
<a href="#" onclick="OpenCategory('folder101'); return false;">メインカテゴリ1</a>
</span>
<ul class="folder101" id="folder101" style="display:block">
<li><a href="リンク先">サブカテゴリ1</a></li>
<li><a href="リンク先">サブカテゴリ2</a></li>
</ul>
</li>

<li>
< span class="mcategory">
<a href="#" onclick="OpenCategory('folder2'); return false;">メインカテゴリ2</a>
</span>
<ul class="folder2" id="folder2" style="display:block">
<li><a href="リンク先">サブカテゴリ1</a></li>
<li><a href="リンク先">サブカテゴリ2</a></li>
</ul>
</li>

</ul>
</div>
</div>


※この指定により、縦スクロールが表示される場合があります。

タイトル

このメニュー群のタイトルとなります。
テキストを設定してください。

リンク先

各メニューのリンク先となります。
http://～のURLを設定してください。

メインカテゴリ※サブカテゴリなし

サブカテゴリのないメニューとなります。
通常のリンクメニューです。

メインカテゴリ

サブカテゴリを2つ含むメインカテゴリとなります。
開閉表示を行うことが可能です。
名称をテキストで設定してください。

※開閉用の指定について
onclick="OpenCategory('folder101')

<ul class="folder101" id="folder101" style="display:block">

上記2か所に3か所記載のあるfolder101は、各メインカテゴリに必要となります。
※この名称は重複しないように設定してください。
※既存のカテゴ一覧を非表示にせずご利用いただく場合は、重複を避けるため、folder100等の大きい数字をご利用ください。


サブカテゴリ

サブカテゴリとなります。
名称をテキストで設定してください。

メインカテゴリの<ul>タグ内の<li>タグを追加することでサブカテゴリの追加が可能です。



なお、メニューの追加は、下記のようにメインカテゴリ3のように追加いただくことで、
いくつでも追加することができます。

<div class="side_box">
<div class="category_title">
<h3>タイトル</h3>
</div>
<div class="category_list">

<ul>
<li>
<span class="mcategory"><a href="リンク先">メインカテゴリ※サブカテゴリなし</a></span>
</li>

<li>
<span class="mcategory">
<a href="#" onclick="OpenCategory('folder101'); return false;">メインカテゴリ1</a>
</span>
<ul class="folder101" id="folder101" style="display:block">
<li><a href="リンク先">サブカテゴリ1</a></li>
<li><a href="リンク先">サブカテゴリ2</a></li>
</ul>
</li>

<li>
< span class="mcategory">
<a href="#" onclick="OpenCategory('folder102'); return false;">メインカテゴリ2</a>
</span>
<ul class="folder102" id="folder102" style="display:block">
<li><a href="リンク先">サブカテゴリ1</a></li>
<li><a href="リンク先">サブカテゴリ2</a></li>
</ul>
</li>

<li>
< span class="mcategory">
<a href="#" onclick="OpenCategory('folder103'); return false;">メインカテゴリ3</a>
</span>
<ul class="folder103" id="folder103" style="display:block">
<li><a href="リンク先">サブカテゴリ1</a></li>
<li><a href="リンク先">サブカテゴリ2</a></li>
<li><a href="リンク先">サブカテゴリ3</a></li>
<li><a href="リンク先">サブカテゴリ4</a></li>
</ul>
</li>

</ul>
</div>
</div>


　
なお、お問い合わせは下記ページからお願い致します。

https://www.ocnk.net/contact/index.php

Copyright (C) 2004-2006 OCHANOKO-NET All Rights Reserved.