ABCK
アジアンビートカンケリキッズ
2005-04-24
■ [custom] 折りたたみメニュー
姉妹カスタマイズ : プラグインの折りたたみ
基本となるJavaScript（以下js）はfrom DFJの折りたたみメニューから使わせて頂きます。
この『折りたたみメニュー』の導入結果は、共有テンプレートに登録したimitationで試してみてください。
jsを写す
HTMLの<head>から</head>の間に以下を挿入します。
HTMLを変更する - ボタン設置
折りたたみメニューを設置する場所を指定するために、【<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>の中）にメニュータイトルを表記します。
HTMLを変更する - メニューを囲む
開かれる＆閉じられるメニューを囲みます。上項で設置・変更したボタンの下にメニュー本文があるので、折りたたむ部分（通常は単体メニューひとつ）を<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の共存は可。
Comment
このお話も参考にしてもうしばらく頑張ってみます。あいがとうございました。
HTMLでは、ソースの上の方の
<ul class="navi" id="menu_list">
のリストがポップアップのボタンに、またエントリー郡下の
<!--SEARCH-->〜<!--/SEARCH-->
<!--MENU-->〜<!--/MENU-->
などがポップアップするボックスに当たります。
私がポップアップメニューを組み込んだときには、何回もプレビューして位置をズラしていく、という作業を繰り返していたので、何かを考えたり覚えたりしなくても良い、というのは利点かもしれないです。もちろんCSSのpositionについてある程度理解しなければならないという条件はありますが。
もっと簡単な方法としては、公開されているテンプレートでポップアップメニューが使われているものもあるので、そちらをリメイク・参考にするというのも手です（ポップアップ等で検索）。
現在、jugemのanalogueというテンプレートでブログ（http://monk.jugem.cc/）をやっているのですが1枚当りの画像ファイルの容量が少なくfc2に乗りかえたいと思っているものです。
jugemのテンプレートが気に入っているので、fc2で似た形にカスタマイズ中なのですが、メニューについてこのエントリーを参考にさせていただき、チャレンジしましたが、折りたたみとポップアップがjugemのようにうまくいきません。
折りたたみはできたのですが、メニューをクリックした時のポップアップ画面の位置がメニュータイトルの場所と連動しないことと、何か一つのメニューをクリックしたまま他メニュータイトルをクリックすると、ポップアップ画面が次々と同じ場所でかぶってしまうことです。
当方、見よう見真似でカスタマイズを勉強中なのですが、javascriptについてはまだわかっておりません。
お忙しいところ恐縮ですが、何かわかりやすい方法を教えていただければ幸いです。m(_ _)m
当方のfc2のurlはhttp://monocro7.blog91.fc2.com/
です。
よろしくお願いいたします。
任意の数字は記事本文にあるように、HTMLソースの中で上から順に増えていけばいいだけなので十の位がいくつでも平気です。
図々しいついでにもう２・３伺ってもよいですか？
私は３カラムなんですが、両脇に折りたたみを使いたい場合、どちらも『"fo0"』で良いのでしょうか？
それとXXの任意の数字は、十の位がいくつでも良いのでしょうか？
(例えば･･･72・64・21・93 など)
お時間のある時でいいので、教えていただけたら嬉しいです。
<td valign=top class=menu>
を
<!-- ▼左メニュー -->
<td valign=top class=menu id="fo0">
にして、折りたたみたいメニューの
<div class="mnttl">メニュータイトル</div>
を
<div class="mnttl"><a href="javascript:void(0)" onclick="dd('foXX')">メニュータイトル</a></div>
にして、その下の
<div class="mnbody">
を
<div class="mnbody" style="display:none" id="foXX">
に変更してください（XXは任意の数字）。これで畳まれる…はずです。
３カラムのテンプレを使っているのですが、今また[white-gray-sq]に変更中で、メニューの折り畳みをしたくてこちらに辿り着きました。
このテンプレはCSSで<div id>設定がなく、見よう見まねでやってみたのですが上手く開いてくれません。
お忙しいと思いますが、教えていただけると嬉しいです。
今後プラグインに適したスクリプトを見つけたら個別のエントリとして公開or紹介する予定です。ですので、今はサポートフォーラムの方でお訊きください。すみません。
折りたたみをしたくてbiscoさんのところに辿り着きました。
早速質問なんですが
私は登録テンプレの「yugami-0mini-plugin」を使ってます。
このテンプレにはHTMLに↑の<h3>〜〜のタグが記入されてないんです。
そう言う場合は、「プラグインの編集」→「HTMLの設定」にbiscoさんのタグを追記するのが良いのかと思ってやってみたんですが・・・・撃沈でした(TT;)ｸﾞｽﾝ
もう一つはそのプラグイン編集のHTML設定のタグをそっくりそのまま
テンプレ編集画面のHTMLの中にコピーしてから
↑のようにやってみたんですが、全然ダメでした。
やり方が悪かったんでしょうか？
何か良い方法があったら教えてくださいませ。
お忙しいかと思いますがヨロシクお願いします！
a img { border: none; } を入れたら、解決しました♪
お忙しい中、本当にありがとうございました。
a img { border: none; }
と入れてみてください。ダメだったら
a:link img, a:hover img, a:active img, a:visited img { border: none; }
と入れてみてください。
こちらを参考にさせていただき、テンプレートの「blue」の折りたたみに挑戦しています。
どうしても解決できない問題があるので、質問させていただきます。
画像を<img>タグで囲んだまではいいのですが、
そうすると、画像の外側にリンクの枠？ができてしまいます。
コレをなくすにはどうしたらいいのか教えていただけだけますか？
よろしくお願いいたします。
こちらを参考にしてメニュー折りたたみが無事できました！
とても分かりやすかったです＾＾ 本当にありがとうございました。
biscoさんのブログはいつ来てもデザインがかわいらしくて憧れです！！
記事のおかげで折りたたみメニューを作ることができました。ほんとアリガトーー
参考にさせて頂きました。
とてもわかりやすい説明です^^
ありがとうございました。
スレ汚し申し訳ない。
biscoさんの記事を参照して折りたたみメニューにしてみました。
テンプレートは「monotone」を使用していますが、リストの表示に画像が使われていて、折りたたみにするとその画像が表示されなくなりました。
何とか表示させようと原因を考えたのですが、つかめません。
（どうしても表示させたいわけではないのですが、原因がわからないと気持ち悪かったので）
引き続きいろいろ試してみますが、お時間のある時にでもお知恵を拝借できればと思い、書き込みいたしました。
よろしくお願いします。
アドバイスを参考にしながら悪戦苦闘したのですが、結局、公開テンプレートをカスタマイズすることで何とか完成しました。
javascriptの勉強もしなくちゃいけないと思う今日この頃です。どうもありがとうございました。