rockrockさん

「@mediascreen and ～」の部分を…。

「@media screen and ～」にして、お試しいただけますでしょうか。
（「@media」と「screen」の間に半角スペースをいれる）

別件ですが・・・。

なお、親テーマが古いようです。

投稿者:: @rockrock

テーマ名：Cocoon
バージョン：2.3.2

上記バージョンでは、WordPress 6.0には対応していないと思いますので、最新バージョン（2.4.4くらい）にアップデートすることをお勧めします。

また、以下のプラグインは、WordPressの日本語環境において必須と言えるそうです。
無用なトラブルを避けるためにも、インストールなさることを強くお勧めします。

WP Multibyte Patch
https://ja.wordpress.org/plugins/wp-multibyte-patch/

画面幅によって細かな設定はできませんが、スマホ幅（480px以下）の設定の変更機能ならあります。
Cocoon設定の「全体」タブの「モバイルサイトフォント」から変更できます。
ただ、端末幅ごとに細かな設定をしたい場合は、CSSを書く必要はあります。

@mk２様、@わいひら様

お返事いただきましてありがとうございます。

mk２様にご指摘いただいた通り、

@media screen and ~ に変更したところ
一部分は変更されました。
ありがとうございます。
ただし、写真のようにセミナー情報的な部分は変更されませんでした。

fontをいじりすぎたのでしょうか？
太文字にしたことと空白での隙間の作り方がわからず、
間に背景色に文字色を変えて、下線を追加しているのが問題でしょうか？

親テーマとプラグインについてもありがとうございます。
更新していなかったので、早速させていただいたのと、
プラグインは導入していたのですが、有効化されていませんでした。

わいひら様、ありがとうございます。
そちらも設定させていただいたのですが、反映されませんでした。
なのでstyle.cssから変更させていただきました。
ご回答ありがとうございます。

投稿者:: @rockrock

ただし、写真のようにセミナー情報的な部分は変更されませんでした。

見出しなど、個別にfont-sizeを指定しているものに対しては適用されません。
個別にfont-sizeを指定する必要があります。

@chu-ya ありがとうございます！

個別に指定ということは、<span>などを新たに付け足して、
個別にレスポンシブのCSSに書いていくということでしょうか？

Wordpress側のHTMLを直接いじってみたのですが、
エラーになることあり、それでやるしかないでしょうか？

投稿者:: @rockrock

個別に指定ということは、などを新たに付け足して、

個別にレスポンシブのCSSに書いていくということでしょうか？

以下に例を示します。
知って通り、個々の要素を特定できるようにclassが付いています。
図の赤枠のように、新エディタでfont-sizeを変えた場合でも個別のclassが付加されます。
この為、変更したい要素を特定させる必要があります。

<span>などの要素追加の必要はないと思います。

@media screen and (max-width: 480px) {
  .xxxx {←要素を特定して書いていますか？
    font-size: 8px;
  }
}

rockrockさん

以下をご覧いただくのが良いかもしれないです。

CSSのセレクタとは？覚えておきたい25種類と書き方
https://saruwakakun.com/html-css/reference/selector

@chu-ya 様

何度もご回答いただきましてありがとうございます。
そこの要素がすっかり抜けておりました。

要素を追加させていただきまして、

@media screen and (max-width: 1024px) {
/* 1024pxまでの幅の場合に適応される */
p.has-text-align-center {
font-size: 16px;
}
}
@media screen and (max-width: 768px) {
/* 768pxまでの幅の場合に適応される */
p.has-text-align-center {
font-size: 14px;
}
}
@media screen and (max-width: 480px) {
/* 480pxまでの幅の場合に適応される */
p.has-text-align-center {
font-size: 10px;
}
}
@media screen and (max-width: 320px) {
/* 320pxまでの幅の場合に適応される */
p.has-text-align-center {
font-size: 8px;
}
}

上記の形と pのみと.has-text-align-centerのみの全てを実施してみました。
またdiv タグのentry-contentを追加してみましたが、
結果は画像のように変わらずです。

@mk2様

情報のご提供ありがとうございます。
サイトを参考にさせていただきました。

何度も何度も申し訳ないです。
ご回答いただけると幸いです。

よろしくお願いいたします。

検証結果等載せさせていただきます。

@rockrock さん

上図、検証結果で左右の指し示す所が違います。
親テーマのスキン「ダークエンジ」で上記CSSをコピーし、検証しましたが、添付図のようにp.has-text-align-centerにはfont-sizeが反映されます。
肝心なCSSが見えないので、状況がつかみ難いです。

@chu-ya 様
何度もありがとうございます。
こちらの不手際でなかなかうまく伝えられず申し訳ないです。

検証結果になります。

続けてで申し訳ないですが、現在のstyle.cssになります。

rockrockさん

「fz-32px」にフォントのサイズが指定してあるはずです。

ただし、ここを変えると他のところにも影響がある思いますので、他に影響がないようにセレクタを詳細に書いておかねばならないと思います。
（そもそも32pxを指定しているのでは・・・）

実際のものを拝見できず、結局どこなんだと良く分からないところもあり、なかなか厳しい感じはしますけど。
（途中から見ると、もう良く分からないです・・・）

@rockrock さん

CSSを書く場所がそもそも間違っています。

• 親テーマCSSの上部に書いていますが、下部にfont-size:16pxの指定があるので、そちらが優先される。
• /wp/wp-content/themes/cocoon-master/style.css、親テーマCSSを直接弄るべきではない。
  CSSの優先順、子テーマCSS＞親テーマスキン＞親テーマCSSとなます。
  →子テーマCSSに記述して下さい。
  もしくは、[外観]→[カスタマイズ]→[追加CSS]に書くべきです。

@mk2 様、@chu-ya様

ありがとうございます。

子テーマのレスポンシブをどれだけいじってもムリでした。
そもそもfz-22pxで指定していたので、変更が効かなかったみたいです。

全て外してしまってそこから個別に設定することで改善できました。
何度も教えていただいた上に、ご丁寧に説明いただきましてありがとうございました。