小粋空間: サイドメニューの折りたたみマークに画像を使用する

Top ＞ Movable Type ＞カスタマイズ＞折りたたみ＞サイドメニュー＞サイドメニューの折りたたみマークに画像を使用する

2006年8月25日

サイドメニューの折りたたみマークに画像を使用する

Posted at August 25,2006 12:13 AM
Category：[サイドメニュー, 折りたたみ]
Tag：[Customize, MovableType]

サイドメニューの折りたたみマークに画像を使用するサイドメニューの折りたたみカスタマイズで、折りたたみマークに画像（img タグ）を使用できるよう、スクリプトを改変致しました。

とりあえずサンプルを作成しましたのでお試しください。表示されたページの左サイドバーにある「Recent Entries」が対象部分です。

改変したスクリプト menufolder.js は下記のリンクよりダウンロードできます。バージョン 6.01（または 6.01en）以降が対応版です。

download

以下、折りたたみマークに画像を用いる場合の設定方法です。スクリプトの基本的な設定内容につきましては、マニュアルまたはサイドメニュー折りたたみの各記事を参照願います。

なお、タイトル枠全体に画像を用いるカスタマイズは「サイドメニューの折りたたみに画像を使用する」を参照ください。

１．スクリプト menufolder.js の設定

menufolder.js の中間辺りにある設定項目で、下記の赤色部分

// 折りたたみマーク
// 上：閉じている状態で表示されるマーク
// 下：開いている状態で表示されるマーク
// 画像を設定する場合は右辺を '<img src="[画像のURL]" />'; と書いてください
var openMarkForSideBarMenu  = '▽';
var closeMarkForSideBarMenu = '△';

を

// 折りたたみマーク
// 上：閉じている状態で表示されるマーク
// 下：開いている状態で表示されるマーク
// 画像を設定する場合は右辺を '<img src="[画像のURL]" />'; と書いてください
var openMarkForSideBarMenu  = '<img src="images/open.gif" />';
var closeMarkForSideBarMenu = '<img src="images/close.gif" />';

という具合に書き換えてください。画像ファイルを menufolder.js と同じディレクトリに配置すれば、パスの記述は不要です。

２．CSSの追加

メニュータイトルや画像サイズにもよりますが、CSS に

.sidetitle img {
    vertical-align:middle;
}

という設定を追加すれば、折りたたみマーク画像の垂直位置が、テキストタイトルとある程度揃うようになります。

ちなみにサンプルの設定はもう少しアレンジして、

.sidetitle img {
    vertical-align:middle;
    _vertical-align:bottom;
    margin-bottom:0;
    _margin-bottom:1px;
}

としています。

Posted by yujiro このページの先頭に戻る

« 「Tech Talk blog」がスタート | Main | ホルスト組曲「惑星」作品32（冥王星付き） »

この記事を読んだ人はこんな記事も読んでいます

人気エントリー

Hatena Hot Entries

Hatena Entries

トラックバックURL

このエントリーのトラックバックURL:

トラックバック

≫ サイドバーの折りたたみ from akemi's カスタマイズ
小粋空間　http://www.koikikukan.com/archives/... [続きを読む]

Tracked on November 17, 2006 7:51 PM

menufolder.jsの中を設定し、画像ファイルと共にアップしたのですが表示されませんでした。
画像ファイルのURLで指定しても表示されず、この部分設定は間違ってないと思うのですが、スタイルの追記する場所が間違っているのか？と思ってます。
スタイルの追記する場所が違うと表示できないのでしょうか。
またスタイルを追記する場所がどこなのか、教えて頂きたいのですが･･･

[1] Posted by Yきっち : November 6, 2006 5:01 PM

＞Yきっちさん
こんばんは。
ご質問の件ですが、CSSの記述位置は特に指定ありません。整理上、.sidetitle の後ろに追加して

.sidetitle {
　　　：
　　（略）
　　　：
}
.sidetitle img {
    vertical-align:middle;
}

とするのが分かりやすいと思います。

画像が表示されない件につきましては、申し訳ありませんがサイトを拝見させて頂かないと適切な回答ができませんので、URLをお知らせ頂ければ幸いです。
それではよろしくお願い致します。

[2] Posted by yujiro : November 6, 2006 11:37 PM

yujiroさんこんばんは。

回答ありがとうございます。

