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

[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はフォーラムライセンスが有効のユーザーにのみ表示されます

[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.

[pepepe]

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

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

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

[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 左右　中央揃え」あたりで検索すれば出てきますのでぜひお試しください。

[pepepe]

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

[投稿者]

投稿