SWELLの見出しの使い方は？追加・使い分け・デザイン変更を解説

ブログを書いていて、SWELLで見出しをどう入れればいいのか、H2やH3をどう使い分ければいいのか、デザインはどこで変えるのか、と迷うことはありませんか。

結論からいえば、SWELLの見出しは、WordPress標準の「見出し」ブロックを入れて階層を守って使えば、デザインは自動で反映されます。

ただし、記事タイトルがH1として自動で出力されるため、本文の見出しはH2から始める必要があります。
また、H2から直接H4に飛ばすなど、階層の段飛ばしには注意が必要です。

この記事では、SWELLで見出しを追加する方法から、H2〜H4の使い分け、カスタマイザーでのデザイン変更、目次との関係、反映されないときの確認手順までを紹介します。

SWELLを使い始めたばかりの方も、見出しの整え方をもう一度見直したい方も、作業を進めやすくなるでしょう。

見出しの基本と設定の順番を押さえれば、読みやすく整った記事を作成しやすくなります。

この記事でわかること

• SWELLで見出しブロックを追加し、H2・H3・H4を切り替える方法
• H2を大きな話題、H3・H4をその内訳として使う階層の考え方
• カスタマイザーで見出しデザインをまとめて変更する手順と色の調整方法
• 見出しのデザインが反映されないときに確認したいキャッシュや設定の上書き

SWELLで見出しを追加するには？＋ボタンやブロック検索から見出しブロックを選ぶだけ

SWELLで見出しを追加するには、エディターの＋ボタンかブロック検索から「見出し」ブロックを選ぶだけです。
特別なプラグインや設定は必要ありません。

SWELLはブロックエディター（Gutenberg）に対応したWordPressテーマです。
見出しはWordPress標準の見出しブロックで入れ、デザインはSWELL側で自動的に当たります。
入れた瞬間から整った見た目になるので、初めての方でも迷いにくいはずです。

ここでは、見出しを入れる場面を3つに分けて、操作の流れを順番に見ていきます。

エディターの＋ボタンを押して見出しブロックを選ぶ

基本になるのが、＋ボタンから入れる方法です。
編集画面の左上にある青い＋ボタンを押すと、ブロックの一覧が開きます。
その中から「見出し」を選ぶと、カーソルの位置に見出しが入ります。

記事の途中に入れたいときは、段落ブロックの上や下にカーソルを置いてみてください。
行の端に小さな＋マークが出るので、そこを押しても同じ一覧が開きます。
書いている流れを止めずに入れられるのが特徴です。

一覧の中で見出しが見当たらないときは、「テキスト」などのカテゴリーを開くと見つかる場合があります。
エディターのバージョンによって並び方や表記が違うことがあるため、画面を見ながら探してください。

見出しブロックを入れたら、そのまま見出しの文章を打ち込みます。
入力後にEnterキーを押すと、次は段落ブロックに切り替わります。
続けて本文を書き進められるので、見出しと本文を交互に入れていく作業がラクになります。

ブロック検索に「見出し」と入力すると目的のブロックがすぐ見つかる

ブロックの数が多くて探しづらいときは、検索欄を使うのが手早い方法です。
＋ボタンで開いた一覧の上部に検索欄があるので、そこに「見出し」と入力します。
すると候補が絞り込まれ、見出しブロックが上のほうに表示されます。

英語で「heading」と入力しても見つかる場合が多いです。
SWELLには独自のブロックがたくさん並んでいますが、検索を使えば数が増えても探す手間は変わりません。

ここまでに出てきた入れ方を、表にまとめておきます。

入れ方	操作の流れ	向いている場面
＋ボタンから選ぶ	＋ボタンを押して一覧から「見出し」を選ぶ	ブロックの場所を目で見て選びたいとき
ブロック検索を使う	検索欄に「見出し」と入力して選ぶ	一覧から探す時間を減らしたいとき

どちらの方法でも、やることは見出しブロックを選んで文章を入れるだけです。自分の手に合うほうを使えば問題ありません。

挿入後はツールバーでH2・H3・H4のレベルを切り替える

見出しブロックを入れたら、次にレベルを確認します。
挿入直後はH2が選ばれていることが多く、ブロックの上に出るツールバーのレベルボタンを押すと、H2・H3・H4などを切り替えられます。

目安としては、次のように考えると整理しやすくなります。

• H2：記事の大きな話題に使う
• H3：H2の内容を具体的に分ける項目に使う
• H4：さらに細かい補足が必要な場面に使う

記事のタイトルはH1として自動で出力されます。
そのため、本文の見出しはH2から始めます。
ツールバーにH1が出ていても、本文中では選ばないことをおすすめします。ページ内にH1が重なり、文書の構造が崩れる可能性があります。

また、文字を大きく見せたいだけの理由でレベルを変えるのも避けたい使い方です。
目立たせたい箇所には、ボックスや太字、マーカーなど見出し以外の装飾を使います。
レベルごとの使い分けの考え方は、次のセクションで詳しく見ていきます。