.sidetitle {
の後ろ・・・

と言う事で　テンプレートからちょっと検索してみましたが。。。o(゜^ ゜)ウーン見つかりませんでした・・・

ブログカスタマイズについては初心者なので正直悪戦苦闘しております(・・;)
ブログのURLを載せましたのでお手隙の時で構いませんのでちらっと見て頂けると幸いです。
宜しくお願いします♪

[3] Posted by Yきっち : November 7, 2006 12:03 AM

＞Yきっちさん
こんにちは。
当サイトのテンプレートをご利用されていると勘違いしました。失礼いたしました。
画像は無事表示されたようですね。
またなにかございましたらご質問ください。
ではでは！

[4] Posted by yujiro : November 8, 2006 12:32 PM

yujiroさんこんにちわ！

もう一度menufolder.js　ファイルの中を良く確認してみたら非表示の設定になってました。
初歩的ミスでお手数おかけしました(^▽^;)

画像の位置も修正してなんとか納得のいく形になり、感動?♪
また何かありましたらお世話になるかもです。
ありがとうございます。

Ｐ．Ｓ　yujiroさんが111のきり番ゲットでしたよ♪

[5] Posted by Yきっち : November 8, 2006 2:14 PM

＞Yきっちさん
こんばんは。
ご連絡ありがとうございました。
無事にできたようでよかったです。
キリ番ゲットとは気がつきませんでした。
ではでは！

[6] Posted by yujiro : November 11, 2006 1:55 AM

大変参考にと言うか実装させて頂きました。
ありがとうございます。
今度はrightboxを実装させて頂こうかと思ってます。

[7] Posted by ちかこ : December 21, 2006 2:59 AM

＞ちかこさん
こんばんは。
ご利用＆ご連絡ありがとうございます。
うまくできたようでよかったです。
ではでは！

[8] Posted by yujiro : December 23, 2006 1:18 AM

はじめまして。
プラグインのことで色々検索していたところ小粋空間さんのサイドメニュー折りたたみの方法の記事を発見し、早速実践させていただきました。
そこで1つ悩んでいる部分があるのでよろしければアドバイスいただけないかと思いコメントさせていただきました。
その困っている部分なんですが、
私は画像を表示させてその画像にだけリンクを張るという方法を選び、その事に関してはちゃんと画像も表示され、その画像をクリックすればちゃんとメニューも開閉できたのですが、
なぜかその画像に紫の枠が出てくるんです。
この枠を表示させたくないのですが
どうすればよいかお分かりになりますでしょうか？
場違いな質問でしたらすいません・・・
お忙しいところ申し訳ありませんがアドバイスいただけたらと思います。
よろしくお願いいたします。

[9] Posted by PACO : April 1, 2007 1:25 AM

＞PACOさん
こんばんは。
ご質問の件ですが、青色の

.sidetitle img {
    vertical-align: middle;
    border: none;
}

を追加してみてください。

直らないようでしたらすいませんが再度ご連絡ください。
それではよろしくお願い致します。

[10] Posted by yujiro : April 1, 2007 2:00 AM

はじめまして。
小粋空間さんのいくつかのプラグインを使用させていただき
ほとんど問題ないのですが、
あと少し設定できれば思い通りの
ツリーになるのですが
うまく動作できずにもがいていますので
ご相談させていただきました。

サブカテゴリーリストのエクスプローラ風折りたたみ
親カテゴリーにサブカテゴリーのエントリー数の合計を表示する

はうまくできたのすが
親カテゴリをクリックした時に
展開できるようにブロック単位で設定が
うまく動作できませんでした。

menufolder.jsの設定は

// メニュータイトル用設定データ
//--------------------------------------------------------

// リンク方式
// 折りたたみマークにリンク付与：'unblock'
// メニュータイトル枠全体にリンク付与 'block'
var linkType = 'block';

としており、

テンプレート部分には
<div class="side">
<div id="categories">
<MTTopLevelCategories>

<MTIfNonZero tag="MTCategoryCount">
<li>
<MTHasSubCategories>
<div class="subcategories" id="subcategories<$MTCategoryID$>name">
</MTHasSubCategories>
<a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>">
<$MTCategoryDescription$>
</a>
[<$MTSubCatCount$>]
<MTHasSubCategories>
</div>
</MTHasSubCategories>

</MTHasSubCategories>
<$MTCategoryDescription$>

[<$MTSubCatCount$>]
<MTHasSubCategories>
</div>
</MTHasSubCategories>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast>
</ul>
<MTHasParentCategory>
</div>
</MTHasParentCategory>
</MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</div>

としています。

親カテゴリ名を
クリックすると展開できる方法を
教えていただければ幸いです。

よろしくお願いいたします。

[11] Posted by hatena : February 15, 2008 12:38 AM

＞hatenaさん
こんばんは。
ご質問の件ですが、可能でしたらサブカテゴリーリストを設定しているサイトのURLをご連絡頂けますでしょうか（時間がとれないので、1からそのような環境を作る余裕がありません）。
それではよろしくお願い致します。

[12] Posted by yujiro

: February 17, 2008 12:23 AM

yujiroさんご返事ありがとうございます。

URL記載させていただきました。

親カテゴリの+の画像で展開ができるのですが、
その横のカテゴリ名をクリックしてもできればすごくうれしいです。

menufolder.jsをがんばって解読していますが
まだまだ勉強不足で・・・すみません。

お手数ですがアドバイスお願いいたします！

[13] Posted by hatena : February 19, 2008 4:30 PM

＞hatenaさん
こんばんは。
たしかに仰るとおりです。
ということで手を加えたものを以下に置きましたので、入れ替えてお試しください。ファイルの設定内容は変更しなくても大丈夫です。
http://www.koikikukan.com/archives/download/menufolder/subcategorytitle/menufolder.js
暫定ですので、サブカテゴリーリスト専用です。
それではよろしくお願い致します。

[14] Posted by yujiro

: February 20, 2008 12:32 AM

yujiroさんへ

ありがとうございます！！

うまくできました！！

ただ、このサイトでは
サブカテゴリーのエントリー数のところは
リンクされていないので
同じようにリンクをだけはずそうとおもいます。

がんばってみます！！

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

[15] Posted by hatena : February 20, 2008 4:44 PM

＞hatenaさん
こんばんは。
ご連絡ありがとうございました。
うまくできたようで良かったです。
もう少しきちんと実装できたらエントリーいたします。
ではでは！

[16] Posted by yujiro

: February 21, 2008 12:13 AM

コメントする

greeting

名前（N）: *必須

メールアドレス（M）: *必須（非表示）

URL（U）:

情報を保存する？

ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

コメント（C）:

[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り（プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り）、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「<」、「>」は「>」と入力してください。例えば「<$MTBlogURL$>」は「<$MTBlogURL$>」となります（全て半角文字）