[ 解決済 ] ボタンのマウスホバー時のカラー変更について

VWSとは フォーラム Lightning [ 解決済 ] ボタンのマウスホバー時のカラー変更について

[ 解決済 ] ボタンのマウスホバー時のカラー変更について

  • このトピックには4件の返信、2人の参加者があり、最後にpepepeにより9ヶ月前に更新されました。
5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • 投稿者
    投稿
  • #86213

    pepepe
    参加者

    ■ WordPress のバージョン
    WordPress 6.4.3

    ■ テーマ・プラグインは全て最新版で確認してください。
    確認しました。

    ■ テーマの種類
    Lightning Pro

    ■ テーマのバージョン
    8.19.0

    ■ スキンの種類
    Origin II

    ■ 期待する動作
    ①ボタンでマウスホバーした際に、現状だと赤色が反映します。この赤を他の色に変更したい
    ②カラムの幅を変更したら、ヘッダーの幅も小さくなってしまい、ヘッダーにずれが生じている

    ■ 自分で試した事
    ①このCSSを入れてみましたが、変化ありませんでした
    /* 通常時の背景色 */
    .selector {
    background-color: #b1eeff;;
    }
    /* マウスオーバー時の背景色 */
    .selector:hover {
    background-color: #ffc9d7;
    }

    ②現状のCSSです。これだとヘッダーも小さくなってしまうようです…

    /*ブログのカラム幅広くする */
    @media (min-width: 992px) {
    .container {
    max-width: 960px;
    }
    }
    @media (min-width: 1200px) {
    .container {
    max-width: 800px;
    }
    }

    ■ 症状が発生するブラウザ
    グーグル

    ■ 実際の症状
    ①ボタンに関するCSSを色々入れてみましたが、どれも変化がありませんでした…

    ②ページ下部のカスタムCSSに入力しています。テストページではない本来のページはカスタム投稿タイプで入力しています。CSSをいれていない他のページはヘッダーのずれはありません。

    ご教授よろしくお願いいたします。

    Attachments:
    You must be logged in to view attached files.

    該当URL : https://*********

    ※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

    #86407

    DRILL LANCER
    モデレーター

    Lightning のご利用誠にありがとうございます。株式会社ベクトルの平川です。

    ①ボタンでマウスホバーした際に、現状だと赤色が反映します。この赤を他の色に変更したい
    このCSSを入れてみましたが、変化ありませんでした

    
    /* 通常時の背景色 */
    .selector {
    background-color: #b1eeff;;
    }
    /* マウスオーバー時の背景色 */
    .selector:hover {
    background-color: #ffc9d7;
    }
    

    下記 CSS を適用すればうまくいくと思います。

    
    selector .wp-block-button__link {
    background-color: #b1eeff!important;
    }
    
    selector .wp-block-button__link:hover {
    background-color: #ffc9d7!important;
    }
    

    ちなみに通常色は画像の赤枠の部分で変更可能です。

    ②カラムの幅を変更したら、ヘッダーの幅も小さくなってしまい、ヘッダーにずれが生じている
    現状のCSSです。これだとヘッダーも小さくなってしまうようです…

    
    /*ブログのカラム幅広くする */
    @media (min-width: 992px) {
    .container {
    max-width: 960px;
    }
    }
    @media (min-width: 1200px) {
    .container {
    max-width: 800px;
    }
    }
    

    弊社のテーマではヘッダーの内部とコンテンツエリアをとフッター内部に至るまで
    左右の端が揃うように設計されております。

    コンテンツエリアのみ狭めたいということであれば下記 CSS を適用してみてください。

    /*ブログのカラム幅広くする */
    @media (min-width: 992px) {
    	.mainSection-col-one {
    		max-width: 960px;
    	}
    }
    @media (min-width: 1200px) {
    	.mainSection-col-one {
    		max-width: 800px;
    	}
    }

    CSS のカスタマイズについては下記で解説していますので是非ご覧になてください。

    できる!CSSカスタマイズ

    以上よろしくお願いします。

    Attachments:
    You must be logged in to view attached files.
    #86416

    pepepe
    参加者

    早速のご回答ありがとうございます!

    ①教えていただいたCSSで赤色から色の変更ができました。ありがとうございます!

    ②いただいたCSSを反映したところ、ヘッダーは小さくならずできたのですがコンテンツエリア内ですべて左によってしまい上手くいきませんでした…
    コンテンツエリアの修正をフォーラムで探しましたが分からず…こちらの修正を教えていただくことは可能でしょうか?
    前回のURLのページが、左に寄っている状態のテストページになっています。

    #86417

    DRILL LANCER
    モデレーター

    お世話になります。株式会社ベクトルの平川です。

    ②いただいたCSSを反映したところ、ヘッダーは小さくならずできたのですがコンテンツエリア内ですべて左によってしまい上手くいきませんでした…
    コンテンツエリアの修正をフォーラムで探しましたが分からず…こちらの修正を教えていただくことは可能でしょうか?
    前回のURLのページが、左に寄っている状態のテストページになっています。

    下記でいかがでしょうか?

    
    /*ブログのカラム幅広くする */
    .mainSection-col-one {
    	    margin: 0 auto;
    }
    @media (min-width: 992px) {
    	.mainSection-col-one {
    		max-width: 960px;
    
    	}
    }
    @media (min-width: 1200px) {
    	.mainSection-col-one {
    		max-width: 800px;
    	}
    }
    

    本件については「CSS 左右 中央揃え」あたりで検索すれば出てきますのでぜひお試しください。

    #86420

    pepepe
    参加者

    ②ご教授いただいたCSSでセンターになりました!ありがとうございました。

5件の投稿を表示中 - 1 - 5件目 (全5件中)
  • このトピックに返信するにはログインが必要です。