見出しはH2を大きな話題、H3・H4をその内訳として階層順に使い分ける

見出しの使い分けは、H2を大きな話題、H3をその内訳、H4をさらに細かい補足として、階層の順に使うのが基本です。
本の「章・節・項」と同じ関係だと考えると、迷いにくくなります。

SWELLでは、見出しのレベルごとにデザインが自動で当たります。
見た目の違いは階層の目印にもなるので、順番を守るほど読者にも伝わりやすい記事になります。

レベル	役割	使う数の目安
H2	記事の大きな話題	記事全体で数個〜10個程度
H3	H2の具体的な内訳	1つのH2に2〜4個程度
H4	H3の細かい補足	必要な場面だけ

H2は記事の大きな話題ごとに1つずつ立てる

H2は、記事が扱うテーマを大きく分けたときの「章」にあたります。
話題が変わるところで新しいH2を立て、1つのH2には1つの話題だけを入れましょう。

たとえば「家庭の整理整頓」の記事なら、「玄関」「キッチン」「クローゼット」のように場所ごとにH2を分けるイメージです。
読者はH2だけを目で追えば、記事の全体像がつかめます。

H2の文言は、その章に何が書いてあるかが一目でわかる短さにします。
あれもこれも詰め込んだ長い見出しは、かえって読みにくくなります。

H3はH2の内容を具体的な項目に分けるときに使う

H3は、H2で示した話題を「具体的にどんな項目があるのか」に分けて見せるための見出しです。
H2の下で内容が複数に分かれるときに使います。

先ほどの例なら、「キッチン」のH2の下に「調理道具の置き場所」「食器の並べ方」といったH3を置きます。
H3はH2の内訳を並べるものと覚えておくと、使いどころを間違えません。

ただし、内訳が1つしかないのにH3だけ立てるのは不自然です。
項目が1つなら、H2の本文にそのまま書いたほうがすっきりします。
目安として、H3を立てるなら同じH2の下に2つ以上そろえましょう。

H4は細かい補足が必要な場面に限って使う

H4は、H3の内容をさらに細かく分けたいときの見出しです。
手順が長い解説や、比較する項目が多いときなどに向いています。

ただ、階層が深くなるほど、画面上では見出しの違いがわかりにくくなります。
多くの記事はH2とH3だけで十分に整理できるため、H4は本当に必要な箇所だけにとどめましょう。

H4を使うときも、H3の下に2つ以上そろえるのが基本です。
細かく分けすぎて読みづらくなったら、H4をやめて箇条書きにまとめる手もあります。

H2の直下にH4を置くなどレベルを飛ばさない

見出しは、H2の次はH3、H3の次はH4というように、順番に進めます。
H2の直下にいきなりH4を置くような段飛ばしを避けることをおすすめします。
文書の構造や目次の階層が崩れ、読者にも検索エンジンにも内容が伝わりにくくなります。

H4の見た目が気に入ったから使う、という理由もよくある失敗です。
見た目を変えたいときは、階層ではなくカスタマイザーのデザイン設定で調整します。

ここで、書いている途中に確認したいポイントをまとめておきます。

• H2の次に来る見出しは、H2かH3になっているか
• H4の前に、同じ話題のH3があるか
• 目立たせたいだけの理由でレベルを選んでいないか
• 同じレベルの見出しが、同じ役割でそろっているか

なお、上の階層に戻るのは自由です。
H4のあとに次のH2を立てるのは問題なく、下へ進むときだけ順番を守れば大丈夫です。

見出しのデザインはカスタマイザーでH2〜H4ごとにまとめて変更できる

見出しのデザインは、カスタマイザーでH2・H3・H4のレベルごとにまとめて変更できます。
一度決めれば、これまで書いた記事にも、これから書く記事にも同じデザインが当たります。

記事ごとに見た目を整える手間がなくなるので、更新が続くブログほどラクになります。
まずは、どこで何を選ぶのかを順番に見ていきましょう。

カスタマイザーの投稿・固定ページ設定で見出しスタイルを選ぶ

WordPressの管理画面から「外観→カスタマイズ」を開くと、カスタマイザーが表示されます。
この中の投稿・固定ページに関する設定に、H2・H3・H4それぞれのデザインを選ぶ項目があります。

H2は背景つきやライン付き、H3は下線や左ラインといったように、レベルごとに別のスタイルを選べます。
SWELLのバージョンによってメニューの表記や並び順が違う場合があるので、画面の名前は少し違っていても慌てなくて大丈夫です。

手順の流れは、次のとおりです。

• 管理画面から「外観→カスタマイズ」を開く
• 投稿・固定ページの設定から見出しの項目を探す
• H2、H3、H4の順にスタイルを選ぶ
• プレビューで確認してから「公開」を押す

