ぺんくん「SWELLの見出しはどこから変えるの？」
「CSSが分からなくても、自分好みにできる？」
「読みやすい見出しの作り方を知りたい！」
SWELLの見出しデザインは、
- 標準設定で形を選ぶ方法
- 追加CSSで調整する方法
の2つでカスタマイズできます。
まずは標準設定を試し、好みの形が見つからないときにCSSを使うと進めやすくなります。
この記事では、次の内容を順番に解説します。
- 標準設定で見出しを変更する方法
- 追加CSSによる変更手順とコード例
- AIを使ったCSSの作成方法
- 変更が反映されないときの確認方法
管理人読みやすさと統一感を意識しながら、自分のブログに合う見出しを整えていきましょう。
大澤 壮登
- ムービースタイル株式会社代表
- ブログアフィリエイトスクール経営
- 動画編集スクール経営
- パソコンスクール運営
- 認定SEOコンサルタント
- SEO検定4級・3級・2級・1級
- パソコン整備士3級
- スマートフォン整備士3級
- 二等無人航空機操縦士
- FP2級
SWELLの見出しデザインを標準機能で変更する方法3ステップ
見出しの形や色を変えるなら、まずSWELLの標準設定を使ってみましょう。
コードを入力せず、プレビューを見ながら記事内の見出しをまとめて整えることができます。
以下の3つに分けて解説します。
管理人私は今、標準設定だけで見出しを整えています。
まずは設定画面を開き、形を選んでから色を合わせてみましょう。
①「コンテンツのデザイン」を開く
WordPressの管理画面で、
- 外観
- カスタマイズ
- 投稿・固定ページ
- コンテンツのデザイン
の順に開きます。
上記が、記事内の見出しをまとめて変更する場所です。
プレビューを確認して、H2やH3が入っている記事を表示すると違いが分かりやすくなります。
見出しデザインを変更すると、他の記事にも影響するため、最初に現在の設定をメモしておくのがおすすめです。
管理人記事を書く編集画面と、サイト共通の見出しを決める画面は違います。
今回は「外観」から進みます。
②H2・H3・H4のデザインを選ぶ
- 見出し2のデザイン
- 見出し3のデザイン
- 見出し4のデザイン
から、それぞれ好みの形を選びます。
H2はタイトルの次に大きな見出し
H3はH2見出しを更に分ける小見出し
H4はさらに細かい説明に使う見出し
管理人私の場合、H4見出しは使いません。
H2とH3だけで説明しています。
H4見出しを使うと階層が深くなりすぎて読者が情報を取りづらくなるため使っていません。
例えばH2は背景付き、H3は下線、H4は左線にすると、章の区切りを見分けやすくなります。
見た目のためにH2をH3へ変えるのではなく、文章の構成に合う見出しのままデザインを選んでください。
管理人ステッチが好きなのは私の好みです。
ご自身の記事の長い見出しでも、読みやすく見えるかを基準に選んでみてください。
③見出しのキーカラーを変更する
同じ画面の「見出しのキーカラー」設定で、見出しの装飾に使う色を選びます。
どの部分に色が付くかは、選んだデザインによって異なります。
背景付きのデザインでは、背景色と文字色が近すぎて読みにくくなっていないかも確認します。
形と色が決まったら、モバイル表示を確認して「公開」を押し、実際の記事にも反映されたかを確かめてください。
管理人私が初心者に勧めたいのは、統一感のあるシンプルな装飾です。
まずは色を増やしすぎないところから始めましょう。
SWELLの見出しをCSSでカスタマイズする手順3ステップ
標準設定に好みの形がない場合は、追加CSSで見出しを調整できます。
CSSとは、Webページの色や余白などの見た目を指定するコードのことです。
管理人私は追加CSSも試しましたが、装飾を増やしすぎて見づらくなった経験があります。
変えたい部分がはっきりしているときに使うと取り組みやすいです。
①変更前の設定を保存する
CSSを試す前に、現在の見出し設定をスクリーンショットで残し、既存の追加CSSをテキストファイルへコピーしておきます。
元の状態を残しておけば、万が一デザインが合わなかったときに戻すことができるためです。
H2だけを変更する場合でも、選んでいるデザイン名とキーカラーを控えてください。
管理人保存したファイルの先頭に保存した日付を付けておくと見つけやすくなります。
②追加CSSにコードを入力する
「外観」→「カスタマイズ」→「追加 CSS」を開き、使いたいコードを入力します。
この記事に記載しているCSS例は、最後の閉じかっこまで全てコピー＆ペーストしてください。
対象は記事内の通常のH2見出しで、他の記事にも共通して適用されます。
コードには元の飾り線を消す指定も含めているため、先に標準設定を「装飾なし」へ変更する必要はありません。
既存のコードがある場合は、その末尾で改行してコピペします。
管理人入力欄でエラーが出たら、保存する前にコピー漏れを確認しましょう。
③スマホでの表示を確認する
コードを入力したら、カスタマイザー下部のモバイル表示へ切り替えて見出しを確認します。
短い見出しは大抵の場合問題ないですが、2〜3行になる長い見出しの場合は、折り返しされて2行に表示されることもあります。
- 文字が枠からはみ出す
- 背景に文字が埋もれる
- 本文との間が詰まる箇所がないか
なども確かめてください。
問題がなければ「公開」で設定を保存し、手元のスマホでも記事を開いて確認します。
プレビューだけでは分からない文字の大きさや読みやすさを、実際の画面で見てから仕上げましょう。
管理人私がCSSを試した範囲ではスマホの表示崩れはありませんでした。
ただし、使うコードはそれぞれ違うので、確認はしておきましょう。
SWELLで使える見出しデザインのCSS例3選
ここでは、左線・背景色・下線を使うシンプルなCSSを紹介します。
3例とも通常のH2向けで、文字サイズはテーマの設定を引き継ぎます。
以下の3つに分けて解説します。
管理人まずは完成見本を見て、使いたい形を1つ選んでコピペしてください。
①左線を使ったシンプルな見出し
左側に青い線を入れるデザインは、章の始まりを示しながら、見出しの文字を読みやすく見せたいときに使えます。
上記の例では、ごく薄い背景色を合わせ、文字の周囲に余白を取っています。
線の色を変えるなら「#256b96」、線の太さを変えるなら「5px」を調整してください。
「padding」は文字と枠の内側のすき間を指定する項目です。
管理人以下のコードをSWELLの追加CSSに丸ごとコピーすると反映します。
/* 記事内の通常のH2見出しに適用。3例のうち1つだけ使用 */
.post_content h2.wp-block-heading:not(.is-style-section_ttl) {
box-sizing: border-box;
color: #17324d;
border: 0;
border-radius: 0;
box-shadow: none;
height: auto;
min-height: 0;
line-height: 1.6;
overflow-wrap: anywhere;
padding: 0.65em 0.9em;
background: #f3f8fc;
border-left: 5px solid #256b96;
}
/* 元のステッチや飾り線を重ねない */
.post_content h2.wp-block-heading:not(.is-style-section_ttl)::before,
.post_content h2.wp-block-heading:not(.is-style-section_ttl)::after {
content: none;
display: none;
}左線を太くするほど目立ちますが、文字より線が気になるようなら少し細く戻してみてください。
②背景色を使ったボックス型の見出し
背景色で囲む見出しは、長い記事の中でも章の区切りを見つけやすくしたいときに使えます。
この例は淡い緑の背景と濃い文字を組み合わせ、角を少し丸くしています。
背景色は「#e8f5f2」、文字色は「#17324d」で指定しています。
角の丸みを変える項目は「border-radius」です。
高さを固定していないため、見出しが折り返すとボックスも内容に合わせて広がります。
濃い背景へ変更する場合は文字との色の差も見直し、スマホでも無理なく読める組み合わせにしてください。
管理人以下のコードをSWELLの追加CSSに丸ごとコピーすると反映します。
/* 記事内の通常のH2見出しに適用。3例のうち1つだけ使用 */
.post_content h2.wp-block-heading:not(.is-style-section_ttl) {
box-sizing: border-box;
color: #17324d;
border: 0;
border-radius: 0;
box-shadow: none;
height: auto;
min-height: 0;
line-height: 1.6;
overflow-wrap: anywhere;
padding: 0.8em 1em;
background: #e8f5f2;
border-radius: 6px;
}
/* 元のステッチや飾り線を重ねない */
.post_content h2.wp-block-heading:not(.is-style-section_ttl)::before,
.post_content h2.wp-block-heading:not(.is-style-section_ttl)::after {
content: none;
display: none;
}背景色だけでも十分に目立ちます。
影や模様を足す前に、本文と並べたときの見やすさを見てみましょう。
③下線を使ったすっきりした見出し
下線だけの見出しは、背景を広く塗らずに章の区切りを示したいときに向いています。
この例では背景を透明にして、見出しの下に青い線を入れています。
線の太さは「3px」、線の色は「#256b96」を変えると調整できます。
下線が文字に近すぎると感じたら、下側の余白を少し増やして見比べましょう。
管理人以下のコードをSWELLの追加CSSに丸ごとコピーすると反映します。
/* 記事内の通常のH2見出しに適用。3例のうち1つだけ使用 */
.post_content h2.wp-block-heading:not(.is-style-section_ttl) {
box-sizing: border-box;
color: #17324d;
border: 0;
border-radius: 0;
box-shadow: none;
height: auto;
min-height: 0;
line-height: 1.6;
overflow-wrap: anywhere;
padding: 0.35em 0 0.55em;
background: transparent;
border-bottom: 3px solid #256b96;
}
/* 元のステッチや飾り線を重ねない */
.post_content h2.wp-block-heading:not(.is-style-section_ttl)::before,
.post_content h2.wp-block-heading:not(.is-style-section_ttl)::after {
content: none;
display: none;
}H2とH3が似た形になると区切りを見分けにくくなります。
線だけでなく文字の大きさも含めて、章の違いを確認してください。
AIを活用したSWELL見出しデザインの作成方法3ステップ
チャットGPTなどの画像を読み取れるAIを使うと、参考にしたい見出しの特徴を伝えることでCSSのたたき台を作れます。
以下の3つに分けて詳しく解説します。
管理人AIに頼むときも、変更する範囲を先に決めましょう。
「SWELLの記事内のH2だけ」と伝えると、確認する対象を絞れます。
①参考にしたいデザインがあればスクショする
他人のブログを見て参考にしたい見出しを見つけたら、見出し全体と前後の余白が分かる範囲でスクリーンショットを撮ります。
※第三者のデザインをそのまま複製するのではなく、線・背景色・余白などの特徴を参考にします。
色や形を調整して独自のデザインに仕上げましょう。
スクショするアプリは何を使っても良いですが、特にこだわりが無ければ「スクリーンプレッソ」が便利です。
見出しの一部だけを切ると、線の位置や余白をAIへ伝えにくくなるので、見出しとその周りをスクショしましょう。
- 線の形
- 背景色
- 角の丸み
など、どこを参考にしたいかも短くメモしておきましょう。
画像内の個人情報や不要な部分は取り除き、第三者のロゴ・イラスト・文章までそのまま使うのは避けてください。
管理人「この画像と同じにして」より、「この左線の形を参考に、ブログに合う青色で」と伝える方が、欲しい形を説明しやすいです。
②スクショしたデザインをAIに読み込ませCSSを作成
画像の入力に対応したAIへスクリーンショットを添付し、SWELL用の見出しCSSを作るよう依頼します。
AIへの依頼文の例です。
下記の依頼文を土台に、色や線の形などを自分の希望へ置き換えて使えます。
添付画像の見出しを参考に、WordPressテーマSWELL用のCSSを作ってください。
画像の特徴（線、背景色、角の丸み、余白）をまず説明してください。
ロゴ・イラスト・文章は複製せず、青系のシンプルな独自デザインに調整してください。
対象は記事内の通常のH2だけです。
.post_content h2.wp-block-heading:not(.is-style-section_ttl) を対象にしてください。
H3、記事タイトル、目次、FAQ、セクション用見出しは変更しないでください。
元のH2の背景・罫線・::before・::afterによる装飾が重ならないようにしてください。
スマホで2〜3行になっても文字が切れないよう、幅と高さを固定しないでください。
追加CSSに貼るCSSだけを出し、HTML、JavaScript、外部ファイル読み込みは含めないでください。
変更できる色や余白、適用範囲、元に戻す方法をコードの後に説明してください。
参考画像だけではサイトの設定や元のCSSまでは伝わらないため、対象がH2であることや、スマホで折り返したいことも書いてください。
画像の添付機能や利用条件は使うAIによって異なるので、対応しているサービスを選びましょう。
以下のようにHTMLコードが出力されます。
管理人一度に多くの飾りを頼むより、線や背景など変えたい部分を絞りましょう。
色と形の両方が違ったら、1つずつ直してもらうと比べやすくなります。
③追加CSSに作成したコードをコピーする
AIが出したコードのうち、CSSの部分だけを「外観」→「カスタマイズ」→「追加 CSS」へコピーします。
👆「追加CSS」を開き、AIが作成したCSSコードだけを貼り付ける
説明文やコードを囲む記号まではコピペ不要ですが、丸ごとコピペしても反映される場合が多いです。
プレビューで対象外の見出しが変わっていないかを見てから、スマホ表示も確認します。
見た目が違うときは、結果の画像と「下線が二重になる」などの具体的な症状をAIへ伝えます。
修正版を試すときは今回追加したコードだけを入れ替え、問題が解消したことを確かめてから「公開」を押しましょう。
管理人AIへの修正依頼では、困っている見出しと画面幅を伝えてください。
修正依頼する点以外は変更不要であることもAIに伝えるのがおすすめです。
SWELLの見出しデザインが反映されないときの確認方法3選
SWELLの見出しデザインの変更が見えないときは、保存状態、キャッシュ、CSSの重複の順に確認します。
私自身は見出しのCSS変更で反映トラブルを経験していませんが、確認する順番を知っておくと切り分けに役立ちます。
管理人最初に「プレビューでは変わるのか」「実際の記事でも変わらないのか」を見てください。
どちらかによって確認する場所が変わります。
①変更内容が保存されているか確認する
まず、カスタマイザーの「公開」を押して変更を保存したか確認します。
管理人意外と公開ボタンを押していないケースが多いです。
改めて確認しましょう。
プレビューの表示が変わっていても、保存前は実際の記事に反映されていないことがあります。
設定画面を開き直し、選んだデザインや入力したコードが残っているかどうかを見てください。
H3を見ているのにH2だけを変更しているなど、確認する見出しを取り違えていないかも併せて見ておきましょう。
管理人ここで押す「公開」は、記事の公開ではなくデザイン設定の保存です。
保存後に記事ページを開いて見比べてください。
②キャッシュに古い表示が残っていないか確認する
設定が保存されているなら、古い表示を一時的に残す「キャッシュ」を確認します。
キャッシュとは一言でいうと、一度使ったデータを一時的に保存して、次回から素早く使えるようにする仕組みです。
毎回、倉庫まで取りに行くのが大変な道具を、よく使うものだけ机の引き出しに入れておくイメージです。
Webサイトを初めて開くと、ブラウザはサーバーから画像・CSS・JavaScriptなどを読み込みます。
その一部をパソコンやスマートフォンに一時保存しておけば、次回は保存済みデータを利用できるため、ページを速く表示できます。
しかし、ブラウザ側が古いCSSのキャッシュを持っていると、「修正したはずなのにデザインが変わっていない」
ということがあります。
キャッシュを削除することで、変更が反映される場合があります。
まず記事を再読み込みし、別のブラウザでも同じ見え方か比べてみてください。
改善しない場合は、利用中のブラウザや高速化プラグイン、サーバーの案内に沿って該当するキャッシュを削除します。
SWELLにもキャッシュ削除機能がありますが、ブラウザやサーバーのキャッシュとは別です。
👆管理メニューの「設定」>「SWELL設定」>リセットタブを開く。
キャッシュ削除と設定の初期化を取り違えず、1か所ずつ確認して結果を見ましょう。
管理人キャッシュを消しても変わらなければ、保存済みのCSSが目的の見出しを指定しているか、次の項目へ進んでください。
③既存のCSSと重複していないか確認する
別のCSSが同じ見出しへ適用されていると、新しく書いた色や線が表示されないことがあります。
追加CSSの中に、似たようなCSSを重複して適用していないかどうか確認してください。
CSSは後から書いたものが必ず勝つわけではなく、対象の指定方法や優先指定によって結果が変わります。
分からないまま「!important」を増やすより、保存した元の状態に戻し、新しいコードを1種類だけ試しましょう。
線だけ残る場合は、見出し本体とは別の飾り線を作る「::before」「::after」の指定も確認します。
管理人困ったときは、追加したコードと変更前後の画像をそろえると相談しやすくなります。
サイト全体のCSSをまとめて消す必要はありません。
SWELLの見出しカスタマイズでよくある質問3つ
見出しの文字サイズや個別変更、元に戻す方法を確認します。
管理人全体の設定を変える前に、1つの見出しだけ直したいのかを考えましょう。
必要な範囲に絞ると、他の記事への影響を抑えられます。
まとめ｜SWELLの見出しデザインは標準設定から整えよう
SWELLの見出しは、標準設定でデザインを選ぶ方法と、追加CSSで好みに調整する方法で変更できます。
まずは「コンテンツのデザイン」を開き、形とキーカラーを合わせてみてください。
- 標準設定で好みの見出しを探す
- CSSを使う前に現在の設定を残す
- コードは1種類ずつ試し、スマホで確認する
AIを使ってCSSを作る場合も、変更する見出しの範囲を伝え、生成されたコードの表示を確かめてから保存しましょう。
うまく反映されないときは、保存状態から順に確認すると、むやみに設定を触らずに済みます。
管理人私が今使っているのは標準設定のステッチです。
見出しは、統一感を重視したシンプルな装飾が一番だと考えています。
まずは1つの形で記事全体を見てみてください。
SWELLの操作を少しずつ覚えたい人は、使い方の調べ方や学び方も参考にしてみてください。
