2006年8月25日

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

August 25,2006 12:13 AM
Tag:[, ]
Permalink

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

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

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

download

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

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

1.スクリプト 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 と同じディレクトリに配置すれば、パスの記述は不要です。

2.CSSの追加

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

.sidetitle img {
    vertical-align:middle;
}

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

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

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

としています。

Comments [16] | Trackbacks [1]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3