変更する前に、今の設定をスクリーンショットなどで控えておくと安心です。
気に入らなかったときに元の設定を思い出せず、戻せなくなる失敗は意外とよくあります。

サイト全体で統一感を出すため個別ではなく全体設定で決める

見出しのデザインは、記事ごとに変えるよりサイト全体の設定で一度に決めるのが基本です。
見出しの見た目がバラバラだと、読者はどこが大きな話題なのか見分けにくくなります。

全体設定なら、H2は大きな話題、H3はその内訳、というレベルの違いが見た目でも伝わります。
読者が記事を読み進めるときの目印になり、迷いにくくなります。

あとからデザインを変えたくなったときも、カスタマイザーで一度直せば全記事に反映されます。
個別に設定していた場合は、記事を一つずつ開いて直すことになり、かなり大変です。

ブロック側の個別設定は、どうしても一部だけ変えたい場面に限った例外的な使い方と考えてください。
それ以外は全体設定にまかせるほうが、管理もしやすくなります。

プレビュー画面で本文とのバランスを見ながらスタイルを選ぶ

カスタマイザーには、変更した内容がその場で確認できるプレビュー画面があります。
スタイルを選ぶたびに見た目が切り替わるので、公開前に何度でも試せます。

ここで見たいのは、見出しそのものより本文との釣り合いです。
見出しだけが浮いて見えないか、本文が読みにくくならないか、といった点を確認します。

確認するときの目安を、表にまとめました。

チェックする点	見るポイント
H2とH3の差	レベルの違いが一目でわかるか
本文との余白	見出しの上下がつまりすぎていないか
文字の読みやすさ	背景色があっても文字がはっきり読めるか
スマホ表示	長い見出しが折り返しても崩れないか

パソコンだけでなく、スマホ表示への切り替えも試しておくと安心です。
読者の多くはスマホで読んでいる場合があるため、小さな画面でも見出しが自然に見えるスタイルを選んでください。

装飾の強いスタイルは目を引きますが、ページ全体で見ると重たく感じることもあります。
迷ったときは、シンプルなスタイルから試すことをおすすめします。

見出しの色・背景・ラインは全体ならカラー設定、一部ならブロック設定で変える

見出しの色を変えたいときは、サイト全体ならカスタマイザーのカラー設定、特定の見出しだけならブロック設定と使い分けます。
全体を先に整えておけば、個別の調整は最小限で済みます。

色を変える前に、今の設定をスクリーンショットなどで控えておくと安心です。
元の色がわからなくなると、戻すのに手間がかかります。

サイト全体の見出しカラーはメインカラーなどの基本カラーと連動させる

見出しのデザインは、サイトで決めたメインカラーなどの基本カラーと連動して色が付く場合があります。
そのため、見出しの色を変えたいときは、まず基本カラーの設定を見直すのが近道です。

基本カラーを変えると、見出しだけでなくボタンやリンクなど、ほかの部分の色にも影響します。
サイト全体の色味がそろうので、統一感を出しやすい方法です。

ただし、SWELLのバージョンによって画面の表記や項目の並びが変わることがあります。
設定項目の名前は、お使いの管理画面で実際に表示されているものを確認してください。

変更したあとはプレビューで、H2・H3・H4の色が意図どおりに反映されているかを見ておきましょう。
色を選ぶ前に、サイトの雰囲気に合う色を1〜2色に絞っておくと迷いません。

特定の見出しだけ色を変えるならブロックの文字色・背景色を使う

特定の見出しだけ目立たせたい場合は、見出しブロックを選んで、右側の設定パネルにある文字色や背景色の項目から変更できます。
カスタマイザーの設定はそのまま残るので、ほかの見出しには影響しません。

ただし、これは例外的な使い方として考えてください。
個別に色を付けた見出しが増えると、あとで全体の色を変えたときに、その見出しだけ取り残されてしまいます。

色を付けた見出しが増えすぎると、管理が大変になり、ページごとに見た目がばらつく原因になります。
使うのは、注意を引きたい場面など数か所程度にとどめるのが目安です。

色を変えるためにテーマファイルを直接編集することは避けてください。
アップデートで上書きされて消えることがあります。
CSSで調整したい場合は、子テーマか追加CSSを使いましょう。

ラインや背景の色は本文とのコントラストを優先して選ぶ

見出しのラインや背景の色は、見た目の好みだけで決めないことが大切です。
本文の文字と背景のコントラストが十分にあるかを先に確認すると、読みにくい見出しを避けられます。

たとえば、濃い背景に濃い文字色を重ねると、文字が沈んで読みづらくなります。
逆に薄い背景に薄い文字色でも、同じことが起きます。

選ぶときの目安を、下の表にまとめました。

チェックする点	見るポイント
文字と背景の差	明るさの差がはっきりしていて、文字が読み取れるか
ラインの色	本文の背景になじみすぎず、区切りとして見えるか
色の数	見出しに使う色が2〜3色程度に収まっているか
スマホ表示	明るい画面や屋外でも文字が読めるか

