【WordPress】CSSが効かない？テキストブロックの余白を調整した方法（追加CSSクラスも解説）

今回は、WordPressで「テキストの左側に余白を入れたいのにCSSが効かない…」という場面に遭遇したので、その解決方法をまとめます。

---

 ■ やりたかったこと

2カラムレイアウトで、

* 左：動画

* 右：テキスト

という構成にした際に、

👉 テキスト側の左に少し余白を入れたかった

---

 ■ 最初にやったこと（うまくいかなかった）

とりあえず追加CSSで

```css

.wp-block-column:nth-child(2) {

  padding-left: 20px;

}

```

を入れてみましたが…

👉 　全く効かない

---

 ■ 原因

原因はシンプルで、

👉 HTMLに直接CSSを書いてしまっていたこと

実際にはこんな感じになっていました👇

```html

<div class="wp-block-column is-vertically-aligned-top .wp-block-column:nth-child(2) { padding-left: 20px; }">

```

これでは当然CSSとして認識されません。

---

 ■ 解決方法①：追加CSSクラスを使う

WordPressのブロックには「追加CSSクラス」を設定できるので、これを使います。

 手順

1. テキスト側のカラムを選択

2. 「高度な設定」→「追加CSSクラス」にクラス名を入力

例：

```text

text-padding

```

---

 ■ 解決方法②：CSSを追加

外観 → カスタマイズ → 追加CSSに以下を記述

```css

.text-padding {

  padding-left: 20px;

}

```

👉 これでしっかり反映されます

---

 ■ なぜこの方法が良いのか？

* 特定のブロックだけに適用できる

* 他のデザインに影響しない

* 再利用できる

👉 実務でもよく使うやり方です

---

 ■ まとめ

WordPressでCSSが効かないときは、

* HTMLに直接書いていないか？

* セレクタが正しいか？

* ブロックにクラスが付いているか？

を確認すると解決しやすいです。

---

 ■ おまけ

今回のように

* ちょっとした余白調整

* レイアウトの微修正

* CSSが効かない問題

など、

「誰に聞けばいいかわからない」

といった内容も対応しています。

小さな修正でも大丈夫ですので、

お気軽にご相談ください。