WordPressカスタムCSS追加ガイド | デザインをカスタマイズする方法

カスタムCSSとは？

CSS（Cascading Style Sheets）は、Webサイトの見た目を制御するコードです。カスタムCSSを追加することで、テーマのデザインを上書きして変更できます。

カスタムCSSでできること

文字の色、サイズ、フォントの変更
背景色、背景画像の変更
余白、間隔の調整
ボタンのデザイン変更
レイアウトの微調整

基礎知識不要：HTMLやCSSの知識がなくても、サンプルコードをコピー&ペーストするだけで使えます。

カスタムCSSの追加方法

方法1: カスタマイザーで追加（おすすめ）

最も簡単で安全な方法です。

WordPress管理画面で「外観」→「カスタマイズ」
「追加CSS」をクリック
CSSコードを入力
リアルタイムでプレビュー確認
「公開」をクリック

メリット：リアルタイムプレビューで結果を確認しながら編集でき、テーマを更新してもCSSが消えません。

方法2: プラグインを使う

「Simple Custom CSS and JS」などのプラグインを使う方法もあります。

「Simple Custom CSS and JS」をインストール・有効化
「Custom CSS & JS」→「Add Custom CSS」
CSSコードを入力
公開

方法3: 子テーマのstyle.cssに追加

上級者向けです。子テーマを作成し、そのstyle.cssにCSSを追加します。

注意：親テーマのstyle.cssを直接編集してはいけません。テーマ更新時に変更が消えてしまいます。必ず子テーマを使いましょう。

よく使うカスタムCSSサンプル

1. 見出しの色を変える

h2 { color: #FF6B35; }

2. リンクの色を変える

a { color: #1976D2; }
a:hover { color: #FF6B35; }

3. サイドバーの幅を変える

.sidebar { width: 300px; }

4. フォントサイズを変える

body { font-size: 16px; }

5. 背景色を変える

body { background-color: #F5F5F5; }

6. ボタンのデザインを変える

.button {
  background-color: #1976D2;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}

CSSセレクタの基本

CSSでスタイルを適用するには、どの要素に適用するかを指定する「セレクタ」が必要です。

主なセレクタ

要素セレクタ：h1, p, a など（すべてのh1要素に適用）
クラスセレクタ：.class-name（特定のクラスを持つ要素に適用）
IDセレクタ：#id-name（特定のIDを持つ要素に適用）

セレクタの調べ方

ブラウザで右クリック→「検証」
開発者ツールで要素を確認
クラス名やID名をチェック
そのセレクタを使ってCSSを書く

注意点とトラブルシューティング

CSSが反映されない場合

キャッシュをクリア：ブラウザやプラグインのキャッシュが原因かも
セレクタを確認：スペルミスやセレクタの間違い
詳細度を上げる：より具体的なセレクタを使う
!importantを使う：最終手段（多用は非推奨）

CSSの優先順位

CSSには適用の優先順位があります。

インラインスタイル（HTML内に直接記述）
ID セレクタ
クラスセレクタ、属性セレクタ
要素セレクタ

!important：どうしても反映されない時は、プロパティの最後に !important を追加できますが、乱用すると後々メンテナンスが大変になります。

レスポンシブデザイン対応

スマホとPCで異なるスタイルを適用したい場合は、メディアクエリを使います。

スマホのみに適用

@media (max-width: 768px) {
body { font-size: 14px; }
}

PCのみに適用

@media (min-width: 769px) {
body { font-size: 18px; }
}

まとめ

カスタムCSSを使えば、プログラミングの知識がなくても、サイトのデザインを自由にカスタマイズできます。

カスタムCSS追加のチェックリスト

✓ 「外観」→「カスタマイズ」→「追加CSS」で追加（推奨）
✓ サンプルコードを活用
✓ リアルタイムプレビューで確認
✓ キャッシュをクリアして確認
✓ レスポンシブ対応を忘れずに

🎨 WordPressカスタムCSS追加ガイド