パソコンで見て問題なくても、スマホでは色の印象が変わることがあります。
両方の画面で確認してから、色を決めるようにしましょう。

書いた段落の変換やマークダウン記法を使えば見出しを素早く入れられる

見出しを素早く入れたいときは、ブロック変換・マークダウン記法・スラッシュ入力の3つを覚えておくと作業がラクになります。
どれもWordPressのブロックエディター（Gutenberg）に標準で備わっている機能です。

SWELLでは見出しブロックを入れれば、デザインは自動で当たります。
そのため、入れ方を変えても見た目が変わる心配はありません。

3つの方法の違いを、先に表で並べておきます。

方法	向いている場面	操作の目安
ブロック変換	先に文章を書き、あとから見出しに直したいとき	ツールバーのブロックアイコンから選ぶ
マークダウン記法	書きながら流れを止めずに見出しを作りたいとき	行頭に「## 」などを入力する
スラッシュ入力	キーボードだけで見出しブロックを呼び出したいとき	「/」に続けて「見出し」と入力する

書き終えた段落ブロックはブロック変換から見出しに変えられる

文章をひと通り書いてから、見出しを決める人は多いはずです。
そんなときは、段落ブロックを選んだ状態でツールバーの一番左にあるブロックアイコンを押し、一覧から「見出し」を選びます。
文字を打ち直す必要はありません。

変換すると、段落の文字はそのまま見出しの文字になります。
レベルはH2で入ることが多いので、内容に合わせてH3やH4へ切り替えてください。
切り替え方は最初のセクションで触れたとおり、ツールバーから行えます。

逆の変換もできます。
見出しにしたものの、ただ目立たせたかっただけだと気づいたら、段落に戻しましょう。
見出しは文字を大きく見せるための装飾ではなく、記事の構成を示す目印だからです。

強調したいだけの文は、太字やマーカー、ボックスで整えるほうが文書の構造を崩さずに済みます。

行頭に「##」と半角スペースを入力するとH2見出しになる

マークダウン記法は、段落の先頭に記号を打つだけで見出しに変わる方法です。
空の段落で「## 」（半角のシャープ2つと半角スペース）を入力すると、その段落がH2見出しになります。
「### 」ならH3、「#### 」ならH4です。

シャープの数がそのまま見出しのレベルを表します。
そのため、覚えるのは「数が増えるほど下の階層」という点だけです。
マウスに手を伸ばさず、文章を書く流れのまま見出しを入れられます。

• 「## 」＋見出しの文字で、H2になる
• 「### 」＋見出しの文字で、H3になる
• 「#### 」＋見出しの文字で、H4になる

本文中でH1は使わない決まりです。
記事タイトルがH1として出力されるため、シャープ1つの「# 」は使わず、H2の「## 」から始めましょう。

シャープのあとの半角スペースを忘れると、変換されずにそのまま文字として残ります。
全角スペースでも変換されないので、入力モードを確認してから打つと失敗が減ります。

スラッシュ入力で見出しブロックを呼び出せばマウス操作を減らせる

空の段落で半角の「/」を入力すると、ブロックの候補が一覧で出てきます。
続けて「見出し」と打てば候補が絞り込まれるので、Enterキーで決定します。
＋ボタンを押しに行く手間がなくなります。

環境によっては、日本語入力がオンのままだと候補がうまく出ない場合があります。
そのときは入力モードを半角英数に切り替えてから「/」を打ってみてください。

この方法の良さは、見出しだけでなくほかのブロックにも同じ手順が使えることです。
ボックスやふきだしなども、スラッシュのあとに名前を打てば呼び出せます。
一度慣れると、記事全体の作成スピードが上がります。

ただし、スラッシュ入力で入れた見出しは、レベルがH2で入る場合があります。
入れたあとにレベルが内容に合っているか、H2からH3へと順に降りているかを見ておくと安心です。

見出しを設定すれば目次は自動で作られ、表示条件は設定で調整できる

SWELLの目次は、本文に設定した見出しから自動で作られます。
目次のために手作業でリストを書く必要はありません。

見出しブロックでH2やH3を正しく入れておけば、その並びがそのまま目次に反映されます。
ここでは、目次が作られる仕組みと、設定で調整する考え方、表示されないときの見直し方をまとめます。

目次にはH2・H3などの見出しが自動で反映される

記事を保存して表示すると、本文の見出しを拾って目次が組み立てられます。
H2が大きな項目、H3がその内訳として、階層のまま並ぶのが基本です。

だからこそ、見出しの階層をきちんと守ることが大切になります。
H2の直下にいきなりH4を置くような段飛ばしがあると、目次の階層もいびつになり、読者が全体像をつかみにくくなります。

