チュートリアル番外編 当テンプレ限定 メガメニュー追加方法

1) 当サイトのテンプレートはヘビーライターさんに向けて、メガメニューが用意されています。メガメニューは書いているジャンルや相手が非常に多い場合に使用すると、閲覧者がその目的の場所へと適切に跳ぶことができるので便利です。

2) メガメニューを表示させるには、メニュー部分のタグ編集をする必要があります。例として、テンプレートのメニュー部分がこのようになっているとします

<ul id="menu">
	<li><a href="about.html">about</a>
	<li><a href="dream.html">novel</a>
	<li><a href="gallery.html">gallery</a>
	<li><a href="#">memo</a>
	<li><a href="#mail">mail</a>
	<li><a href="#link">link</a>
</ul>

このnovelにメガメニューを追加するとこうなります。

<ul id="menu">
	<li><a href="about.html">about</a>
	<li><span class="mega">novel</span>
		<ul>
			<li><a href="dream.html#shiori1">ジャンル1</a>
			<li><a href="dream.html#shiori2">ジャンル2</a>
			<li><a href="dream.html#shiori3">ジャンル3</a>
		</ul>
	<li><a href="gallery.html">gallery</a>
	<li><a href="#">memo</a>
	<li><a href="#mail">mail</a>
	<li><a href="#link">link</a>
</ul>

3) novel関係のところだけにするとこうなります。

<li><span class="mega">novel</span>
		<ul>
			<li><a href="dream.html#shiori1">ジャンル1</a>
			<li><a href="dream.html#shiori2">ジャンル2</a>
			<li><a href="dream.html#shiori3">ジャンル3</a>
		</ul>

hrefの部分の『dream.html#shiori1』などはdream.htmlにある、ページ内リンクshiori1に跳ぶという意味ですので、こちらはあなたに合ったリンクに書き換えてください。ページ内リンクが分からない方はこちらを閲覧ください。

4) ちなみに、メガメニューを2つ並べるとこのようになります。

<ul id="menu">
	<li><a href="about.html">about</a>
	<li><span class="mega">novel</span>
		<ul>
			<li><a href="dream.html#shiori1">ジャンル1</a>
			<li><a href="dream.html#shiori2">ジャンル2</a>
			<li><a href="dream.html#shiori3">ジャンル3</a>
		</ul>
	<li><span class="mega">gallery</span>
		<ul>
			<li><a href="gallery.html#shiori1">ジャンル1</a>
			<li><a href="gallery.html#shiori2">ジャンル2</a>
			<li><a href="gallery.html#shiori3">ジャンル3</a>
		</ul>
	<li><a href="#">memo</a>
	<li><a href="#mail">mail</a>
	<li><a href="#link">link</a>
</ul>

5) 最後にメガメニュー雛形

<li><span class="mega">跳ぶページのタイトル</span>
		<ul>
			<li><a href="跳ぶURL">サブタイトル</a>
			<li><a href="跳ぶURL">サブタイトル</a>
			<li><a href="跳ぶURL">サブタイトル</a>
			<li><a href="跳ぶURL">サブタイトル</a>
			<li><a href="跳ぶURL">サブタイトル</a> <!-- ←好きなだけ行を追加 -->
		</ul>