SWELLで追加CSSを追加する方法と反映されない時の対処

2026年10月29日

※本記事はアフィリエイト広告を含む記事へのリンクを含みます。

SWELLの標準機能だけでは届かない、あと少しのデザイン調整をしたいと思ったことはありませんか。見出しの色を少し変えたい、余白をほんの少し広げたいなど、細かいこだわりが出てきますよね。そんなときに役立つのが「追加CSS」です。

この記事では、SWELLで追加CSSを安全に追加する方法を手順付きで解説します。私が実際にやってしまった表示崩れの失敗や、テーマ更新で消えない書き方もお伝えしますね。CSS初心者の方でも、安心して試せる手順にまとめました。

※まだSWELLを導入していない方へ：SWELLは買い切り型のWordPressテーマなので、一度購入すれば追加費用なしでずっと使えます。この記事で紹介している設定も、ブロックエディタ上でクリックするだけで再現できますよ。

➡️【公式】SWELLの購入ページはこちら

デザインに悩む時間を減らして、記事を書くことに集中できる環境が手に入ります。

ニャフィ

CSSを追加したいけど、どこに書けばいいのかにゃ？

たいがブログ

迷いますよね。安全に書ける場所がちゃんとありますよ。

ニャフィ

書き間違えてサイトが崩れたらこわいにゃ…

たいがブログ

失敗しないコツと手順を、順番にご紹介しますね。

▼あわせて読みたい：デザインを整えたブログも、表示が遅いと読者は離れてしまいます。ブログの土台になるサーバー選びはこちらで解説しています。

SWELLの追加CSSとは？書く前に知っておきたい基本

追加CSSとは、テーマのデザインに自分好みの見た目の指定を上乗せするためのコードです。テーマ本体のファイルを直接書き換えずに、デザインを細かく調整できます。

SWELLでCSSを書く場所は、主にカスタマイザーの「追加CSS」と子テーマの2つです。ちょっとした調整なら、まずは追加CSSから始めるのがおすすめです。

テーマファイルを直接書き換えてはいけない理由

以前使っていた別のテーマでは、本体のstyle.cssを直接書き換えていたため、テーマを更新した瞬間にカスタマイズがすべて消えてしまいました。何時間もかけた調整が一瞬でなくなり、本当に落ち込んだのを覚えています。追加CSSに書けば、テーマを更新しても消えません。

大量に書くなら子テーマを使う

CSSが数十行を超えてくるなら、SWELL公式が配布している子テーマのstyle.cssに書くのもひとつの方法です。コードを1か所にまとめて管理できるので、あとから見直すときに迷いにくくなりますよ。

SWELLで追加CSSを追加する方法

ここからは、もっとも手軽なカスタマイザーの「追加CSS」にコードを書く手順を見ていきましょう。右側のプレビューで、変化を確かめながら書けるのが魅力です。

書く前に、今のデザインをスクリーンショットで残しておくと安心です。うまくいかなかったときに、元の状態と比べやすくなります。

カッコの閉じ忘れに気をつける

私は一度、最後の「}」を閉じ忘れて、その下に書いたCSSがまるごと効かなくなったことがあります。原因に気づくまで30分以上悩みました。書いたら必ずカッコの数を確認しましょう。

コメントを残して何のコードかわかるようにする

CSSには「/* 見出しの色を変更 */」のようにコメントを書けます。数か月後に見返しても、どのコードが何をしているのかすぐにわかりますよ。

STEP

カスタマイザーを開く

WordPressの管理画面から「外観」→「カスタマイズ」をクリックして、カスタマイザーを開きます。

STEP

追加CSSの項目を選ぶ

メニューの一番下にある「追加CSS」をクリックして、コードの入力欄を表示させます。

STEP

コメント付きでCSSを書き込む

入力欄にコメントと一緒にCSSを書き込み、右側のプレビューで見た目が変わったか確認します。

STEP

公開して保存する

問題がなければ、画面上部の「公開」をクリックして変更を保存します。

STEP

スマホとパソコンで表示を確認する

キャッシュを削除してからサイトを開き、スマホとパソコンの両方で表示が崩れていないか確認したら完了です。

追加CSSが反映されないときの対処法

書いたはずのCSSがサイトに反映されないのは、追加CSSでいちばん多いお悩みです。多くの場合、コードそのものではなく、キャッシュや優先順位が原因になっています。

慌ててコードを書き直す前に、原因をひとつずつ切り分けるのが近道です。順番に確認していけば、ほとんどのケースは自分で解決できますよ。

まずはキャッシュを削除して確認する

キャッシュプラグインやブラウザに古いページが残っていると、新しいCSSが読み込まれません。私もCSSが効かないと1時間近く悩んだ末、キャッシュを消しただけで直ったことがあります。CSSを変えたら、キャッシュ削除とブラウザの再読み込みをセットで行う習慣をつけておきましょう。

優先順位で負けていないか検証ツールで調べる

CSSは、より詳しく指定されたものが優先される仕組みです。ブラウザの右クリックから「検証」を開くと、どの指定が効いているか確認できます。別のテーマを使っていたころは「!important」を乱用して収拾がつかなくなったので、まずはセレクタを具体的にして調整するのがおすすめです。

▼あわせて読みたい：デザインを整えたら、次は読まれる記事を増やしていきましょう。無料から使えるキーワード調査ツールの実力はこちらで正直にレビューしています。

SWELLの追加CSSでよくある質問

特定のブロックだけデザインを変えたいです。: ブロックの右サイドバーにある「高度な設定」→「追加CSSクラス」に名前を付け、そのクラスに対してCSSを書けば、狙ったブロックだけを変えられます。
スマホだけデザインを変えることはできますか？: できます。画面幅を条件にする「@media」という書き方を使えば、スマホ表示のときだけ効くCSSを書けますよ。
SWELLを更新したら追加CSSは消えますか？: カスタマイザーの追加CSSに書いた内容は、SWELLを更新しても消えません。ただし念のため、コードはメモ帳などにも控えておくと安心です。
CSSを書いたら表示が崩れてしまいました。: 追加CSSを開き、最後に書いたコードを削除するか「/* */」で囲んで無効化しましょう。それだけで元の表示に戻ることがほとんどです。