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

ホーム フォーラム テンプレート(テーマ) 「ホーム」ボタンのデザインの変更

このトピックには3件の返信が含まれ、2人の参加者がいます。6 年、 5 ヶ月前 nanbu さんが最後の更新を行いました。

4件の投稿を表示中 - 1 - 4件目 (全4件中)
  • 投稿者
    投稿
  • #50664

    gism
    参加者

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


    Welcart のバージョン:1.0.6

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

    サーバー(会社名、サービス名):

    SSLの利用: 無し | 専用SSL | 共用SSL

    WordPress のパーマリンク設定:


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

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

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

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

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

    宜しくお願い致します。

    #62852

    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 を作ってみてください。

    #62853

    gism
    参加者

    nanbu様

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

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

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

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

    #62854

    nanbu
    参加者

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

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

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

4件の投稿を表示中 - 1 - 4件目 (全4件中)

このトピックに返信するにはログインが必要です。