目次を整えたいときは、目次そのものをいじるより、見出しの書き方を整えるのが近道です。
見出しの文言がそのまま目次の項目名になるので、短くて内容が伝わる言い回しにしておくと、目次だけ眺めても記事の流れがわかります。

手作業で目次を作ると、見出しを直したときに目次との食い違いが出やすくなります。
自動で作られる仕組みに任せておけば、そうした修正の手間を減らせます。

目次に含める見出しレベルや表示位置は目次の設定で変える

どの階層まで目次に載せるか、どこに表示するかは、設定画面で調整できます。
SWELLのバージョンによって画面の表記や場所が変わる場合があるため、細かなメニュー名は、お使いの管理画面で目次に関する項目を探してみてください。

調整できる内容の目安は、次のとおりです。

• 目次に含める見出しのレベル（H2のみ、H2とH3など）
• 目次を表示する位置（最初のH2の手前など）
• 目次を表示する投稿の種類や、表示のオンとオフ

H2とH3まで載せると、記事の内容が細かく伝わります。
一方で、項目が多すぎる記事では目次が長くなりすぎるため、H2だけにして見通しを優先する方法もあります。
記事の長さに合わせて選ぶと使いやすくなります。

設定を大きく変える前には、変更前の内容を控えておくと安心です。
元の設定を覚えていないと、思った表示にならなかったときに戻せなくなることがあります。
スクリーンショットなどで残しておくだけでも十分です。

目次が表示されないときは見出しの数と表示条件を見直す

目次が出てこないときは、故障を疑う前に、まず基本の条件を順に確かめます。
多くの場合、原因は見出しの数か、表示条件の設定にあります。

確認する点	見るポイント
見出しの数	目次を出すのに必要な数に足りているか。 少ない記事では出ない場合があります
見出しの種類	太字の段落ではなく、見出しブロックで入れているか
表示条件	目次の設定で、その投稿や固定ページが対象になっているか
キャッシュ	ブラウザやキャッシュ系プラグインの表示が古いままになっていないか

意外に多いのが、見た目だけ大きくした段落を見出しのつもりで使っているケースです。
見た目が見出しに似ていても、見出しブロックでなければ目次には拾われません。

設定を直したのに変わらないときは、キャッシュが残っている場合があります。
ブラウザのキャッシュ、SWELLのキャッシュ、キャッシュ系プラグインの順に消してから、もう一度ページを開いて確かめてみてください。

それでも表示されなければ、ほかの設定が影響していないかを見直します。
一つずつ確認していけば、原因は絞り込めます。

見出しの下はボックス・ふきだし・キャプションボックスで補うと読みやすくなる

見出しの下の文章は、ボックス・ふきだし・キャプションボックスを使い分けて補うと、読者が内容をつかみやすくなります。
見出しは話題の看板で、その下の装飾は中身を伝える役目です。

ただし、装飾を入れすぎると、どこが大事なのかがかえって分かりにくくなります。
役割を決めて、少ない数で使うのが基本です。

ブロック	向いている場面	使う目安
キャプションボックス	見出し直後の要点まとめ	1つの見出しに1つ程度
ふきだし	読者の疑問や会話調の補足	1つの見出しに1〜2回程度
ボックス	注意点や大事なポイント	記事全体で数回程度
ボタン・バナーリンク	次の行動への誘導	区切りのよい場所に1つ

見出し直後の要点はキャプションボックスで短くまとめる

見出しのすぐ下にキャプションボックスを置き、その項目で伝えたいことを1〜2文でまとめておきます。
読者は見出しと要点をセットで読むだけで、この先を読むかどうかを判断できます。

たとえば「見出しの階層を守る」という項目なら、「H2の下はH3、その下はH4と順に使う」といった短い一言で十分です。
詳しい説明は本文に任せて、要点だけを載せるのがコツです。

ボックスのタイトル欄には「ポイント」のような短い言葉を入れておくと、視線が止まりやすくなります。
文字数が増えすぎると本文と変わらなくなるので、目安として2〜3行程度に収めてください。

なお、キャプションボックスは見出しの代わりではありません。
文字を目立たせたいだけで見出しを使うのは避け、強調にはこうしたブロックを使います。

読者の疑問や会話調の補足はふきだしで表現する

ふきだしは、読者がふと思いそうな疑問を代わりに言ってあげる場面で役に立ちます。
「これって初心者でもできるの？」といった一言を入れ、本文で答える流れにすると、読み進めやすくなります。

堅い説明が続いたあとに、ふきだしで軽い補足を挟むと、文章の空気がやわらぎます。
ただし、1つの見出しの中で何度も出てくると、本題がぼやけてしまいます。

アイコン画像や表示する名前は、記事全体で統一しておくと落ち着いて読めます。
設定画面の表記はSWELLのバージョンで変わる場合があるため、実際の画面で確認しながら選んでください。

