WordPressにCSSを追加する3つの方法｜初心者は追加CSSだけでOK

「このデザイン、コピペで使えます」という記事を見つけて、CSSをコピーしたのはいいものの。
「これ、どこに貼ればいいの？」と手が止まってしまった経験はありませんか。

実はWordPressの場合、CSSの貼り付け場所は基本的に1か所だけ覚えれば大丈夫です。

この記事では、いちばん簡単な「追加CSS」を中心に、WordPressにCSSを追加する3つの方法を初心者向けに解説します。
コピペしたCSSをブロックに反映させるクラス名の付け方や、貼ったのに変わらないときの対処法もまとめました。

この記事をブックマークしておけば、CSSのコピペで迷うことはなくなりますよ。

【結論】迷ったら「追加CSS」に貼ればOK

WordPressにCSSを追加する方法は、大きく分けて3つあります。
まずは全体像を早見表でどうぞ。

結論はシンプルです。
迷ったら追加CSSに貼れば大丈夫。

管理画面から数クリックでたどり着けますし、CSSを書き間違えてもデザインが少し崩れるだけで、サイトが壊れる心配はありません。
テーマをアップデートしても消えないので、初心者がCSSを試す場所として安心です。

テーマのファイルを直接編集するのはNG

逆に、やってはいけないのがテーマ本体のファイルを直接編集することです。

テーマをアップデートすると、直接書き込んだ内容はすべて消えてしまいます。
さらに、functions.phpのようなPHPファイルを書き間違えると、画面が真っ白になってサイト全体が表示できなくなる恐れもあります。

CSSは必ず、これから紹介する3つの場所のどれかに書くようにしましょう。

ちなみに、CSSを追加するためのプラグインもありますが、標準機能の追加CSSで同じことができるので基本的に不要です。
プラグインは増えるほどサイトが重くなりやすいですからね。

方法1：追加CSSに貼る（いちばん簡単でおすすめ）

それでは、基本の追加CSSから見ていきましょう。
WordPressに標準で用意されている機能で、プラグインの追加もファイルの編集も必要ありません。

追加CSSの開き方と貼り付け手順

貼り付けた内容は、右側のプレビュー画面にすぐ反映されます。
変化を目で確かめながら作業できるのが、追加CSSのいいところです。

なお、右側の画面は自分にだけ見えているプレビューです。
公開ボタンを押すと、その時点で実際に公開中のサイトにも変更が反映されます。

もし表示がおかしくなっても、貼り付けたCSSを消してもう一度公開を押せば元どおりです。
まだ本番のサイトに反映したくないときは、公開ボタンの横にある歯車のアイコンから「下書き保存」を選ぶこともできますよ。

練習として、こんなCSSを貼ってみましょう。
段落を水色のボックスに変えるためのCSSです。

.cw-point-box {
  padding: 1em 1.2em;
  background: #f0f7ff;
  border-left: 4px solid #2196f3;
  border-radius: 4px;
}

ただし、貼っただけではまだ見た目は変わりません。
「どのブロックに適用するか」をクラス名で指定する必要があるためです。
その手順は、この後の章でくわしく説明しますね。

メニューに「カスタマイズ」が見当たらないとき

比較的新しいブロックテーマを使っている場合、外観メニューに「カスタマイズ」が表示されないことがあります。

そのときは、外観の中の「エディター」を開いて「スタイル」を選び、右上にある点が縦に3つ並んだボタンから「追加CSS」を開いてください。
入り口が違うだけで、使い方は同じです。

SANGOやCocoonなど、日本で人気のテーマの多くは従来型のテーマなので、基本は外観からカスタマイズで開けますよ。

注意：テーマを変えると追加CSSは引き継がれない

ひとつだけ覚えておいてほしい注意点があります。
追加CSSの内容はテーマごとに保存されるため、テーマを変更すると新しいテーマには引き継がれません。

テーマのアップデートで消えることはないので、ふだんの運用では心配いりません。
ただ、将来テーマを乗り換えるときは、追加CSSの中身をメモ帳などにコピーして控えてから作業してくださいね。

コピペしたCSSをブロックに反映させる方法

「追加CSSに貼ったのに、見た目が何も変わらない」。
その原因のほとんどは、ブロックにクラス名を付けていないことです。

コピペ用に配布されているCSSの多くは、クラス名とセットで作られています。
クラス名とは、どのブロックにそのデザインを適用するかを指定するための名前のことです。

「追加CSSクラス」の入力手順

さきほど追加CSSに貼った、水色ボックスのCSSを段落に適用してみましょう。

うまくいくと、下のように表示が変わります。

ここでひとつ、大事なポイントがあります。
入力欄には、クラス名の先頭のドット（.）を付けません。

CSSのコードでは .cw-point-box のようにドット付きで書きますが、追加CSSクラスの欄には cw-point-box とだけ入力するのがルールです。
ドットまで入力してしまうと反映されないので気をつけてくださいね。

HTMLとセットの見本は「カスタムHTML」ブロックへ

CSS見本の中には、HTMLとCSSがセットになっているものもあります。
ボタンやカードのように、少し凝ったデザインはHTMLごとコピペするタイプが多いですね。

