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

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

Posted at June 24,2005 11:58 PM
Tag:[CSS, Customize, Folding, Image, JavaScript, MovableType, SideMenu]

サイドメニューの折りたたみ(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設定後の画像

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

関連記事
zenback
人気エントリー
トラックバックURL


コメント

いつも参考にさせて頂いております。
こちらのカスタマイズも真似させて頂きました。
人間の目とは不思議です。同じ画像でも上下反転させるとちゃんとくぼんで見えるんですね。
ご紹介ありがとうございました。
今後ともどうぞよろしくお願いします。

[1] Posted by showry : June 20, 2006 8:33 PM

>showryさん
こんばんは。
記事参照ありがとうございました。
無事に設定できたようでよかったです。
ではでは!

[2] Posted by yujiro : June 21, 2006 11:27 PM
コメントする
greeting

*必須

*必須(非表示)


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

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

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

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