ふきだしの中に長い解説を書くのは避けます。
ひと言〜2文ほどにとどめ、詳しい説明は本文側に置くのが読みやすさの近道です。

注意点や大事なポイントはボックスで目立たせる

失敗しやすい点や、読み飛ばしてほしくない点は、ボックスで囲むと目に留まります。
ボックスは「ここだけは読んでほしい」という場所にしぼって使うと、狙いどおりに伝わります。

全部を囲ってしまうと、どれも同じ重さに見えて、目立たせる意味がなくなります。
1つの記事で数回程度に抑えるのが、ちょうどよい使い方です。

注意を促す内容には、色を使い分けると分かりやすくなります。
ただし、本文とのコントラストが弱いと読みにくいので、文字がはっきり読める配色を選んでください。

ボックスや装飾を並べすぎると、見出しの階層よりも装飾のほうが目立ってしまいます。見出しの下に3つも4つも重ねず、1つの見出しにつき1〜2種類までを目安にしましょう。

次の行動へ誘導したい場面ではボタンやバナーリンクを使う

読み終えた読者に次の一歩を案内したいときは、ボタンやバナーリンクが便利です。
関連する記事や、もっと詳しく知りたい人向けのページへ、自然に案内できます。

ボタンの文言は「詳しくはこちら」だけでなく、「見出しの色を変える方法を見る」のように、押した先が想像できる書き方にすると親切です。
リンク先の内容と文言がずれないように気をつけます。

置く場所は、話がひと区切りついた見出しの終わり付近が向いています。
見出しのすぐ下に置くと、本文を読む前に離れてしまうこともあるため、控えめにしておきましょう。

• 1つの見出しに置くボタンは1つ程度
• リンク先は記事の内容に関係するページにする
• 公式サイトなどへ案内する場合は、最新の情報を確認してもらう一言を添える

見出しのデザインが反映されないときはキャッシュと設定の上書きを確認する

カスタマイザーで見出しのデザインを変えたのに画面が変わらないときは、まずキャッシュを消し、次に設定の上書きを確認する順番で見ていくとスムーズです。
原因のほとんどは、この2つのどちらかに収まります。

慌てて設定を何度もやり直すと、かえって元の状態がわからなくなります。
落ち着いて、下の表の順に1つずつ試してみましょう。

順番	確認すること	見る場所の目安
1	ブラウザのキャッシュ	ブラウザの履歴削除や、再読み込み
2	SWELLやキャッシュ系プラグインのキャッシュ	SWELLの設定画面、プラグインの設定画面
3	カスタマイザーで「公開」を押したか	カスタマイザー画面の上部
4	ブロック側の個別設定や追加CSS	ブロック設定、追加CSS

ブラウザやキャッシュ系プラグインのキャッシュを削除する

キャッシュとは、一度読み込んだページの情報を、表示を速くするために一時的に保存しておく仕組みです。
古い情報が残っていると、デザインを変えても以前の見た目のまま表示されることがあります。

最初に試したいのは、ブラウザ側のキャッシュ削除です。
ページの再読み込みだけで直る場合もあれば、履歴の削除画面からキャッシュを消す必要がある場合もあります。
スマホで確認しているなら、パソコンの別のブラウザでも見てみると切り分けになります。

次に、SWELL側のキャッシュと、キャッシュ系のプラグインを確認します。
SWELLにはキャッシュに関する設定があり、プラグインを入れている場合はそちらにも保存データがあります。
メニュー名はSWELLやプラグインのバージョンで変わることがあるため、お使いの画面で「キャッシュ」という言葉を探してみてください。

キャッシュを消してから、ページを開き直して確認するのが大事なところです。
消したつもりでも、開いていた古いタブをそのまま見ていると、変化に気づけません。

カスタマイザーで変更後に「公開」を押したか確かめる

意外と多いのが、カスタマイザーで設定を変えたまま、公開の操作を忘れているケースです。
カスタマイザーのプレビューには変更が出ていても、公開するまでは実際のサイトに反映されません。

画面の上部にある公開のボタンが押せる状態のままなら、まだ保存されていない変更が残っているかもしれません。
押したあとは、ログインしていない状態に近いブラウザ、たとえばシークレットウィンドウなどで表示を見ると確認しやすくなります。

公開せずに画面を閉じると、変更した内容が消えてしまうことがあります。手間をかけて選んだスタイルが無駄にならないよう、変更のたびに公開まで済ませる習慣をつけておくと安心です。

ブロック側の個別設定や追加CSSが優先されていないか確認する

キャッシュを消して公開も済んでいるのに変わらないときは、別の設定が上書きしている場合を疑います。
カスタマイザーの設定は全体向けなので、個別に指定された内容のほうが優先されることがあります。

確認したいのは、次の2点です。

• 該当の見出しブロックに、文字色や背景色などの個別設定が入っていないか
• 追加CSSに、見出しの見た目を指定する記述が残っていないか

