サポート » テーマ » Twenty Twenty-One で文字サイズをカスタマイズ

  • Twenty Twenty-One で文字サイズをカスタマイズしたいのですが,うまくいか
    ないのでご教示願いたいです.環境は,xserver で wordpress 5.9 を使用して
    います.

    具体的には,極小,小,通常,大,特大などの文字サイズを,追加 CSS に
    記述したいのですが,うまくいきません.以前は,

    –global–font-size-xs
    –global–font-size-sm
    –global–font-size-md
    –global–font-size-lg
    –global–font-size-xl

    を設定してやれば変更できたのですが,5.9 になってから効かなくなったよう
    に思います.

    ちなみになぜこのようなことがしたいかというと,PC とスマホで文字サイズを
    変えたいからです.以前は,

    :root {
    –global–font-size-lg: 1.6rem;
    –global–font-size-xl: 4rem;
    –global–font-size-xxl: 6rem;
    }

    @media (max-width: 767px) {
    :root {
    –global–font-size-lg: 1.6rem;
    –global–font-size-xl: 2.7rem;
    –global–font-size-xxl: 4rem;
    }
    }

    みたいな設定でうまくいっていたのですが,今はこれが効きません.厳密には,

    ・–global–font-size-xxl の設定によって page title の文字サイズは変更できる
    ・–global–font-size-base の設定によって デフォルトの文字サイズは変更できる

    のですが,それ以外が効かないという中途半端な状況です.

    よろしくお願い致します.

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • pcm1704kさん、こんにちは。

    ローカル環境でテーマを合わせて確認していますが、

    :root {
        --global--font-size-xl: 2.5rem;
        --global--font-size-xxl: 6rem;
        --global--font-size-xxxl: 9rem;
        --heading--font-size-h3: 2rem;
        --heading--font-size-h2: 3rem;
    }

    の記載はstyle.cssに存在しているのが確認できます。

    上書きができないと言うことは、CSS の適用順の問題だと思いますので、テーマの CSS よりも後に読み込む、管理画面上の追加 CSS に記載してみる(ヘッダーに直書きされるので適用順が優先されるはず)、など試してみてはいかがでしょうか。

    ご参考になれば。

    トピック投稿者 pcm1704k

    (@pcm1704k)

    shokun0803 さん,

    アドバイスありがとうございます.フォントの指定は,管理画面上の追加 CSS
    に書いているのですが,なぜか効かないのです.実際 –global–font-size-xxl
    や –global–font-size-base は override できているので,あとから読み込ま
    れていることは間違いないと思います.なんで効かないのか,狐につままれた気
    分です.

    pcm1704kさん、こんにちは。

    CSS がどの順番で適用されているのかは、ブラウザのデベロッパーツール等を確認してみるのが最も確実です。
    サイズが上書きできていないと思われる個所を右クリックして検証してみて、styles の適用を確認してみましょう。打消し線が入っていたらそれよりも後に適用されている CSS 指定があるあずです。

    ご参考になれば。

    トピック投稿者 pcm1704k

    (@pcm1704k)

    shokun0803 さん,

    アドバイスありがとうございます.

    > CSS がどの順番で適用されているのかは、ブラウザのデベロッパーツール等を確認してみるのが最も確実で> す。

    なるほど,こういうツールがあるのですね.私にはややしきいが高そうですが,
    使ってみます.

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「Twenty Twenty-One で文字サイズをカスタマイズ」には新たに返信することはできません。