その場合、HTMLの貼り付け先はカスタムHTMLブロックです。

たとえば、こんなHTMLです。

<a class="cw-sample-btn" href="#">ボタンのテキスト</a>

セットになっているCSSのほうは、これまでどおり追加CSSに貼ればOKです。

HTMLは記事の中へ、CSSは追加CSSへ。
この組み合わせさえ覚えれば、ネット上のコピペ見本はほとんど使えるようになりますよ。

方法2：子テーマのstyle.cssに書く

追加CSSは手軽な反面、CSSの量が増えてくると管理がつらくなってきます。
入力欄が小さくて全体を見渡しにくく、どこに何を書いたのか分からなくなりがちです。

目安として、CSSが100行を超えてきたら子テーマへの引っ越しを考えてみましょう。

子テーマってなに？

子テーマとは、いま使っているテーマ本体（親テーマ）の機能を引き継ぎながら、カスタマイズ部分だけを別のファイルで管理できる仕組みです。

カスタマイズを子テーマ側に書いておけば、親テーマをアップデートしても変更は消えません。
テーマ本体を直接編集してはいけない問題の、公式な解決策が子テーマというわけです。

SANGOやCocoonなど、人気テーマの多くは公式サイトで子テーマを配布しています。
ダウンロードした子テーマを、外観のテーマ画面からアップロードして有効化するだけなので、自作する必要はありません。

style.cssへの書き方

子テーマを有効化したら、外観の中の「テーマファイルエディター」を開きます。

画面の右上で、編集対象がテーマ本体ではなく子テーマになっていることを確認してください。
そのうえで、右側のファイル一覧からスタイルシート（style.css）を選びます。

あとはファイルの末尾にCSSを書き足して、「ファイルを更新」をクリックすれば反映されます。
書ける内容は追加CSSとまったく同じです。

なお、テーマファイルエディターで触っていいのは子テーマのstyle.cssだけと決めておくのが安全です。
PHPファイルの編集には別のリスクがあるので、慣れないうちは近づかないようにしましょう。

方法3：ブロックスタイルとして登録する（上級）

最後は、よく使うデザインをワンクリックで呼び出せるようにする方法です。

お気に入りのデザインをブロックスタイルとして登録しておくと、追加CSSクラスを毎回入力しなくても、ブロックの設定エリアに出てくるボタンで切り替えられるようになります。

登録には、WordPressが用意しているregister_block_styleという仕組みを使い、PHPのコードを少しだけ書きます。
難易度は上がりますが、同じデザインを何度も使う人には、入力の手間が減るぶん快適さも大きい方法です。

くわしい登録手順は、こちらの記事で画像付きで解説しています。

【WordPress】ブロックスタイルの追加方法｜コピペで使える実例集

CSSが反映されないときの4つのチェックポイント

CSSを貼ったのに見た目が変わらないときは、上から順に次の4つを確認してみてください。
体感ですが、ほとんどのケースはこの4つのどれかで解決します。

チェック1：キャッシュが残っていないか

いちばん多い原因はキャッシュです。
キャッシュとは、表示を速くするためにブラウザやサーバーが一時保存している古いデータのことです。

まずは、キャッシュを無視した強制的な再読み込みを試しましょう。
WindowsならCtrl＋F5、MacならCommand＋Shift＋Rを押すと、ページを読み込み直せます。

キャッシュ系のプラグインやサーバー側のキャッシュ機能を使っている場合は、そちらの削除ボタンも押してみてください。

チェック2：クラス名が合っているか

CSS側のクラス名と、ブロックに入力したクラス名が1文字でも違うと反映されません。
よくあるミスはこのあたりです。

手入力はミスのもとなので、見本からのコピペが確実ですよ。

チェック3：貼り付け場所を間違えていないか

CSSのコードを、カスタムHTMLブロックや記事本文にそのまま貼っていないでしょうか。
styleタグに囲まれていないCSSは、本文に貼ってもただの文字として表示されるだけです。

CSSの置き場所は、追加CSSか子テーマのstyle.css。
HTMLの置き場所は、記事内のカスタムHTMLブロック。
もう一度たしかめてみてください。

チェック4：テーマのCSSに負けていないか

ここまで確認しても変わらない場合、テーマにもともと入っているCSSのほうが強く効いている可能性があります。

CSSには優先順位のルールがあり、同じ場所への指定がぶつかったときは、より強い書き方をしたほうが勝つ仕組みです。

そんなときは、負けているプロパティに !important を付けると、強制的に優先させられます。

.cw-point-box {
  background: #f0f7ff !important;
  border-left: 4px solid #2196f3 !important;
}

実際、当ブログで使っているSANGOというテーマでは、テーブルやフォームまわりにテーマ側の装飾がしっかり効いています。
そのため、backgroundやborderに !important を付けないと見た目が変わらないケースがありました。

ただし、!importantは付けすぎると、あとから上書きできなくなって管理が大変になります。
反映されないプロパティにだけ、ピンポイントで付けるのがコツです。

まとめ：貼り付け場所が分かればコピペCSSは怖くない

最後に、この記事のポイントをまとめます。

貼り付け場所さえ分かってしまえば、ネット上のコピペ見本はぜんぶ、あなたのサイトを彩る素材になります。