Title: 画面サイズに応じてフォントサイズを変更したい
Last modified: 2025年2月5日

---

# 画面サイズに応じてフォントサイズを変更したい

 *  解決済 [nice-guy](https://ja.wordpress.org/support/users/nice-guy/)
 * (@nice-guy)
 * [1年、 8ヶ月前](https://ja.wordpress.org/support/topic/%e7%94%bb%e9%9d%a2%e3%82%b5%e3%82%a4%e3%82%ba%e3%81%ab%e5%bf%9c%e3%81%98%e3%81%a6%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%b5%e3%82%a4%e3%82%ba%e3%82%92%e5%a4%89%e6%9b%b4%e3%81%97%e3%81%9f%e3%81%84/)
 * みなさん、こんにちは。WordPress 6.7.1 　x-t9-の子テーマを使用しています。H4の
   部分を画面サイズに応じてフォントサイズを変更したいと思います。
   そこで、下記の
   様なCSSを考えたのですが、
 * 画面幅が760px以上の場合は
   [@media](https://ja.wordpress.org/support/users/media/)
   screen and (min-width: 760px) {font-size: 40px;}}/* 画面幅が760px未満の場合の
   スタイル */[@media](https://ja.wordpress.org/support/users/media/) screen and(
   max-width: 759px) {font-size: 20px;}}
 * これをどこに書き込めば良いか教えていただけませんか。
   現状は下記の様になってい
   ます。
 * タイポグラフィーのサイズはxxx Largeとなっています。
   よろしくお願いします。
 * > [View post on imgur.com](https://imgur.com/a/jmhDdmH)
    -  このトピックは[nice-guy](https://ja.wordpress.org/support/users/nice-guy/)
      が1年、 8ヶ月前に変更しました。
    -  このトピックは[nice-guy](https://ja.wordpress.org/support/users/nice-guy/)
      が1年、 8ヶ月前に変更しました。

10件の返信を表示中 - 1 - 10件目 (全10件中)

 *  [genepine](https://ja.wordpress.org/support/users/genepine/)
 * (@genepine)
 * [1年、 8ヶ月前](https://ja.wordpress.org/support/topic/%e7%94%bb%e9%9d%a2%e3%82%b5%e3%82%a4%e3%82%ba%e3%81%ab%e5%bf%9c%e3%81%98%e3%81%a6%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%b5%e3%82%a4%e3%82%ba%e3%82%92%e5%a4%89%e6%9b%b4%e3%81%97%e3%81%9f%e3%81%84/#post-11690833)
 * こんにちは
   ブロックテーマではサイト全体に適用される　追加CSS欄の位置がテーマ編集
   内に移動しています。そこに記入すれば適用されます。[https://catchthemes.com/fse-faq/how-to-add-custom-css-in-block-themes/](https://catchthemes.com/fse-faq/how-to-add-custom-css-in-block-themes/)
 * カスタマイズごとに管理しやすいようにしたいとき
   WP-Code のようなコードカスタマイズ
   のプラグインを使います。それぞれ命名するとカスタマイズごとに有効・無効を切り替え
   られます。[https://wordpress.org/plugins/insert-headers-and-footers/](https://wordpress.org/plugins/insert-headers-and-footers/)
 *  トピック投稿者 [nice-guy](https://ja.wordpress.org/support/users/nice-guy/)
 * (@nice-guy)
 * [1年、 8ヶ月前](https://ja.wordpress.org/support/topic/%e7%94%bb%e9%9d%a2%e3%82%b5%e3%82%a4%e3%82%ba%e3%81%ab%e5%bf%9c%e3%81%98%e3%81%a6%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%b5%e3%82%a4%e3%82%ba%e3%82%92%e5%a4%89%e6%9b%b4%e3%81%97%e3%81%9f%e3%81%84/#post-11690834)
 * [genepine](https://ja.wordpress.org/support/users/genepine/)([@genepine](https://ja.wordpress.org/support/users/genepine/))
   さん、レスありがとうございました。下記の様に設定すれば良いのですよね。
 * > [View post on imgur.com](https://imgur.com/a/KfmblSX)
 * 違いがわかるように240pxにしましたが、改善されませんでした。40pxでもダメでした。
   どこが悪いのでしょうか?
 *  [genepine](https://ja.wordpress.org/support/users/genepine/)
 * (@genepine)
 * [1年、 8ヶ月前](https://ja.wordpress.org/support/topic/%e7%94%bb%e9%9d%a2%e3%82%b5%e3%82%a4%e3%82%ba%e3%81%ab%e5%bf%9c%e3%81%98%e3%81%a6%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%b5%e3%82%a4%e3%82%ba%e3%82%92%e5%a4%89%e6%9b%b4%e3%81%97%e3%81%9f%e3%81%84/#post-11690835)
 * h4 を指定していないからです
   開発者ツールを利用[https://developer.chrome.com/docs/devtools/css?hl=ja](https://developer.chrome.com/docs/devtools/css?hl=ja)
   その部分のClassを確認、CSS反映を検証後書き写すh4{font-size: xxx-large;}それと
   カスタマイズを初めて適用する際には　該当部分のコードのみ記入して　ほかのCSSの
   影響を取り除くのがトラブルの発生を防ぐ方法です。 (WP-Codeを使うのはそのため)
 *  トピック投稿者 [nice-guy](https://ja.wordpress.org/support/users/nice-guy/)
 * (@nice-guy)
 * [1年、 8ヶ月前](https://ja.wordpress.org/support/topic/%e7%94%bb%e9%9d%a2%e3%82%b5%e3%82%a4%e3%82%ba%e3%81%ab%e5%bf%9c%e3%81%98%e3%81%a6%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%b5%e3%82%a4%e3%82%ba%e3%82%92%e5%a4%89%e6%9b%b4%e3%81%97%e3%81%9f%e3%81%84/#post-11690858)
 * [genepine](https://ja.wordpress.org/support/users/genepine/)([@genepine](https://ja.wordpress.org/support/users/genepine/))
   さん、レスありがとうございました。cheomeの開発ツールで調べたところ
 * > [View post on imgur.com](https://imgur.com/a/SdwIGXB)
 * 赤枠の　.has-huge-font-size {　の所を修正すると反映されることがわかりました。
   そこで、VSCodeで調べ
 * > [View post on imgur.com](https://imgur.com/a/HUlhFfJ)
 * 該当するところ、フォントサイズを試しに100　としましたが、反映されませんでした。
   開発ツールでfont-size: var(–wp–preset–font-size–huge) !important;　の行をコメント
   アウトして　font-sizeを指定すると反映されます。と言う状況ですが、どこが悪いので
   しょうか?
 *  [対馬 俊彦](https://ja.wordpress.org/support/users/uonumajs/)
 * (@uonumajs)
 * [1年、 8ヶ月前](https://ja.wordpress.org/support/topic/%e7%94%bb%e9%9d%a2%e3%82%b5%e3%82%a4%e3%82%ba%e3%81%ab%e5%bf%9c%e3%81%98%e3%81%a6%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%b5%e3%82%a4%e3%82%ba%e3%82%92%e5%a4%89%e6%9b%b4%e3%81%97%e3%81%9f%e3%81%84/#post-11690869)
 * CSS は `!important` がついていると最優先されるルールになっています。
 * 以下のように記述すればこっちを優先してもらえると思います。
 * `h4.has-huge-font-size { font-size: 100px !important; }`
 * こういう `!important` を `!important` で打ち消すってやり方はなるべくしない方が
   いいので、見出しブロックに **追加 CSS クラス** を指定してそのクラスに対して CSS
   を記述するのがおすすめです。
 *  トピック投稿者 [nice-guy](https://ja.wordpress.org/support/users/nice-guy/)
 * (@nice-guy)
 * [1年、 8ヶ月前](https://ja.wordpress.org/support/topic/%e7%94%bb%e9%9d%a2%e3%82%b5%e3%82%a4%e3%82%ba%e3%81%ab%e5%bf%9c%e3%81%98%e3%81%a6%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%b5%e3%82%a4%e3%82%ba%e3%82%92%e5%a4%89%e6%9b%b4%e3%81%97%e3%81%9f%e3%81%84/#post-11690874)
 * Toshihiko Tsushima([@uonumajs](https://ja.wordpress.org/support/users/uonumajs/))
   さん、レスありがとうございました。
   外観→カスタマイズ→追加CSSの所に[@media](https://ja.wordpress.org/support/users/media/)(
   min-width: 760px) {.wp-block-vk-blocks-slider h4 {font-size: 80px!important;}}
   [@media](https://ja.wordpress.org/support/users/media/) (max-width: 759px) {.
   wp-block-vk-blocks-slider h4 {font-size: 20px!important;}}と記述することで、とりあえず
   は出来ました。しかし、今後のために、そこではなくて
 * > [View post on imgur.com](https://imgur.com/7SMsNM0)
 * 画面右下、追加CSSの所へ記述しろということですよね？
   そこには、is-style-vk-heading-
   plain vk_block-margin-0–margin-top vk_block-margin-xs–margin-bottomと記述して
   あります。ここにどのように書いたら良いか教えていただけませんか。よろしくお願い
   します。
 *  [対馬 俊彦](https://ja.wordpress.org/support/users/uonumajs/)
 * (@uonumajs)
 * [1年、 8ヶ月前](https://ja.wordpress.org/support/topic/%e7%94%bb%e9%9d%a2%e3%82%b5%e3%82%a4%e3%82%ba%e3%81%ab%e5%bf%9c%e3%81%98%e3%81%a6%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%b5%e3%82%a4%e3%82%ba%e3%82%92%e5%a4%89%e6%9b%b4%e3%81%97%e3%81%9f%e3%81%84/#post-11690877)
 * 以下のやり方を試してみてください。
    1. H4 のタイポグラフィのサイズをリセットする。
       （!important を指定しなくするため）
    2. 追加 CSS クラスの先頭に以下のように slider-h4 と入力し、続けて半角スペースを
       入力する。
       is-style-vk-heading-plain vk_block-margin-0–…　　↓slider-h4 is-style-
       vk-heading-plain vk_block-margin-0–…
    3. h4.slider-h4 に対して font-size を記述する。
       !important の指定は不要。
 *  トピック投稿者 [nice-guy](https://ja.wordpress.org/support/users/nice-guy/)
 * (@nice-guy)
 * [1年、 8ヶ月前](https://ja.wordpress.org/support/topic/%e7%94%bb%e9%9d%a2%e3%82%b5%e3%82%a4%e3%82%ba%e3%81%ab%e5%bf%9c%e3%81%98%e3%81%a6%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%b5%e3%82%a4%e3%82%ba%e3%82%92%e5%a4%89%e6%9b%b4%e3%81%97%e3%81%9f%e3%81%84/#post-11690879)
 * Toshihiko Tsushima([@uonumajs](https://ja.wordpress.org/support/users/uonumajs/))
   さん、レスありがとうございました。
   まず、外観→カスタマイズ→追加CSSの所に追加した
   記述はコメントアウトしました。次に、該当部分のタイポグラフィのサイズはデフォルト
   に戻しました。高度な設定の所の追加CSSには次の記述をしました。h4.slider-h4 has-
   100-px-font-size is-style-vk-heading-plain vk_block-margin-0–margin-top vk_block-
   margin-xs–margin-bottom
 * これでは、ダメでした。どこの記述が悪いのでしょうか?教えていただけませんか。
   よろしく
   お願いします。
 *  [対馬 俊彦](https://ja.wordpress.org/support/users/uonumajs/)
 * (@uonumajs)
 * [1年、 8ヶ月前](https://ja.wordpress.org/support/topic/%e7%94%bb%e9%9d%a2%e3%82%b5%e3%82%a4%e3%82%ba%e3%81%ab%e5%bf%9c%e3%81%98%e3%81%a6%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%b5%e3%82%a4%e3%82%ba%e3%82%92%e5%a4%89%e6%9b%b4%e3%81%97%e3%81%9f%e3%81%84/#post-11690880)
 * 以下のやり方を試してみてください。
    1. H4 のタイポグラフィのサイズをリセットする。
    2. 追加 CSS クラス の先頭に以下のように slider-h4 と入力し、続けて半角スペースを
       入力する。
       is-style-vk-heading-plain vk_block-margin-0–…　　↓slider-h4 is-style-
       vk-heading-plain vk_block-margin-0–…
    3. 外観 → カスタマイズ → 追加 CSS に以下の CSS を記述する。
 * [@media](https://ja.wordpress.org/support/users/media/) (min-width: 760px) {
   
   h4.slider-h4 {font-size: 80px;}}[@media](https://ja.wordpress.org/support/users/media/)(
   max-width: 759px) {h4.slider-h4 {font-size: 20px;}}
 *  トピック投稿者 [nice-guy](https://ja.wordpress.org/support/users/nice-guy/)
 * (@nice-guy)
 * [1年、 8ヶ月前](https://ja.wordpress.org/support/topic/%e7%94%bb%e9%9d%a2%e3%82%b5%e3%82%a4%e3%82%ba%e3%81%ab%e5%bf%9c%e3%81%98%e3%81%a6%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%b5%e3%82%a4%e3%82%ba%e3%82%92%e5%a4%89%e6%9b%b4%e3%81%97%e3%81%9f%e3%81%84/#post-11690899)
 * Toshihiko Tsushima([@uonumajs](https://ja.wordpress.org/support/users/uonumajs/))
   さん、レスありがとうございました。
   無事出来ました。なるほどそうやってやるので
   すね。どうもありがとうございました。

10件の返信を表示中 - 1 - 10件目 (全10件中)

 トピック「画面サイズに応じてフォントサイズを変更したい」には新たに返信することは
できません。

## タグ

 * [CSS](https://ja.wordpress.org/support/topic-tag/css/)
 * [font](https://ja.wordpress.org/support/topic-tag/font/)
 * [size](https://ja.wordpress.org/support/topic-tag/size/)

 * フォーラム: [使い方全般](https://ja.wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 10件の返信
 * 3人の参加者
 * 最後の返信者: [nice-guy](https://ja.wordpress.org/support/users/nice-guy/)
 * 最後の活動: [1年、 8ヶ月前](https://ja.wordpress.org/support/topic/%e7%94%bb%e9%9d%a2%e3%82%b5%e3%82%a4%e3%82%ba%e3%81%ab%e5%bf%9c%e3%81%98%e3%81%a6%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%b5%e3%82%a4%e3%82%ba%e3%82%92%e5%a4%89%e6%9b%b4%e3%81%97%e3%81%9f%e3%81%84/#post-11690899)
 * 状態: 解決済

## トピック

### 人気のトピック

### 返信がないトピック

### サポート関連ではないトピック

### 解決済みのトピック

### 未解決のトピック

### すべてのトピック