とくに追加CSSは、以前に試した記述をそのまま忘れていることがよくあります。
消す前に、その記述をメモ帳などに控えておくと、元に戻したくなったときに困りません。

全体の見た目はカスタマイザーに任せ、例外だけを個別設定にすると、原因を追いやすくなります。
なお、親テーマのファイルを直接書き換えるのは、アップデートで消えるため避けましょう。
CSSで調整するなら、追加CSSか子テーマを使うのが安全です。

見出しはキーワードと結論を入れた短い文にするとSEOにも読者にも効く

見出しは、狙うキーワードと結論を短い一文にまとめると、検索する人にも検索エンジンにも内容が伝わりやすくなります。
見出しは記事の中身を知らせる看板のようなもので、流し読みする読者は、まず見出しだけを目で追うことが多いからです。

ここでは、見出しの言葉づかいに絞って、考え方を整理します。
デザインや設定の話ではなく、「何を書くか」の話です。

狙うキーワードはH2に不自然にならない形で入れる

記事で狙っているキーワードは、H2のいくつかに自然な形で入れておきましょう。
たとえば「SWELL 見出し 使い方」を狙う記事なら、「SWELLの見出しの使い方」という言葉がH2に含まれていると、何の記事かがひと目でわかります。

ただし、すべてのH2に同じキーワードを詰め込むのは逆効果です。
同じ言葉が何度も並ぶと、読んでいて不自然ですし、検索エンジンからも読みにくいページと見られる場合があります。

目安としては、キーワードそのままでなく、言い換えや関連する言葉も混ぜる形が読みやすいです。
「見出しの追加方法」「見出しレベルの切り替え」のように、内容に合わせて言葉を変えていきます。

キーワードは、声に出して読んでも違和感のない範囲で入れる。
これが基本の考え方です。

見出しだけで内容がわかるように結論を先に書く

見出しは、「〇〇について」のような話題の名前だけで終わらせず、結論まで書いておくと親切です。
読者は見出しを読んだ時点で、答えの見当がつきます。

違いを表にすると、次のようなイメージです。

話題だけの見出し	結論まで入れた見出し
見出しの色について	見出しの色は全体設定で決めると統一しやすい
目次の設定	目次は見出しから自動で作られる
見出しの階層	見出しはH2から順番に使う

右側の書き方なら、見出しを拾い読みするだけでも、記事の流れと要点がつかめます。
忙しい読者にとっては、それだけでも役に立つ記事になります。

なお、結論を書くときは、変動しやすい情報や言い切れないことまで断定しないように気をつけましょう。
迷うときは「〜しやすい」「〜のが基本」といった、控えめな言い方にしておくと安心です。

1行に収まる長さで同じ言い回しの繰り返しを避ける

見出しの長さは、スマホで見たときに2行程度までに収まる長さが読みやすい目安です。
パソコンなら1行に収まるくらいを意識すると、すっきりします。
長すぎる見出しは、どこが大事なのかがぼやけてしまいます。

もうひとつ気をつけたいのが、言い回しの繰り返しです。
「〜する方法」「〜のやり方」が、すべての見出しの終わりに並ぶと、単調で読む気が薄れます。
語尾を変えたり、疑問の形を混ぜたりして、変化をつけましょう。

• 長さは、読みやすさを見て1〜2行程度に整える
• 文末は「〜できる」「〜は？」など、少しずつ変える
• 同じ言葉が続くときは、言い換えられないか考える

書き終えたら、見出しだけを上から順に読み返してみてください。
見出しだけを読んでも話がつながらないときは、言葉を入れ替える前に、並び順や内容そのものを見直すほうが近道です。

見出しは短く、結論つきで、少しずつ表現を変える。
この3つを意識するだけで、読者にも検索エンジンにも伝わりやすい見出しに近づきます。

見出しは本文を書く前に構成として並べておくと記事作成が迷わず進む

見出しは、本文を書き始める前にH2とH3だけ先に並べておくと、記事づくりで迷いにくくなります。
家を建てる前に間取り図を描くのと同じで、全体の形が見えていれば、途中で話が脱線したり同じことを二度書いたりする失敗が減ります。

ここでは、書く前の準備から公開前の見直しまで、見出しを軸にした進め方を順番に見ていきます。

書き始める前にH2・H3を並べて記事の骨組みを作る

最初にやることは、本文を一行も書かないまま、見出しだけを並べることです。
SWELLのブロックエディターで見出しブロックを続けて置き、H2を大きな話題、H3をその内訳として入れていきます。
見出しだけで記事の流れが読み取れる状態を作っておくのがコツです。

私も、いきなり本文から書き出して、途中で「この話はどこに入れよう」と手が止まった経験が何度もあります。
骨組みが先にあれば、書く場所が決まっているので、迷う時間がぐっと減ります。

骨組みを作るときは、次のような目安で考えると進めやすいです。
数字はあくまで目安なので、記事の内容に合わせて調整してください。

