小粋空間  -  a cheap joke and a play on words site

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

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

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

：通常表示用（hogehoge1.gif）

：ロールオーバー用（hogehoge2.gif）

これを任意のディレクトリ（images）にアップロードします。

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

/* 通常 */
.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：みにくくてすいません）

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

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

とします。これで

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