アジアンビートカンケリキッズ
姉妹カスタマイズ : プラグインの折りたたみ
基本となるJavaScript(以下js)はfrom DFJの折りたたみメニューから使わせて頂きます。
この『折りたたみメニュー』の導入結果は、共有テンプレートに登録したimitationで試してみてください。
HTMLの<head>から</head>の間に以下を挿入します。
折りたたみメニューを設置する場所を指定するために、【<div id="fo0">】と【</div>】で囲む必要があります。サイドバーに設置する場合は、サイドを囲んでいるタグ*1の下に<div id="fo0">を、サイド囲みの終了タグ(</div>)の上に</div>を挿入します。
次にたたんだメニューを開く&閉じるためのボタンとなるものを決めます。ここでは『メニュータイトルをクリックして開く』ことを基本に進めます。
ボタンになる文字を通常のリンクのように<a href="javascript:void(0)" onclick="dd('fo01')">と</a>で囲みます。メニュータイトルが【<h3>最新記事</h3>】の場合は<h3><a href="javascript:void(0)" onclick="dd('fo01')">最新記事</a></h3>となります。<h3>の部分はテンプレによって違うので、他の例はサイドカスタマイズでいくつか見られるので参考にしてください。
ボタンを画像にしたり、■などのボタン風文字にすることもできます。画像にする場合はリンク文字を<img>タグに変えます。■にする場合はリンク文字を■にして、<a>タグの前か後ろ(<h3>の中)にメニュータイトルを表記します。
開かれる&閉じられるメニューを囲みます。上項で設置・変更したボタンの下にメニュー本文があるので、折りたたむ部分(通常は単体メニューひとつ)を<div style="display:none" id="fo01">と</div>で囲みます。
また、この『折りたたみメニュー』はjsを使用するため、閲覧者の中にはjsをOFFにしていることがいることも考え【<noscript>】*2を使います。最新記事の場合は以下のようになります。
<h3><a href="javascript:void(0)" onclick="dd('
fo01')">最新記事</a></h3>
<div style="display:none" id="fo01">
<ul>
<!--recent-->
<li><a href="<%recent_link>"><%recent_title></a></li>
<!--/recent-->
</ul>
</div>
<noscript>
<ul>
<!--recent-->
<li><a href="<%recent_link>"><%recent_title></a></li>
<!--/recent-->
</ul>
</noscript>
注意すべきところがあります。【onclick="dd('fo01')"】と【id="fo01"】のfo01という部分です。これはボタンと開くメニューを一致させるもので、ページ内に同じものがあってはいけません。なのでメニューごとにfo02、fo03と変えなければいけません。また数字は上から順番に大きくならなくてはいけません(はず)*3。
最初は閉じずに表示しておき、ボタンをクリックすることで閉じることができるようにすることもできます。メニューを囲んだタグのstyle="display:none"を消すことで可能になります。
最後におまけとして、公式テンプレの中でもシェアが高く、サイドメニューの構成もシンプルな[black]の改変例を記します。blackはサイド囲みのタグが運よく【<div class="right">】だった*4ので、それを<div class="right" id="fo0">に変えてください。
質問・注意などはコメント欄へどうぞ。恐縮ですが「参考にしました」などのお礼のコメントはトップページ下のメールフォームから送っていただけると嬉しいです。
*1 CSSでサイドの指定部分に#rightと指定してあれば、HTMLでは<div id="right">となっています。これはテンプレによって違うので確認をしてください。
*2 jsが動作しない場合、代わりに表示するHTMLを囲むためのタグ。
*3 数字が大きくなりさえすればいいので、02,04,06と飛んでもいい。こうしておけば後で新しくメニューを加えるときに楽。
*4 idは2つ指定することができない。classとidの共存は可。