blog*citron

JUGEMカスタマイズ講座さんの折り畳みスクリプトの開閉ボタンをアイコンにするカスタマイズ。

まず下記URLの折り畳みスクリプトを導入します。
説明に従って導入したら、まず正常に動いているか動作確認をして下さい。

• ナビゲーションの折り畳みスクリプト | JUGEMカスタマイズ講座

では次にアイコン画像を使うために、スクリプトを一部書き換えます。
このスクリプトの最後の方に下記のような記述があります。

for (i=0;i<objMarks.length;i++) {
if (objMarks[i].className == 'foldmark') {
objMarks[i].firstChild.nodeValue = (dispMode == 'none') ? closeMark : openMark;

ここのfirstChild.nodeValueのところを、innerHTMLと書き換えます。

for (i=0;i<objMarks.length;i++) {
if (objMarks[i].className == 'foldmark') {
objMarks[i].innerHTML = (dispMode == 'none') ? closeMark : openMark;

次に、マーク部分にアイコン画像を呼び出すためのタグを入れます。
アイコン画像は予め用意してアップロードしておきましょう。

var openMark = '▽'; /* 閉じている場合に開くためのマーク */
var closeMark = '△'; /* 開いている場合に閉じるためのマーク */
var preMark = true; /* マークの挿入位置。タイトルの前なら true、タイトルの後ろなら false */

ここの△と▽の変わりにそれぞれIMGタグを入れていきます。

var openMark = '<img src="画像のURL" width="横幅" height="縦幅" class="naviBtn" alt="OPEN" />'; /* 閉じている場合に開くためのマーク */
var closeMark = '<img src="画像のURL" width="横幅" height="縦幅" class="naviBtn" alt="CLOSE" />'; /* 開いている場合に閉じるためのマーク */
var preMark = true; /* マークの挿入位置。タイトルの前なら true、タイトルの後ろなら false */

旧sbなら画像のURLは絶対パス（httpから始まるURL）で指定しましょう。
Serene Bachなら{site_parts}を利用すると便利です。

アイコンのサイズによってはメニュー名のテキストと不揃いになることも。フォントサイズと同じ位か、一回り小さめサイズだと見た目のバランスが良いと思います。 大きさを合わせるにこしたことはないですが、多少はCSSで誤魔化せます。
CSSはサンプルなので、お使いのアイコンに合わせて調整して下さい。

img.naviBtn {
border: 0;
vertical-align: middle; /* 縦位置をセンタリング */
margin: 0 3px; /* 左右に3pxの余白（文字にくっつきすぎないため） */
}

スクリプトが上手く動かない場合は、ナビゲーションの折り畳みスクリプトの記事のコメント欄で質問や回答が出揃っているので、目を通してみることをおすすめします。