項目	目安	考え方
H2の数	5〜8個程度	読者の疑問を大きな話題に分けて並べる
H3の数	各H2に2〜4個程度	H2の内容を具体的な項目に分ける
H4	必要な場面だけ	H3の下で細かい補足が要るときに使う

H3が1つしか思いつかないH2は、内容が薄いか、H2とH3を分ける必要がないサインです。
その場合は、H2にまとめてしまうか、別の話題と統合することを考えてみてください。

練習用の記事で見出しと装飾ブロックを一通り試しておく

本番の記事を書く前に、練習用の下書きで見出しと装飾ブロックを一通り試しておくと安心です。
見出しのレベルを切り替えたときの見え方や、ボックス・ふきだし・キャプションボックスを置いたときの雰囲気は、実際に画面で見ないとつかみにくいからです。

練習用の記事は、公開せずに下書きのまま保存しておけば十分です。
練習用の記事を公開状態にしたまま放置すると、内容の薄いページとして検索結果に出てしまうことがあるので、必ず下書きか非公開にしておきましょう。

試しておくと役に立つ項目を、箇条書きにまとめます。

• H2・H3・H4を順番に並べたときの見た目
• 見出しの直後にキャプションボックスやふきだしを置いたときの読みやすさ
• スマホ表示に切り替えたときの見出しの長さと改行の具合
• 目次に見出しがどのように並んで表示されるか

一度試しておけば、本番では「どの装飾をどこで使うか」がすぐ決まります。
設定を大きく変えたくなったときは、変更前の状態を控えてから触ると、元に戻したいときに困りません。

公開前に目次を見て見出しの流れが自然か見直す

記事を書き終えたら、公開の前に目次を見て、見出しの流れを確認します。
目次は見出しから自動で作られるので、そこに並んだ言葉を上から読むだけで、記事全体の構成をチェックできます。

目次だけを読んで話がつながらないときは、本文を読む読者も同じところでつまずきます。
目次は読者が最初に目にする記事の設計図だと考えて、見直してみてください。

見直すときは、次の点を順番に見ていくと進めやすいです。

• H2の順番が「疑問→答え→応用」のように自然につながっているか
• H2とH3の階層が正しく、H2から直接H4に飛んでいないか
• 似た内容の見出しが、離れた場所に重複して並んでいないか
• 強調したいだけの文が、見出しになっていないか

直すべき箇所が見つかったら、本文を書き直す前に、まず見出しの並び順や階層を整えます。
見出しが整えば、本文の修正は最小限で済むことが多いです。
ここまで済ませてから公開すれば、読者にも検索エンジンにも伝わりやすい記事に仕上がります。

まとめ

この記事のポイントをまとめます。

• 見出しの追加は、エディターの＋ボタンやブロック検索から「見出し」ブロックを選び、ツールバーでH2・H3・H4のレベルを切り替える
• 記事タイトルがH1として出力されるため、本文の見出しはH2から始める
• 見出しはH2を大きな話題、H3・H4をその内訳として、階層を飛ばさずに使い分ける
• デザインの変更は、まずカスタマイザー（外観→カスタマイズ）で全体を一括設定する方法を優先する
• 色や背景を一部だけ変えたいときは、ブロック設定を例外的に使い、本文とのコントラストを意識する
• 段落の先頭に「## 」や「### 」を入力すると、素早く見出しに変換できる
• 目次は設定した見出しから自動で作られ、表示条件は設定画面で調整する
• デザインが反映されないときは、各種キャッシュのクリアを確認したうえで、個別設定や追加CSSによる上書きを見直す
• 見出しは結論を入れた短い文にし、本文を書く前に並べて構成を作っておく

SWELLの見出しは、ブロックエディターの標準機能とテーマ側のデザインが組み合わさっているので、基本の流れさえつかめば難しくありません。
追加の仕方、階層の考え方、デザインの変え方という3つを押さえておくと、迷う場面がぐっと減ります。

見出しは文字を大きく見せるための飾りではなく、記事の骨組みを読者と検索エンジンに伝える大切な部品です。
強調したい箇所には、ボックスやマーカー、キャプションボックスなど、見出し以外の装飾を使うようにしましょう。

デザインを変えるときは、カスタマイザーで全体を整えるのが基本です。
親テーマのファイルを直接編集するのは避け、CSSで調整する場合は子テーマか追加CSSを使ってください。
大きく変更する前には、バックアップを取るか、変更前の設定を控えておくと安心です。

画面の表記はSWELLのバージョンによって異なる場合がありますので、お使いの環境に合わせて読み替えてみてください。
まずは練習用の記事で、見出しの追加や切り替え、デザインの変更を一通り試してみるのがおすすめです。

見出しの流れが整うと、目次も自然に読みやすくなり、記事全体がすっきりまとまります。
ぜひ今回の内容を参考に、次の記事から気軽に取り入れてみてください。