[ 解決済 ] 見出しのデザインのCSSカスタマイズ

[長野利雄]

■ WordPress のバージョン
5.9

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

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

■ テーマのバージョン
14.20.3

■ Pro Unit のバージョン
0.19.0

■ スキンの種類
Origin III

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

■ 期待する動作
見出しのデザインをCSSでカスタマイズしたい。スタイル標準の装飾は無しで。

■ 自分で試した事
カスタマイズ画面の追加CSSから見出しH3のカスタマイズを行った。

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

■ 実際の症状
見出しH3のブロックでスタイルを標準にすると、CSSカスタマイズが反映されるが、必要のないスタイル標準の装飾も同時に行われてしまう。スタイルを装飾無しにすると、CSSカスタマイズの反映もされない。

■ その他特記事項
当該URLの「見出しH3 テスト1　スタイル標準」「見出しH3 テスト2　スタイル装飾無し」を参照ください。

---

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

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

[うなこ]

見出しH3のブロックでスタイルを標準にすると、CSSカスタマイズが反映されるが、必要のないスタイル標準の装飾も同時に行われてしまう。スタイルを装飾無しにすると、CSSカスタマイズの反映もされない。

▼標準のスタイルをカスタマイズする場合
標準のスタイルは、標準のデザインが付きますので、cssで必要ないスタイルを打ち消す必要があります。
現在のh3スタイルでしたら以下のような打ち消しのcssを追加します

h3{
border-bottom: none;
}
h3:after{
content:none;
}

▼装飾無しのスタイルをカスタマイズする場合
装飾無し　の方には、　is-style-vk-heading-plain というクラス名が付きますので、
今は要素名がh3にcssが追加されていますが、h3.is-style-vk-heading-plain　にすると装飾なしのh3に追加したcssがつくようになると思います。

いかがでしょうか。

できる！CSSカスタマイズ

[長野利雄]

できました！　ありがとうございます。

[投稿者]

投稿