WordPressで作ったサイトのデザインを自分好みにアレンジしたいとき、手軽に使えるのが「追加CSS（カスタムCSS）」機能です。テーマのファイルを直接編集しなくても、フォントの色やサイズ、ボタンのスタイルなどを細かく調整できます。WordPressの追加CSSをマスターしておくと、テーマのアップデートで変更が消えるリスクもなく、安心してデザインをカスタマイズできます。この記事では、初心者の方に向けて基本的な使い方から実践的なコード例まで丁寧に解説します。
追加CSS（カスタムCSS）とは何か
WordPressには、テーマのデザインに上書きする形でオリジナルのCSSコードを記述できる「追加CSS」機能が標準搭載されています。CSSとは「Cascading Style Sheets」の略で、Webページの見た目（色・フォント・レイアウトなど）を制御するための言語です。
テーマのCSSファイルを直接編集する方法もありますが、テーマをアップデートすると変更内容が上書きされてしまうリスクがあります。追加CSSに書いたコードはWordPressのデータベースに保存されるため、テーマを更新しても消えません。少量のデザイン調整をしたいときに最適な方法です。
追加CSSの開き方と基本的な使い方
追加CSSを使い始めるための手順を紹介します。特別なプラグインは不要です。
- WordPress管理画面にログインする
- 左サイドメニューの「外観」→「カスタマイズ」をクリックする
- カスタマイザーが開いたら左メニューの「追加CSS」を選択する
- テキストエリアにCSSコードを入力する
- 「公開」ボタンをクリックして変更を反映する
カスタマイザーのプレビュー画面で変更をリアルタイムに確認できるので、コードを書きながら仕上がりを確認できるのが便利なポイントです。
CSSの基本的な書き方
CSSは「どこを（セレクター）、どのように（プロパティ：値）変えるか」という構造になっています。
セレクター {
プロパティ: 値;
}例えば、すべての段落テキストの色を濃いグレーに変えたい場合は次のように書きます。
p {
color: #333333;
}セミコロン（;）を忘れると正しく反映されないので注意してください。
すぐに使えるカスタマイズコード例
ここでは、ブログ運営でよく使われるカスタマイズのコード例を紹介します。コードをそのままコピーして試してみてください。
フォントサイズ・行間・色を変更する
記事本文の読みやすさはSEOにも影響します。フォントサイズや行間を適切に設定しておきましょう。
/* 本文テキストのスタイル調整 */
.entry-content p {
font-size: 16px;
line-height: 1.9;
color: #333333;
}「.entry-content」は多くのテーマで記事本文に使われているクラス名です。テーマによってクラス名が異なる場合は、後述の開発者ツールで確認してください。
リンクのスタイルを変更する
デフォルトのリンク色が目立たない場合や、下線のあり・なしを制御したいときに使えるコードです。
/* リンク色と下線（通常時） */
a {
color: #0066cc;
text-decoration: none;
}
/* マウスを乗せたとき（ホバー時） */
a:hover {
color: #ff6600;
text-decoration: underline;
}ボタンのデザインを変更する
WordPressのブロックエディター（Gutenberg）で挿入したボタンのスタイルを変えたいときに役立ちます。SWELLのボタンブロックにも応用できます。
/* ブロックエディターのボタン */
.wp-block-button__link {
background-color: #ff4500;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
transition: opacity 0.3s;
}
.wp-block-button__link:hover {
opacity: 0.85;
}「transition」を設定すると、ホバー時にスタイルが滑らかに切り替わり、クリックしたくなる見た目になります。
スマートフォン表示だけを調整する
パソコンでは問題なく見えるのに、スマートフォンで見ると文字が大きすぎるというケースに対応できるのが「メディアクエリ」です。
/* 画面幅768px以下（主にスマートフォン）のみ適用 */
@media (max-width: 768px) {
.entry-content p {
font-size: 14px;
line-height: 1.7;
}
}Googleはモバイルファーストインデックスを採用しているため、スマートフォン表示の最適化はSEO面でも重要です。
CSSセレクターの調べ方｜ブラウザの開発者ツールを活用する
「どのセレクターを指定すればよいかわからない」という場合は、ブラウザに標準搭載されている開発者ツールを使うと手軽に調べられます。
- Google Chromeでサイトを開き、変更したい箇所を右クリックする
- 「検証」を選択すると、画面右側に開発者ツールが表示される
- HTMLコードの中から該当要素のクラス名（class=”…” の部分）を確認する
- クラス名（例：.site-header）を追加CSSに記述する
たとえばサイトのヘッダー背景色を変えたいなら、ヘッダー部分を右クリック→検証でクラス名を確認し、そのクラスに background-color を指定するだけです。この方法を覚えると、どのテーマを使っていても応用が利くようになります。
追加CSSを使う際の注意点
便利な追加CSS機能ですが、使い方を間違えるとサイトのデザインが崩れることもあります。以下のポイントを押さえておきましょう。
!important の乱用は避ける
他のスタイルを強制的に上書きできる !important は便利ですが、多用すると後からデバッグが難しくなります。まずはセレクターの詳細度を上げることで対応しましょう。
変更前にコードをバックアップする
追加CSSを変更する前に、現在の内容をメモ帳やテキストファイルにコピーしておく習慣をつけると安心です。誤って削除しても素早く復元できます。
コメントで目的を記録する
後から見てもわかるよう、どのCSSがどの目的で書かれたかを /* コメント */ の形式で残しておくと管理しやすくなります。
大規模な変更は子テーマを使う
追加CSSは少量の調整向きです。レイアウト全体を変えるような大規模なカスタマイズをする場合は、子テーマの style.css に記述するほうが適切です。
まとめ
WordPressの追加CSS機能を使えば、テーマファイルを直接編集することなく、サイトのデザインを自由にカスタマイズできます。今回ご紹介したポイントをまとめます。
- 追加CSSは「外観」→「カスタマイズ」→「追加CSS」から編集できる
- プレビュー画面でリアルタイムに変更を確認しながら作業できる
- フォント・リンク・ボタン・レスポンシブ対応など幅広いカスタマイズが可能
- セレクターはブラウザの開発者ツールで簡単に調べられる
- !important の乱用を避け、コメントで目的を記録しておく
まずは小さな変更（フォントサイズの調整や色変更）から試して、CSSの感覚をつかんでみてください。慣れてくると、テーマをより自分らしくアレンジする楽しさが増してきます。
