SWELLは使っている人が多いテーマなので、初期設定のまま使うと、見出しの形や色づかいが他のSWELLサイトとよく似てしまいます。このサイト（hiroky.org）も2024年7月からSWELLで運営していて、見出し・フォント・色の3つを変えるだけで印象はかなり変わると感じています。
この記事では、SWELLの標準設定で変えられる範囲と、このサイトで実際に使っている追加CSSのコードをそのまま紹介します。子テーマのファイルやPHPは触らず、WordPressの「追加CSS」だけで完結する内容です。
この記事の要点
- まずは標準設定（見出しのデザイン・フォントの種類・基本カラー）で変えられるところを変える
- それでも他サイトと似るなら、追加CSSで見出し・リンク色・表・引用の線を調整する
- 見出しだけ明朝体にして本文はゴシックのままにすると、雰囲気が変わっても読みやすさは落ちない
- Webフォントの読み込み（@import）は、追加CSSのいちばん上に置く
- 追加CSSを差し替えるときは、既存のコードを消さないように中身を確認してから
まずはSWELLの標準設定で変えられるところ
| 変えたいもの | 設定の場所（公式マニュアルより） |
|---|---|
| 見出し2〜4のデザイン | カスタマイザーの「投稿・固定ページ」＞「コンテンツのデザイン」 |
| サイト全体のフォント | 「外観」＞「カスタマイズ」＞「サイト全体設定」＞「基本デザイン」 |
フォントは、游ゴシック・ヒラギノ（＞メイリオ）・Noto Sans JP・明朝体（Noto Serif JP）から選べます（SWELL公式マニュアル：フォント／見出しのデザイン）。
ただ、標準の選択肢はほかのSWELLサイトも同じものを選んでいるので、ここだけだと似た見た目になりやすいのが正直なところです。このサイトでは、標準設定で土台を決めたうえで、足りない部分を追加CSSで変えています。
このサイトで変えたところ（変更前と変更後）
| 箇所 | 変更前（このサイトの以前の設定） | 変更後 |
|---|---|---|
| 記事タイトル | ゴシックの太字 | 明朝体 |
| 本文の大見出し（h2） | 左に太い縦線 | 明朝体＋下に細い罫線 |
| 小見出し（h3） | ゴシックの太字 | 明朝体＋頭に短い罫線 |
| リンクの色 | 明るい青 | 少し落ち着いた青 |
| 表・引用 | 太めの線や背景色 | 罫線を細く、色を控えめに |
| 本文 | ゴシック | 変えていない（読みやすさを優先） |
ポイントは、見出しだけ明朝体にして、本文はゴシックのままにしたことです。長い本文まで明朝体にすると画面では読みにくくなりやすいので、雰囲気を出すのは見出しに絞っています。
見出しのデザインを変える追加CSS
追加CSSは「外観」＞「カスタマイズ」＞「追加CSS」に貼ります。最初に、色とフォントを変数にまとめておくと、あとで変えるときに1か所で済みます。
:root{
--hk-ink:#1b1b1b;
--hk-line:#e6e3de;
--hk-mincho:"Shippori Mincho","Yu Mincho","YuMincho","Hiragino Mincho ProN","Hiragino Mincho Pro","Noto Serif JP",serif;
}h2：左の太線をやめて、下に細い罫線
/* 本文中の h2：左の太線をやめ、下に細い罫線 */
.post_content h2:not(.is-style-section_ttl):not([class*="faq"]){
font-family:var(--hk-mincho);
font-weight:500;
font-size:clamp(19px,2.6vw,23px);
letter-spacing:.06em;
line-height:1.6;
color:var(--hk-ink);
border-left:none;
border-bottom:1px solid var(--hk-line);
background:none;
padding:0 0 .55em;
margin-top:2.6em;
margin-bottom:1.1em;
}:not(.is-style-section_ttl) と :not([class*="faq"]) は、SWELLのセクション見出しやよくある質問のブロックまで変わってしまわないように外すための指定です。これを付けずに .post_content h2 全体へ効かせると、意図しない場所の見た目まで変わります。
h3：頭に短い罫線を添える
/* h3：頭に短い罫線を添える */
.post_content h3:not([class*="faq"]){
font-family:var(--hk-mincho);
font-weight:500;
font-size:clamp(16px,2.1vw,19px);
letter-spacing:.05em;
line-height:1.7;
color:var(--hk-ink);
border:none;
background:none;
padding:0;
}
.post_content h3:not([class*="faq"])::before{
content:"";
display:inline-block;
width:16px;
height:1px;
background:var(--hk-line);
vertical-align:middle;
margin-right:.6em;
}見出しのフォントをWebフォントの明朝体にする
見出しだけに明朝体を使いたい場合、パソコンに入っている明朝体（游明朝など）だけを指定すると、環境によって表示が変わります。このサイトでは見た目をそろえるため、Google Fontsの「しっぽり明朝」を読み込んでいます。上の変数 --hk-mincho の先頭に指定しているのがそれです。
@import url("https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500;600&display=swap");この1行は、追加CSSのいちばん上に置いてください。@importは、ほかのルールより後ろに書くと効きません。読み込みは display=swap を付けているので、フォントの読み込みを待って表示が止まることはありません。
リンク色・表・引用を控えめにする
/* リンク色を少し落ち着かせる */
.post_content a:not(.swell-block-button__link):not([class*="btn"]){
color:#2f6ea8;
text-underline-offset:.22em;
text-decoration-thickness:1px;
}
/* 表：罫線を細く、見出しセルは薄い生成り */
.post_content .wp-block-table th{
background:#faf9f7;
font-weight:500;
}
.post_content .wp-block-table th,
.post_content .wp-block-table td{
border-color:var(--hk-line);
}
/* 引用：左の太線をやめて細い線だけに */
.post_content blockquote{
border-left:1px solid var(--hk-line);
background:none;
padding-left:1.4em;
}リンクはボタンまで色が変わらないように、SWELLのボタンを除外しています。表と引用は線を細くして色を抜くだけでも、全体が落ち着いた印象になります。
カスタマイズで気をつけたこと
追加CSSを入れ替えるときは、既存のコードを消さない
このサイトでも、追加CSSを丸ごと差し替えようとして、以前から入っていたコード（パンくずの表示調整など）まで消しそうになったことがあります。追加CSSには、自分が入れたことを忘れているコードが残っていることが多いので、差し替える前に今の中身を全部コピーして控えておくのが安全です。
スマホとPCの両方で表示を確かめる
レイアウトを詰めすぎると、スマホでは問題なくてもPCで崩れる、あるいはその逆が起きます。このサイトでは、記事一覧のサムネイルを小さくしすぎてカテゴリのラベルが画像を覆ったことがあり、一覧ではラベルを非表示にしました。見出しの余白を変えたときも、画面幅の狭いスマホで詰まって見えないかを確認しています。
子テーマが必要になるのはPHPを触るとき
見た目の調整だけなら追加CSSで足ります。テンプレートや機能を変えたい場合は子テーマを使います。判断のしかたはこちらにまとめています。
これからSWELLを入れる方へ
SWELLは、そのままでも整ったデザインで使えて、少し手を加えれば自分のサイトらしくできるテーマです。STORK19・AFFINGERから乗り換えて使っている立場で、良かった点と困った点をまとめたレビューと、価格の考え方の記事もあります。
SWELLのカスタマイズについてよくある質問
SWELLの見出しデザインはどこで変えられますか？
カスタマイザーの「投稿・固定ページ」＞「コンテンツのデザイン」で、見出し2〜4のデザインを選べます（SWELL公式マニュアルより）。標準にない形にしたい場合は、追加CSSで調整します。
SWELLのフォントは変更できますか？
できます。「基本デザイン」のフォント設定で、游ゴシック・ヒラギノ（＞メイリオ）・Noto Sans JP・明朝体から選べます。見出しだけ別のフォントにしたい場合は、このサイトのように追加CSSで見出しに指定します。
カスタマイズに子テーマは必要ですか？
見た目の調整だけなら、WordPressの追加CSSで足ります。このサイトも見出し・色・表・引用の変更は追加CSSだけで行っています。
追加CSSが効かないときは？
@importを書いている場合は、追加CSSのいちばん上にあるか確認してください。見出しが変わらない場合は、SWELL側の指定のほうが優先されていることがあるので、このサイトのように対象を .post_content の中に絞って指定します。
カスタマイズすると表示が遅くなりますか？
CSSだけなら大きな負担にはなりにくいです。このサイトの追加CSSは全体でも約6KB（2026年9月時点）です。Webフォントを読み込む場合は、このサイトのように使う太さ（500と600）だけに絞ると読み込む量を抑えられます。
まとめ
SWELLは利用者が多いぶん、そのままだと他のサイトと似やすいテーマです。まずは標準設定で見出しとフォントを選び、それでも似ていると感じたら、追加CSSで見出し・リンク色・表や引用の線を変えてみてください。このサイトのように、見出しだけ明朝体にして本文はゴシックのままにすると、雰囲気は変わっても読みやすさは保てます。