【SWELL】見出しデザインの変え方は？カスタマイザーの基本設定とCSSカスタマイズも紹介

記事の印象は、見出しのデザインでかなり変わります。SWELLなら、見出しデザインはカスタマイザーから選ぶだけで変更可能。さらにこだわりたい人は、CSSを少し足せば「自分だけの見出し」も作れます。この記事では、コード不要の基本設定と、CSSで触る応用の両方を解説します。

ブログ歴6年・SWELL歴5年、本業ではシステム推進室でWebも触っている僕が、初心者でも安全にできる手順で説明します。CSSが初めてでもコピペで試せるようにしました。

• カスタマイザーで見出しデザインを変える基本手順
• 見出しの色だけ変える方法
• CSSで見出しを自分好みにする（コピペOK）と注意点

SWELLの見出しデザインはどこで変える？

SWELLの見出しデザインは、大きく2つの方法で変えられます。

• 基本：カスタマイザーで用意されたデザインから選ぶ（コード不要）
• 応用：追加CSSで自分好みに作り込む（コードを書く）

まずは基本から。多くの人はカスタマイザーの設定だけで満足できます。

【基本】カスタマイザーで見出しデザインを変える

コードを一切使わずに、見出しのデザインを選べます。手順は次のとおりです。

画像挿入：カスタマイザーの見出しデザイン選択画面のスクリーンショット

見出しの色だけ変えたいとき

「デザインはそのままで色だけ変えたい」という場合も、カスタマイザーの見出し設定内にあるカラー項目で変更できます。文字色とライン（罫線・背景）色を別々に指定できるので、ここだけ触れば十分なケースも多いです。

【応用】CSSで見出しを自分好みにカスタマイズする

カスタマイザーの選択肢に好みのものがなければ、CSSで作り込みます。CSSは「外観」→「カスタマイズ」→「追加CSS」に書くのが安全です。ここに書いたCSSはデータベースに保存され、テーマをアップデートしても消えません。

以下はコピペで試せる例です。色コード（例：#4c93e3）を自分のサイトカラーに変えて使ってください。

例1：h2を「左の太いライン＋下線」にする

.post_content h2 { background: none; border: none; border-left: 6px solid #4c93e3; border-bottom: 2px solid #4c93e3; padding: .4em .2em .4em .6em; color: #0f3159; }

例2：h3を「下線だけ」のシンプルデザインにする

.post_content h3 { border: none; border-bottom: 2px solid #4c93e3; padding-bottom: .3em; }

例3：h2を「背景塗りつぶしボックス」にする

.post_content h2 { background: #4c93e3; border: none; color: #ffffff; padding: .5em .8em; border-radius: 4px; }

もしCSSが反映されない場合は、SWELL標準のスタイルが優先されている可能性があります。その時は各行の末尾に !important を付ける（例：border-left: 6px solid #4c93e3 !important;）と上書きできます。ただし多用は避け、必要な箇所だけにとどめましょう。

CSSカスタマイズの注意点

• 親テーマのファイルは直接編集しない：アップデートで消えます。必ず「追加CSS」か子テーマで
• 変更前にバックアップ：書き換え前のCSSをメモ帳などに控えておくと安心
• スマホ表示も確認：paddingやfont-sizeはスマホで崩れやすい
• !importantは最小限：付けすぎると後で調整できなくなる

よくある質問（FAQ）

まとめ：まず基本、こだわるならCSS

SWELLの見出しデザインは、カスタマイザーから選ぶだけでサマになります。さらに個性を出したいときは、「追加CSS」に数行足すだけで自分だけの見出しが作れます。CSSは追加CSSに書けば元に戻せるので、怖がらずに試してみてください。他のカスタマイズも、使い方ガイドの早見表から逆引きで進められます。