見出しデザイン 編集画面でキーカラーにならない

[gundam]

■ WordPress のバージョン
6.9.7

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

■ 子テーマをご利用の場合は親テーマに変更して症状が改善するか確認してください。
確認しました。

■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit

■ テーマのバージョン
15.38.0

■ Pro Unit のバージョン
0.31.1

■ スキンの種類
Origin III

■ 関連しそうなプラグインを一つずつ停止して症状が改善するか確認してください。
確認しました。

■ 期待する動作
「外観 → カスタマイズ → 色 → キーカラー」で設定した色が、–vk-color-primary に反映され、見出しの下線などキーカラーを参照している箇所にも同じ色が反映されることを期待しています。

■ 自分で試した事
「外観 → カスタマイズ → 色 → キーカラー」で緑色を設定し、公開後に実際のページを再読み込みして確認しました。

また、Chrome DevTools の Console で以下を実行しました。

getComputedStyle(document.documentElement)
.getPropertyValue(‘–vk-color-primary’)

結果は #c00 となり、カスタマイザーで設定している緑色ではなく、Lightning のデフォルト値と思われる色が適用されていました。

■ 症状が発生するブラウザ
Google Chrome

■ 実際の症状
「外観 → カスタマイズ → 色 → キーカラー」では緑色を設定していますが、実際のページではキーカラーが反映されず、見出しの下線などが赤色のまま表示されます。

該当箇所のCSSは以下のようになっており、

h3:where(:not(.wp-block-post-title))::after {
border-bottom: 1px solid var(–vk-color-primary);
}

実ページで –vk-color-primary の値を確認すると #c00 になっています。

そのため、カスタマイザー上のキーカラー設定と、実際に出力されている –vk-color-primary の値が一致していないように見えます。

[gundam]

追加で確認しました。
lightning-common-style-inline-css には、カスタマイザーで設定した –vk-color-primary: #599b53; が正常に出力されています。

しかし、LightningのWooCommerce対応CSS woo.css?ver=15.38.0 の :root にある –vk-color-primary: #c00; が後から適用され、上書きされているようです。

DevTools上で woo.css の –vk-color-primary: #c00; を無効にすると、見出しの下線も設定した緑色 #599b53 に正常に戻ることを確認しました。

[投稿者]

投稿