※Livedoor blog パソコン版の方法です。
メニューバーに、マウスを置いた時(マウスオーバー)、ワンポイントの画像を表示・設置します。
【ブログ設定】⇒【ブログパーツ】⇒【カスタマイズ】⇒【CSS】

画像を表示し、背景色を変化させる方法、これをCSSの一番下にコピペ
/* メニューバーのワンポイント画像 */
.ldb_menu-list li a:hover {
   background:#●●●●●● url(画像のURL)  no-repeat;
}
#●●●●●●はカラーコードを記入。
●元のテンプレートのカラーコードを利用すると、色のバランスが良いです。
●(※一番下の } ⇦これ、命令文の区切りです。忘れずに。)
●画像のURLは、表示した画像を右クリック➡新しいタブで開く➡上に表示されるURLをコピペ。

●※当ブログのPC版で、メニューバーにマウスを合わせると表示される画像【温泉マーク ♨】が、この方法で表示しています。

メニューバー ワンポイント

画像のみ表示で、背景色の変化なしは、これをCSSの一番下にコピペ
/* メニューバーのワンポイント画像 */
.ldb_menu-list li a:hover {
   background: url(画像のURL)  no-repeat;
}
●画像は、PNGでイラスト周辺を透明にすると、トリミングした様に表示されます。
画像を、メニューバーの中に収めるために必要な大きさ。
テンプレートの種類ごとの、画像の高さ(px)の目安。
これ以上の高さだと、イラスト画像が切れます。
使用中のテンプレートに、合わせたサイズの画像を用意してください。
70px以内コントラスト
54px以内デフォルト2019
Nostalgicbeach
団体・個人用テンプレート01
ブラックジャーナル
ホワイトプレス
50px以内法人用テンプレート01
クラシックアイビー

20pxだと、画像はボケるので、以下のテンプレートは、画像を設置する意味は無いです。不要です。
一応、書いておきます。
20px以内SAKURA
ブランコ リキッド
ブランコ
15px以内メディア2021
法人用テンプレート02

※例外)法人用テンプレート01のみ、
CSSの【/* メニューバー */】から以下の文面を削除してください。既存の画像が被ります。
#main-nav li a:hover {
    color: #666;
~~長文~~ 
GradientType=0 ); /* IE6-8 */
}


ランキングに参加しています。

PVアクセスランキング にほんブログ村
温泉漫画・もくじ⇩
温泉漫画を描いています