H2の文字サイズを調整したい

♥ 0

いいねをした人: 居ません

このトピックには6件の返信、2人の参加者があり、最後にJKDECORにより1年、 2ヶ月前に更新されました。

7件の投稿を表示中 - 1 - 7件目 (全7件中)

投稿者

投稿
2023年2月8日 1:59 PM #117717

JKDECOR
参加者

♥ 40

【お使いの Snow Monkey のバージョン】19.0.0
【お使いの Snow Monkey Blocks のバージョン】18.0.0
【お使いの Snow Monkey Editor のバージョン】9.1.1
【お使いのブラウザ】safari
【当該サイトのURL】https://livingskape.jkdecor.com

### 実現したいこと

アップデート後、
H2のタイトルがかなり大きくなってしまいました。
文字サイズを以前くらいに小さくしたいです。
ご確認のほど、よろしくお願いします。

♥ 0

いいねをした人: 居ません

2023年2月8日 4:14 PM #117744

キタジマタカシ
参加者

♥ 2247

スマホのときですかね？

♥ 0

いいねをした人: 居ません

2023年2月8日 5:20 PM #117760

JKDECOR
参加者

♥ 40

あ！すいません！

そうです！スマホの時になります！

♥ 0

いいねをした人: 居ません

2023年2月9日 2:16 PM #117819
キタジマタカシ
参加者

♥ 2247
Snow Monkey は画面サイズが 640px 未満をスマホサイズと定義しているのでそれを指定するのと、ページ直下は .p-entry-content なので、下記のような CSS で調整できます。
```
@media (max-width: 639px) {
    .p-entry-content > h2 {
        font-size: 20px;
    }
}
```
入れ子にすると記事直下じゃなくなってスタイルが当たらなくなるので、必要に応じてセレクタを追加してください。

♥ 0

いいねをした人: 居ません
2023年2月9日 2:41 PM #117822
JKDECOR
参加者

♥ 40
ありがとうございます！

ちなみにH3の文字サイズを調整する場合は
```
@media (max-width: 639px) {
  .p-entry-content > h3 {
    font-size: 18px;
  }
}
```
で合っていますか？

以前こちらでH3のデザインを変更していただき、
以下のような追加CSSを追加しています。
```
/*H3のデザイン変更*/
.p-entry-content>h3,
.wp-block-group__inner-container>h3 {
  border-left: solid 4px #333;
  padding-left: 10px;
}

.p-entry-content>h2,
.wp-block-group__inner-container>h2 {
  background-color: #000;
  color: #fff;
}
```
これとバッティングするようなことはありますか？

♥ 0

いいねをした人: 居ません
2023年2月9日 2:45 PM #117825

キタジマタカシ
参加者

♥ 2247

プロパティ（上記でいえば font-size とか border-left とか）がダブってなければ大丈夫です！ただ、いろんなところに記述が散らばっているとわかりにくくなるので、まずは h2 関連のものを並べて、次に h3 関連のものを並べて〜みたいに順番は整えたほうが後でみたときにもわかりやすいと思います。

♥ 0

いいねをした人: 居ません

2023年2月9日 3:01 PM #117827

JKDECOR
参加者

♥ 40

なるほど！分かりました！
教えて頂いた方法でH2とH3のサイズ調整ができました！

お忙しい中ありがとうございました！

♥ 1

いいねをした人:
投稿者

投稿