※Livedoor blog パソコン版の方法です。
メニューバーに、マウスを置いた時(マウスオーバー)、ワンポイントの画像を表示・設置します。
【ブログ設定】⇒【ブログパーツ】⇒【カスタマイズ】⇒【CSS】
画像を表示し、背景色を変化させる方法、これをCSSの一番下にコピペ
/* メニューバーのワンポイント画像 */
.ldb_menu-list li a:hover {
background:#●●●●●● url(画像のURL) no-repeat;
}
#●●●●●●はカラーコードを記入。.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でイラスト周辺を透明にすると、トリミングした様に表示されます。
.ldb_menu-list li a:hover {
background: url(画像のURL) no-repeat;
}
画像を、メニューバーの中に収めるために必要な大きさ。
テンプレートの種類ごとの、画像の高さ(px)の目安。
これ以上の高さだと、イラスト画像が切れます。
使用中のテンプレートに、合わせたサイズの画像を用意してください。
20pxだと、画像はボケるので、以下のテンプレートは、画像を設置する意味は無いです。不要です。
一応、書いておきます。
※例外)法人用テンプレート01のみ、
CSSの【/* メニューバー */】から以下の文面を削除してください。既存の画像が被ります。
テンプレートの種類ごとの、画像の高さ(px)の目安。
これ以上の高さだと、イラスト画像が切れます。
使用中のテンプレートに、合わせたサイズの画像を用意してください。
20pxだと、画像はボケるので、以下のテンプレートは、画像を設置する意味は無いです。不要です。
一応、書いておきます。
※例外)法人用テンプレート01のみ、
CSSの【/* メニューバー */】から以下の文面を削除してください。既存の画像が被ります。
#main-nav li a:hover {
color: #666;
~~長文~~
GradientType=0 ); /* IE6-8 */
}
color: #666;
~~長文~~
GradientType=0 ); /* IE6-8 */
}
ランキングに参加しています。
温泉漫画・もくじ⇩
コメント