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

VWSとは フォーラム Lightning [ 解決済 ] 見出しのデザインのCSSカスタマイズ

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

  • このトピックには2件の返信、2人の参加者があり、最後に長野利雄により2年前に更新されました。
3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • 投稿者
    投稿
  • #65231

    長野利雄
    参加者

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

    #65232

    うなこ
    モデレーター

    見出し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カスタマイズ

    #65234

    長野利雄
    参加者

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

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