「ホーム」ボタンのデザインの変更

[gism]

動作に関するご質問の場合は必ずご記入ください。

---

Welcart のバージョン：1.0.6

症状を確認したブラウザ：グーグルクローム、IE8

サーバー（会社名、サービス名）：

SSLの利用：　無し ｜ 専用SSL ｜ 共用SSL

WordPress のパーマリンク設定：

---

管理人様、失礼致します。

「ホーム」ボタンのデザインを変更したいと思い、新たに作成したボタン画像を「button_main_navi」ファイルに同名で上書きしました。

ボタンのデザインは変更出来たのですが、マウスオンした際の画像（デフォルトだと濃いグレー）の変更方法が分かりません。

マウスオンした際の画像は、どこから変更するのでしょうか？

ご存知の方がおられればお教え下さい。

宜しくお願い致します。

[nanbu]

こんにちは。

元の button_main_navi.jpg がどの様が画像か確認してみてください。この画像はグレーとブラックが横にくっ付いた形となっています。それをposition指定して、見せる部分を変えています。

div.mainnavi li a,

ul.mainnavi li a {

width: 121px;

height: 36px;

padding: 20px 5px 0px 5px;

margin: 0px;

display: block;

background-image: url('images/button_main_navi.jpg');

background-repeat: no-repeat;

background-position: -131px 0px;

color: #FFF;

font-weight: bold;

font-size: 13px;

text-align: center;

}

div.mainnavi li a:hover,

ul.mainnavi li a:hover {

background-position: 0px 0px;

text-decoration: none;

}

つまり、元画像を見てそれに倣ってbutton_main_navi.jpg を作ってみてください。

[gism]

nanbu様

ご返答ありがとう御座います。

仰る通り、ボタン画像の中央から二分して、右が通常時／左がマウスオン時だと思い作業しております。

試しに、デフォルトでは濃いグレー×グレーで構成されているボタンを、フォトショップで色味のみ変更し、濃いレッド×レッドにして、同名で上書きしてみましたが…やはり通常時のボタンだけがレッドに変更されており、マウスオンすると何故か濃いグレーのままとなります。

なにか他に原因があるのでしょう…何度か試しましたが、結果は全て同じになります。

[nanbu]

通常でbackground-position: -131px 0px; となっていますので画像の右側が表示されます。

ホバーでbackground-position: 0px 0px; ですので、マウスオンでは画像の左側が表示されるはずです。

もしうまく行かないようでしたら、Chrome の要素検証などを使ってa:hover が他のセレクタに優先されていないかを確認してください。

[投稿者]

投稿