WordPress設定: CSS

CSS は，Web ページの見た目を決めるための言語です．文字の大きさ，色，余白，枠線，背景，配置などを指定できます．WordPress では，記事の内容は HTML として出力され，見た目はテーマや CSS によって整えられます．

まずはテーマに用意されている設定を使います．それでも足りない部分だけ CSS で調整すると，作業が分かりやすくなります．たとえば「見出しの余白を少し広げたい」「特定の文章だけ背景色を付けたい」「画像の枠線を変えたい」といった場合に CSS を使います．

CSS の追加方法は，使用しているテーマによって変わります．従来型のテーマでは 外観 > カスタマイズ > 追加 CSS を使うことが多く，ブロックテーマではサイトエディターの スタイル から CSS を追加する場合があります．このページでは，初心者が使いやすい方法から順に説明します．

追加 CSS

もっとも手軽な方法は，WordPress の「追加 CSS」に CSS を書く方法です．従来型のテーマでは，管理画面から 外観 > カスタマイズ > 追加 CSS を開きます．入力欄に CSS を書くと，プレビューで結果を確認できます．問題がなければ 公開 をクリックします．

ブロックテーマを使っている場合は，外観 > エディター からサイトエディターを開き，スタイル の画面で CSS を追加します．WordPress 6.2 以降では，スタイル画面にサイト全体のカスタム CSS を扱う機能があります．ただし，画面の名前や位置はテーマや WordPress のバージョンで変わることがあります．

「追加 CSS」に書いた CSS は，テーマファイルを直接書き換えるより安全です．テーマを更新しても CSS が残りやすく，画面上で確認しながら修正できます．短い CSS や試験的な調整は，まずこの方法で行うとよいでしょう．

追加 CSS クラス

記事や固定ページの特定のブロックだけに CSS を効かせたい場合は，「追加 CSS クラス」を使います．これは CSS を書く場所ではなく，対象に名前を付けるための設定です．

1. 記事編集画面で，デザインを変えたいブロックを選択します．
2. 右側の設定パネルで 高度な設定 を開きます．
3. 追加 CSS クラス に，半角英数字でクラス名を入力します．例: my-note
4. そのクラス名に対応する CSS を「追加 CSS」へ書きます．

たとえば，ブロックに my-note というクラス名を付けた場合，次のように書きます．CSS ではクラス名の前にピリオドを付けます．

追加 CSS クラスの例

.my-note {
  padding: 12px;
  border-left: 4px solid #2f6f9f;
  background-color: #eef7fb;
}

子テーマで管理する方法

CSS が長くなった場合や，サイト全体で本格的に管理したい場合は，子テーマの CSS ファイルに書く方法があります．親テーマの CSS ファイルを直接編集すると，テーマの更新時に変更が消えることがあります．そのため，テーマファイルを編集する場合は子テーマを使います．

子テーマを使う方法は，CSS に慣れてからで構いません．初心者は，まず「追加 CSS」で短い変更を試し，安定して使う CSS が増えてきたら子テーマで管理する，という順番が分かりやすいです．

CSS は，「どの部分に」「どの見た目を適用するか」を書きます．基本形は次のとおりです．

CSS の基本形

対象 {
  プロパティ: 値;
}

たとえば，記事本文の段落の行間を少し広げたい場合は，次のように書きます．

段落の行間を調整する例

.entry-content p {
  line-height: 1.8;
}

CSS を書くときは，まず対象を正しく見つけることが大切です．ブラウザーの開発者ツールを使うと，見出し，段落，画像，メニューなどにどのクラス名が付いているかを確認できます．いきなり大きく変更せず，1か所ずつ小さく試すと，問題が起きたときに戻しやすくなります．

うまく反映されない場合は，対象の指定が違っている，別の CSS が優先されている，キャッシュが残っている，入力ミスがある，といった原因が考えられます．変更後は，PC だけでなくスマートフォンの表示も確認します．

CSS を追加するときは，次の点に注意します．

1. 親テーマの CSS ファイルを直接編集しないようにします．テーマ更新時に変更が失われる可能性があります．
2. CSS を変更する前に，現在の CSS をメモ帳などにコピーしておきます．失敗したときに元へ戻せます．
3. 一度に多くの CSS を追加せず，少しずつ追加して表示を確認します．
4. 文字色と背景色の組み合わせに注意します．読みにくい色や，コントラストの低い色は避けます．
5. 画面幅によって見え方が変わるため，PC，タブレット，スマートフォンで確認します．
6. テーマやプラグインの更新後に表示が変わることがあります．更新後は主要なページを確認します．
7. !important は最後の手段にします．多用すると，あとでどの CSS が効いているのか分かりにくくなります．
8. CSS は見た目を変えるものです．記事の内容やページ構造を変える目的では，HTML，ブロック設定，テーマ設定を使います．

CSS は便利ですが，少しの入力ミスでも表示が崩れることがあります．「小さく試す」「保存前に確認する」「元へ戻せるようにしておく」の三つを守ると安心です．

参考資料

更新履歴