[ 解決済 ] Hタグのスタイルデフォルト設定について

VWSとは フォーラム X-T9 [ 解決済 ] Hタグのスタイルデフォルト設定について

[ 解決済 ] Hタグのスタイルデフォルト設定について

タグ: 

  • このトピックには2件の返信、2人の参加者があり、最後に恭一橋本により36分前に更新されました。
3件の投稿を表示中 - 1 - 3件目 (全3件中)
  • 投稿者
    投稿
  • #110558

    恭一橋本
    参加者

    ■ WordPress のバージョン
    6.8.1

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

    ■ テーマの種類
    X-T9

    ■ テーマのバージョン
    1.34.1

    ■ 期待する動作
    ワードプレスのビジュアルエディターにて新規投稿を行っている際、Hタグをつけた際に、H2なら色背景、H3なら下線というようにあらかじめ設定しておいたスタイルが適用されるようになってほしい。
    現在はフォントやサイズのみタグと連動しており、スタイルは都度右から選ぶ仕様かと思います。

    ■ 自分で試した事
    外観>エディター>スタイル>タイポグラフィー>要素>見出し
    にてフォントとサイズを調整
    装飾については選択肢がありませんでした。

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

    ■ 実際の症状
    Hタグに装飾をつける際は都度、右から装飾を選ぶ必要がある。

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

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

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

    #110601

    石川@Vektor,Inc.
    キーマスター

    弊社製品のご利用ありがとうございます。株式会社ベクトルの石川と申します。

    まずは残念ながら現状の WordPress の機能ではありません。
    と、言いますか私もそれは既にできるようになったと思っていました。

    ただ、要望の多い機能かと思いますので、WordPress 本体の方で改善されるとは思います。

    裏技的な感じですが、
    外観 > エディタ > テンプレート > (適当にテンプレート選ぶ) > グローバルスタイルボタン > ブロック > 見出し
    からなら色は指定できるのですが、見出しレベル毎に指定できないので意味がありません。

    やはり一般的に
    外観 > エディタ > テンプレート > 適当にテンプレート選ぶ) > グローバルスタイルボタン > 3点アイコンから追加CSS に

    h2 {
    background-color:var(--wp--preset--color--bg-secondary, #efefef);
    padding:.6em .7em .5em;
    border-radius: 4px;
    }
    h3 {
    border-bottom: 1px solid #333;
    padding:.6em 0 .5em;
    }

    のように書くのが一番てっとり早いのが現状です。

    ちなみに別の回りくどいやりかたとしては
    以下のようなコードを my-block-theme-plugin.php など適当な名前で保存して zip に圧縮して、
    プラグイン > 新規追加 からアップロード&有効化するという方法もあります。

    
    <?php
    /*
    Plugin Name: My Block Theme Plugin
    Description: A custom plugin for block theme enhancements.
    Version: 0.0.0
    Author: 
    License: GPL2 or later
    */
    
    // theme.json スタイル設定を上書き
    add_filter( 'wp_theme_json_data_user', function( $theme_json ) {
        $data = $theme_json->get_data();
        // h2 の背景色を上書き
        $data['styles']['elements']['h2']['color']['background'] = 'var(--wp--preset--color--bg-secondary, #efefef)';
        $data['styles']['elements']['h2']['spacing']['padding'] = '.6em .7em .5em';
        $data['styles']['elements']['h2']['border']['radius'] = '4px';
        // h3 の下線(ボーダー)を3pxの黒線に
        $data['styles']['elements']['h3']['border']['bottom']['color'] = '#333';
        $data['styles']['elements']['h3']['border']['bottom']['width'] = '1px';
        $data['styles']['elements']['h3']['border']['bottom']['style'] = 'solid';
        $data['styles']['elements']['h3']['spacing']['padding'] = '.6em 0 .5em';
        $theme_json->update_with( $data );
        return $theme_json;
    });
    
    Attachments:
    You must be logged in to view attached files.
    #110939

    恭一橋本
    参加者

    石川様

    お世話になります。
    X-T9のHタグの件ですが、ご教示いただきありがとうございます。
    ワードプレス側の仕様なのですね。。石川様からいただいたコードを追加CSSに入れ、無事、Hタグのスタイルを選ばなくても反映されるようになりました!

    引き続きよろしくお願いいたします。

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