2005年6月24日

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

サイドメニューの折りたたみ(v4.0)でブロックレベル要素指定による折りたたみをご紹介しましたが、タイトル部分の背景やロールオーバーした時に任意の画像を配置するカスタマイズです。簡単です。

まず、タイトル部分に通常表示で使用する画像(hogehoge1.gif)とロールオーバー時に使用する画像(hogehoge2.gif)の2つを用意します。例えば下記のようなものです。

通常表示用 :通常表示用(hogehoge1.gif)
ロールオーバー用 :ロールオーバー用(hogehoge2.gif)
これを任意のディレクトリ(images)にアップロードします。

次に、前述のエントリーにある、3項のスタイルシートの設定を下記のように変更します。

/* 通常 */
.sidetitle2 a:link,
.sidetitle2 a:visited {
    display: block;
    padding: 2px;
    border: 1px solid #999999; /* 枠線 */
    color:#666666; /* 文字色 */
    background-color:#f6f6f6; /* 背景色 */
    font-family: Verdana, Arial, sans-serif;
    font-size:10px;
    text-decoration: none;
    background-image:url(images/hogehoge1.gif);
}
 
/* マウスポイント時 */
.sidetitle2 a:hover {
    padding: 2px;
    border: 1px solid #999999; /* 枠線 */
    color:#ffffff#666666; /* 文字色 */
    background-color: #999999; /* 背景色 */
    font-family: Verdana, Arial, sans-serif;
    font-size:10px;
    text-decoration: none;
    background-image:url(images/hogehoge2.gif);
}

これで下記のような動作をするようになります(サンプル表示用に設定は若干変えています)。

サンプル

上記は配置する画像のサイズがタイトル部分と同じ大きさの場合です。次のように細い縦長の画像(hogehoge3.gif:みにくくてすいません)

CSS設定前の画像

を繰り返し表示する場合は、

background-image:url(images/hogehoge3.gif);
background-repeat:x;

とします。これで

CSS設定後の画像

という表示になります。ロールオーバー用の画像も同じ方法で作れます。この方法は横方向のサイズが可変になる場合に便利です。

Comments [2] | Trackbacks [0]
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