【簡単カスタマイズ】SWELLでCSSを追加する方法まとめ

2025年8月8日2025年8月10日

この記事を書いた人：青山

Web制作エンジニア・マーケター（広告・SEO・アクセス計測・改善提案）・ライター

クリニック・金融・ECなど、様々な業種のSEO運用
D2C販売/リード獲得（Google/Meta広告など、幅広い媒体の取り扱い実績あり）
サイトの立ち上げディレクション〜コーディングまで対応
自社メディア複数立ち上げ・Kindle出版
企業メディアの運営支援、ライティング
100社以上の計測・分析と改善提案

学ぶだけで終わらせない。実務で成果に変える学びをメルマガで配信中。

WordPressの人気テーマ「SWELL」は、綺麗なデザインと簡単な操作性で人気ですが、日々運用している中で「もっとこうしたい」と思うこともあると思います。

たとえば、「見出しをもっとシンプルに」、「ボタンを自分色にしたい」など、細かい要望を実現するにはCSSの追加が必要になります。

ここでは、SWELLでCSSやHTMLを追加する方法を、初心者でもわかりやすいように解説します！

SWELLでCSSを追加する2つの方法

SWELLでCSSを追加する方法は、
大きく分けて2つあります。

［方法①］設定メニューの「追加CSS」機能

【操作手順】

WordPress管理画面 → 「外観」 → 「カスタマイズ」 → 「追加CSS」

【メリット】

プレビューを見ながらカスタマイズできる
編集後すぐに見た目を確認できるので初心者にも安心

【デメリット】

CSSが増えると、長文になって見づらくなる
複雑なカスタマイズには不向き
入力画面の枠が狭いので使いづらい

［方法②］子テーマのstyle.cssに追加

CSS記述に慣れている人や、本格的にカスタマイズしたい人はこちらの方法がオススメです。

【操作手順】

SWELLの子テーマをインストール
WordPress管理画面 → 「外観」 → 「テーマファイルエディター」 → style.cssに追加

【メリット】

子テーマを使用すれば、SWELLのアップデートで上書きされない
コードを保守しやすい

【デメリット】

テーマのファイルをいじる必要があるので、慣れていないと少し心配

ちなみに、ワードプレスでテンプレートを編集する方法は2通りあります。

ワードプレス管理画面から直接編集する
FTPソフトを使って、サーバー経由でファイルをダウンロード、アップロードする

推奨は2ですが、FTP接続が面倒な場合は、1の方法でも問題ないと思います。

HTMLを追加する場所はどこ？

CSSだけでは実現できないカスタム要素を追加する際は、HTMLを直接追加する必要があります。

HTMLを追加する方法も、大きく2通りあります。

［方法①］子テーマのPHPファイルに追加

CSSの時と同じように、子テーマフォルダのファイルを編集する必要があります。

※親テーマフォルダのファイルを編集すると、テーマ更新の際に編集内容が消えるため。

ただ、デフォルトで子テーマフォルダに用意されているのは、「functions.php」と「style.css」のため、FTP経由でファイルをアップロードする必要があり、少しハードルが高めです。

例）

記事下に追加 → single.php
ヘッダーの上部に追加 → header.php
フッターの上に追加 → footer.php

［方法②］ウィジェットのHTMLブロックを使う

子テーマのテンプレートファイルを編集するのはハードルが高めなので、基本的にはウィジェットのHTMLブロックを使った方が安心です。

【操作手順】

WordPress管理画面 → 「外観」 → 「ウィジェット」
「カスタムHTML」ブロックを追加

私はこのブログで、TOPページのメインビジュアルの下に独自のコンテンツを追加していますが、ウィジェットの「トップページ上部」の箇所にカスタムHTMLを使用しています。

スタイルは子テーマのstyle.cssに記載しています。

編集する際の注意点まとめ

独自のCSSやHTMLを追加する際の注意点です。

!importantの使いすぎに注意
→スタイルが効かない場合に使用されることの多い!importantですが、使いすぎると色々なところに影響が出る可能性があるので、多用は厳禁です。
レスポンシブ対応はしっかり(スマホ表示も見る)
→SWELLはレスポンシブテーマなので、PC版とSP版両方をチェックしながら編集する必要があります。
反映されない時は、まずキャッシュを疑う
→CSSを追加しても適用されない時は、まずはキャッシュを消してみましょう。
HTMLは必ず子テーマ側またはウィジェットで。親テーマには手を加えない
→テーマ更新の際に消える可能性があるので気を付けましょう。

よくあるCSSカスタマイズ例

ボタンを追加する（HTML+CSS）

◾️HTML（ウィジェットやテンプレートに追加）

<a href="#" class="custom-btn">詳しく見る</a>

◾️CSS（追加CSSまたは子テーマのstyle.cssに追加）

.custom-btn {
  display: inline-block;
  padding: 12px 24px;
  background-color: #0099cc;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.custom-btn:hover {
  background-color: #0077aa;
}