blog*citron

sb/Serene Bachのテンプレート、blogカスタマイズTipsや素材と、アンテナに引っかかったものを勢いのままに書き綴るブログ

Home > tips > Here!

ナビバーの位置を変更する >>

date: 050129

category:: tips
author:: ユヅ

折り畳みスクリプトの開閉ボタンを画像にする

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

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

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

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

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

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

for (i=0;i&lt;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の余白（文字にくっつきすぎないため） */
}

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

Related Archive

Comments

コメントエリアをスクロールする / スクロールを解除する

050129
Rie

こんばんは。
先ほどはコメント＆アドバイス
ありがとうございました。
アホなことにimgタグではなく
画像のURLをそのままベタ打ちしており
ずっと出ない出ないと悩んでいたのでした（苦笑）

位置調整の方も挑戦してみます。
本当にありがとうございましたm(__)m

050129
ユヅ

●Rieさん
無事出来たようで良かったです～☆
イメージタグだけでは動かない場合もあるそうなので、まじめにエントリを書いてみた次第です（笑）
頑張ってくださいね～(*´∀｀)

050131
miki

ユヅさん、またもやこんにちは♪
オマケの開閉スイッチを使わせていただきました！
こちらのエントリを参考にすぐにできました。
お陰でスッキリです！ありがとうございました♪

050131
ユヅ

●mikiさん
こんにちはー。
参考になってよかったですー。エントリ化しておいた甲斐がありました。
他にもエントリー化してほしいことなどありましたらお気軽にいってくださいね～

050211
じゅん

はじめまして。
私はＪＵＧＥＭを利用しているのですが、こちらのｓｂテンプレートの開閉ボタンだけ利用したいのですが…。
ど、どうでしょうか…？；

050213
ユヅ

●じゅんさん
はじめまして。
そこから再配布行為にあたること（利用中のテンプレートを、テンプレート同盟への参加）をされなければ構いませんよ～＾＾

050213
じゅん

ありがとうございます！
ぜひ利用させていただきますねｖ

050514
どら

フツーに折り畳み部分を画像にimg src=を入れても表示されないんであきらめてたんですけど、こちらを拝見させていただき無事に設置することができました
ありがとうございます♪

050803
Yoco*

こんにちは！
いつもユヅさんの可愛いテンプレートを利用させていただいています。

そしてこの度、折り畳みスクリプトにも初挑戦しました！
こちらの記事を参考にさせていただいて、画像表示にしたいと思います。

密かに毎日遊びにきて、応援してます！
これからも頑張ってください。
BPの登録＆この記事をTBさせていたきました。

050803
coco

はじめまして！折りたたみボタンを画像にしたくてたどり着きました。↑のコメントのようなことはしていないので、jugemで使用させていただきました♪

ありがとうございました。

050807
ユヅ

●どらさん
こんにちは。
JavaScript内でのHTMLの記述ってそのままじゃ上手くいかない場合もありますよね＾＾
" " とかが引っかかったりして上手く動かないときもありますし。
成功おめでとうございます。

●Yoco*さん
こんにちは。
テンプレートの方もご利用いただき有難うございます♪
アイコン画像がまたワンポイントになってかわいいので、頑張って設置してくださいね＾＾
BP登録も有難うございました。

●cocoさん
はじめまして＾＾
コメント有難うございます。
成功おめでとうございました♪

050808
mayumi

こんばんわ。
ユヅさんのエントリを穴が開くほど読んで
頑張ってカスタマイズしてます。
先日ハリーくん２カラムをお借りしたとコメントしたのですが、
折りたたみスクリプト用のアイコンがおまけで付けられているとありますが
ど、どれでしょうか(汗)
サーバーのテンプレートフォルダを見て一つ一つ画像確認したのですが…
それらしきものが見当たらなくてw｣w｣w｣。

050828
chie

こんにちは。
初心者でまったく詳しくないのですが、折りたたみというのはREADMORE　CLOSEの表示のことでしょうか？
for (i=0;i<objMarks.length;i++) {
if (objMarks[i].className == 'foldmark') {
objMarks[i].firstChild.nodeValue = (dispMode == 'none') ? closeMark : openMark;

上記はどのファイルに入ってるものでしょうか？
よろしくお願いします。

050829
ユヅ

●chieさん
記事のreadmoreではなくて、サイドバーの折りたたみです。
記事中で「折り畳みスクリプト」にリンクをはっていますので、そちらで説明をご覧下さいませ。
そしたら意味が分かると思います＾＾

051211
くまこ

こんにちは。はじめまして。
こちらを参考にしたら、今まで出来なかった画像表示が出来ました。
ありがとうございました。

060415
ちょち

こんにちは！はじめまして！
ブログ用の素材を作成しては配布しているしがない素材屋をしております。
今回、折りたたみを画像にするこの記事へリンクを貼らせていただきましたので、ご報告に参りました。
事後ですがどうぞよろしくお願いいたします！
トラックバックも送信しておきますね！

P.S いつも楽しく拝見させていただいております。
先日amazonでELLEGARDENがおすすめされていて感激でした！
女の子で私の周りで初めてのELLEを知っている人だったので～。＞友達少ないｗ

これからもどうぞがんばってください！

060415
ユヅ

くまこさん＞
コメント有難うございました＾＾

ちょちさん＞
ご報告どうもですー＾＾
ELLEいいですよねー(*´Д`*)
偶然聞いたmissingで一目惚れでした＾＾

070226
ワカ

こんにちは・・・。
『折り畳みスクリプトの開閉ボタンを画像にする』をやってみたんですが、
画像どころか折り畳みさえされなくなってしまいまして・・・。
ユヅさんの書いてある通りにしたつもりなんですが・・・
どこを間違ったのか、さっぱりです・・・。
お忙しいとは思いますが、ちょっとだけ愛の手をお願いします・・・。

070226
ユヅ

ワカさん＞
var openMarkとvar closeMarkの行の最後に、それぞれ１つずつ余分な/（スラッシュ）が残っています。

～alt="OPEN" />'; /　←これ
～alt="CLOSE" />'; /　←これ

うちの解説のをコピペされた後に、コメントアウトを消そうとして /*～*/を消したつもりだったけど/が1個残ってたとかそんな感じじゃないかなと思ってみたり。

070226
ワカ

きゃ～！？画像出てきた！！
ユヅさん、ありがとうございます・・・。
結局はワタシのおっちょこちょいミスか・・・
ユヅさんが思ってみた通りだったり・・・(汗)
でもでも、本当にありがとうございました。

070301
ユヅ

ワカさん＞
(*´ω｀)σ)Д`)

Trackback

Trackback URI
このエントリーへのリンクを作成

blog*citron

折り畳みスクリプトの開閉ボタンを画像にする

Comments

Comment Form

Trackback