SWELL専用ブロックの使い方|種類・特徴と初心者向け活用例【2026年版】

SWELL専用ブロックの種類・選び方・追加手順を紹介するガイド

SWELLの専用ブロックは、手順、質問と回答、関連記事などを、内容に合った形で見せるための機能です。種類が多くて迷うときは、記事に必要な役割を一つ決めてから選ぶと、使うものを絞れます。

この記事は、SWELLを有効にしたWordPressで、これから記事を作る方に向けたガイドです。最初に覚えたい6種類の違いと実例を紹介し、キャプションボックスを追加して、文字を入れ、表示を確かめて保存するところまで説明します。

まずは要点をまとめるボックスを一つ作ってみましょう。読み終えるころには、標準の段落や表でよい内容と、SWELL専用ブロックが役立つ内容を選び分けられます。投稿編集画面の開き方から知りたい方は、SWELLで記事を書く方法もあわせて確認してください。

この記事で分かること
  • SWELL専用ブロックと標準ブロックの違い
  • 初心者が最初に覚えたい6つのブロック
  • ブロックを追加・編集して保存する手順
  • ブロックが見つからないときの確認方法
目次

SWELL専用ブロックとは

SWELL専用ブロックは、WordPressのブロックエディターへSWELLが追加するオリジナルブロックです。ブロック追加画面の「SWELLブロック」から選べます。

SWELLは専用ブロックを追加するだけでなく、段落、見出し、リスト、テーブルなどのWordPress標準ブロックも拡張しています。つまり、通常の文章や比較表は標準ブロックのままで構いません。

専用ブロックと標準ブロックの違い

種類向いている内容主な例
SWELL専用ブロック手順の番号表示、質問と回答の組み合わせ、記事一覧の自動更新ステップ、FAQ、関連記事、投稿リスト
SWELLで拡張された標準ブロック通常の文章、見出し、リスト、表、単純なレイアウト段落、見出し、リスト、テーブル、カラム

ブロック名ではなく、伝えたい情報の役割で選びます。

たとえば、3つの手順を順番に説明するならステップ、複数条件を横断比較するなら標準テーブルが適しています。用途が明確なときに専用ブロックを選ぶと、見た目と意味が一致します。

「/swell」で専用ブロックを絞り込める

空の段落で半角の「/」に続けて「swell」と入力すると、SWELL専用ブロックを絞り込めます。ブロック名が分かる場合は「/faq」「/step」などのキーワードでも検索できます。

公式のSWELLブロックのキーワード一覧には、主要ブロックの呼び出し語がまとめられています。使う機能だけを少しずつ覚えれば十分です。

初心者が最初に覚えたいSWELL専用ブロック6選

最初からすべての種類を覚える必要はありません。通常の記事制作では、次の6種類から覚えると実用的です。

ブロック主な役割初心者向け活用例
キャプションボックス判断、注意、要点を囲んで示す設定前に知っておきたい注意点
ステップ順番のある手順を示すインストールから初期設定まで
FAQ質問と回答を対応させる記事末尾のよくある質問
関連記事特定の記事へ案内する次に読む記事を1件紹介
投稿リスト条件に合う複数記事を自動表示するカテゴリー別の新着記事一覧
SWELLボタン重要な行動先を明確にする公式ページや申込ページへの案内

用途が重ならない6種類を先に覚えると、記事を整理しやすくなります。

HOAI Point

迷ったときは、「この情報を読者へどのような役割で見せたいか」を一文で説明してみましょう。説明できなければ、段落やリストなどの標準ブロックで十分な可能性があります。

キャプションボックス:要点や注意をまとめる

キャプションボックスは、タイトル付きのボックス内へ段落、リスト、画像などを入れられるブロックです。公式マニュアルでは「キャプション付きブロック」とも呼ばれています。記事内の判断ポイント、注意事項、必要なものの一覧などを、本文から分けて見せたいときに向いています。

  • 一つのボックスには一つの要点を入れる
  • タイトルだけで内容を予測できるようにする
  • 長文を丸ごと囲まず、読む判断に必要な部分へ絞る

デザインは複数ありますが、記事内で同じ役割のボックスは同じスタイルへ統一すると、読者が意味を理解しやすくなります。詳しい設定項目はSWELL公式のキャプション付きブロック解説で確認できます。

HOAI Journalでの実例

この章の上にある「HOAI Point」がキャプションボックスの実例です。操作手順とは別に、ブロックを選ぶ判断基準をまとめています。同じ役割には同じスタイルと電球アイコンを使い、意味を統一しています。

ステップブロック:順番のある手順を示す

ステップブロックは、作業の流れを「STEP 1」「STEP 2」のように並べるブロックです。インストール、申込み、設定、公開前確認など、前後関係のある手順に向いています。

  1. 目的を決める:何を完了させる手順かを見出しで示す
  2. 一工程一動作にする:操作と確認を詰め込みすぎない
  3. 完了状態を示す:読者が次へ進める基準を書く

順序がなく、単に項目を並べるだけなら箇条書きのリストで十分です。ステップブロックは、順番を飛ばすと作業に失敗する場面で使いましょう。公式ページではステップブロックの使い方を確認できます。

HOAI Journalでの実例

この記事の「SWELL専用ブロックを追加・編集する手順」で、追加から保存までをステップブロックで示しています。工程ごとに操作と確認する状態を分けると、今どこまで進んだかを追いやすくなります。

FAQブロック:質問と回答を対応させる

FAQブロックは、質問をQ、回答をAとして表示します。記事を読んだ後に残りやすい疑問や、本文へ入れると流れが途切れる補足をまとめるのに適しています。

質問は読者が検索しそうな自然な文にし、回答の冒頭で結論を示します。本文をそのまま繰り返すのではなく、疑問を短時間で解決する役割を持たせましょう。設定できるデザインやQ・AアイコンはSWELL公式のFAQブロック解説で確認できます。

HOAI Journalでの実例

この記事の「よくある質問」もFAQブロックです。質問と回答を一対一で対応させ、回答の冒頭で結論を示しています。実際の表示と文章の長さを確認してみてください。

関連記事ブロック:特定の記事へ案内する

関連記事ブロックは、指定した記事をブログカードとして表示するブロックです。「この設定の前提を詳しく知りたい」「次の作業へ進みたい」といった場面で、読者に次の一歩を示せます。

内部リンクでは、現在の文章とリンク先の関係が分かる案内文を添えます。カードだけを置くよりも、なぜ次の記事を読むのかが伝わります。表示方法や外部リンクの設定はSWELL公式の関連記事ブロック解説を参照してください。

HOAI Journalでの実例

この記事末尾の「目的別に次の記事を選ぶ」で関連記事ブロックを使っています。カードの前に「記事を書く」「サイト全体の設定を整える」という目的を添え、次に読む理由が分かるようにしています。

投稿リストブロック:複数記事を自動表示する

投稿リストブロックは、カテゴリー、タグ、投稿ID、並び順などの条件を指定し、複数の記事を一覧表示するブロックです。新しい記事を公開したときに一覧を自動更新したい固定ページや案内ページで役立ちます。

特定の記事を1件だけ案内するなら関連記事、条件に合う複数記事を自動表示するなら投稿リスト、と使い分けると迷いません。表示件数を増やしすぎず、一覧の目的に合うカテゴリーやタグへ絞りましょう。機能の概要は、SWELL公式の投稿リストブロック解説で確認できます。

HOAI Journalでの実例

HOAI Journalのトップページでは、新着記事の一覧を掲載しています。特定の3記事を固定するのではなく、新しく公開した記事へ案内する用途です。表示する記事は更新されるため、現在の一覧はトップページで確認できます。

SWELLボタン:重要な行動先を示す

SWELLボタンは、公式ページ、申込み、資料請求など、読者に明確な行動を促すときに使います。ボタンの文字は「こちら」ではなく、「SWELL公式サイトで機能を見る」のように、押した後の移動先が分かる表現にします。

  • 一つの画面に重要なボタンを並べすぎない
  • 通常の参考リンクまでボタンにしない
  • 広告リンクの場合は、広告・PRであることを明示する
HOAI Journalでの実例

下はSWELLボタンの表示例です。ボタンを押すと、SWELL公式のボタン設定を説明したページが別タブで開きます。リンク先が分かる文言にして、必要な場所だけに置きます。

そのほかのSWELL専用ブロックを目的別に選ぶ

SWELLには、記事制作や固定ページ制作で役立つ専用ブロックがほかにもあります。すべてを同じ深さで覚えるのではなく、必要になったときに目的から選びましょう。

目的候補ブロック使いどころ
長い補足を開閉するアコーディオン注意事項、詳細条件、補足説明
同じ軸の内容を切り替えるタブPC・スマホ、無料・有料などの表示切替
複数リンクを整理するリンクリスト案内ページやカテゴリー別リンク集
会話や人物の発言を表すふきだし実際の発言、会話形式の補足
背景付きの大きな区画を作るフルワイドトップページやワンカラム固定ページ
共通内容を再利用するブログパーツ複数ページで使う案内やCTA
広告を管理して表示する広告タグ正式な広告コードの一元管理

アコーディオンやタブは情報を短く見せられますが、閉じた状態では内容に気づかれにくい場合があります。必ず読んでほしい結論や注意は、通常の本文へ表示した方が安全です。

SWELL専用ブロックを追加・編集する手順

ここではPCの投稿編集画面で、要点を入れるキャプションボックスを一つ作ります。すでにブロックの追加に慣れている方は、スタイルの選択と保存前後の確認を参考にしてください。

STEP
追加する場所でブロックを選ぶ

投稿のビジュアルエディターで、ボックスを置きたい段落の末尾からEnterキーで空の段落を作ります。画面左上の「+」(ブロックインサーター)を開き、検索欄に「キャプション」と入力して「キャプションボックス」を選びます。

検索結果にボックスが見つかったら、追加プラグインのインストールは不要です。本文にタイトル欄と内容欄のあるボックスが追加されたことを確認します。

ブロック追加の検索欄に「キャプション」と入力し、キャプションボックスを選ぶ画面

「キャプション」で検索し、枠で示した「キャプションボックス」を選びます。

STEP
タイトルと中の文章を入力する

ボックスのタイトル欄に「作業前の確認」、内容欄に「設定を変える前に、現在の内容を確認します。」と入力します。内容欄はボックスの内側にある段落です。外側の本文へ入力していないか、枠の中に文章が収まっていることを確認しましょう。

STEP
ボックス全体のスタイルを確認する

デザインを変える場合は、ボックスのタイトル部分を選び、右側の「ブロック」設定にキャプションボックスと表示されることを確認します。「段落」と表示されている場合は内側の文章を選んでいます。画面下のパンくずにある「キャプションボックス」を選び直してください。

設定パネルが閉じていれば、画面右上の「設定」から開きます。「スタイル」で見た目を選べますが、最初は「デフォルト」のままで構いません。操作を間違えたときは、保存前に画面左上の「元に戻す」で戻せます。

キャプションボックス全体を選択したときのブロック名とデフォルトスタイルの設定

右側に「キャプションボックス」と表示されていれば、ボックス全体を選べています。「デフォルト」が選ばれた状態です。

STEP
表示を確かめて保存する

画面右上の「表示」からデスクトップとモバイルの表示を切り替え、タイトルと内容が枠内に収まるか、長い文字がはみ出さないかを確認します。

公開済みの記事で「保存」を押すと、変更が公開ページに反映されます。練習は下書きの記事で行い、「下書き保存」または「保存」で残してください。新規記事の「公開」は、投稿全体を確認してから行います。

保存完了の通知を確認し、下書きならプレビュー、公開済みなら記事ページを開きます。ボックスのタイトル・文章・選んだスタイルが反映されていれば完了です。

完成例です。タイトルと説明文が、一つのボックスの中に収まります。

作業前の確認

設定を変える前に、現在の内容を確認します。

SWELL専用ブロックの使い分けと表示確認

装飾と色のそろえ方

同じ記事でボックス、線、背景色、アイコンを次々に変えると、重要度の違いが伝わりにくくなります。同じ役割には同じブロックとスタイルを使い、アクセントは重要な判断や行動へ限定します。

装飾を足す前に、見出し、段落、余白だけで読みやすく整理できないかを確認しましょう。

スマートフォン表示とテーマ変更時の注意

PCで横並びが整っていても、スマートフォンでは文字が細くなったり、カードが長くなったりします。プレビューで改行、余白、ボタン、表の横スクロールを確認してください。

また、SWELL専用ブロックはSWELLの機能です。将来別テーマへ変更すると、同じ表示や編集機能を保てない可能性があります。通常の文章や単純な表まで専用機能へ寄せず、専用機能の利点がある箇所へ限定することが保守性にもつながります。

SWELL専用ブロックが見つからないときの確認方法

まず、何が見つからないのかで確認先を分けます。ブロックが表示され、記事へ追加できた時点で確認は終了です。

  • 「/swell」で候補が出ない:コードエディターではなくビジュアルエディターか、空の段落で半角の「/」を入力しているかを確認します。左上の「+」からブロック名で検索する方法も使えます。
  • キャプションが見つからない:「キャプションボックス」という名前で探します。資料によっては「キャプション付きブロック」と書かれています。
  • SWELL専用ブロックがどれも出ない:管理画面の「外観」→「テーマ」で、SWELLまたはSWELL CHILDが有効になっているかを確認します。確認だけのために公開サイトのテーマを切り替えないでください。
  • 前は使えたのに表示されない:編集内容を保存してから画面を再読み込みします。特定のブロックだけ見つからない場合は、エディターのブロック表示設定や、各ブロックの公式マニュアルも確認してください。

ここまでで解決しなければ、現在のWordPress・SWELLのバージョンと、見つからないブロック名を控えて公式のサポート情報を確認します。更新が必要と分かった場合は、バックアップを取り、更新後の確認時間を確保してから実施してください。購入者向けの詳細はSWELLERS’のマニュアルやフォーラムも利用できます。

よくある質問

SWELL専用ブロックはすべて使う必要がありますか?

いいえ。記事の目的に必要なものだけで十分です。初心者はキャプションボックス、ステップ、FAQ、関連記事、投稿リスト、SWELLボタンから、必要になった順に覚えると使いやすいでしょう。

標準ブロックとSWELL専用ブロックはどちらを優先しますか?

通常の文章、見出し、リスト、表は標準ブロックを基本にします。手順、FAQ、自動更新される記事一覧など、専用機能に明確な利点がある場合にSWELL専用ブロックを選びます。

SWELL専用ブロックは「/swell」で呼び出せますか?

はい。空の段落で「/swell」と入力すると、SWELL専用ブロックを絞り込めます。「/faq」「/step」など、ブロックごとのキーワードも利用できます。

装飾を増やすほど読みやすくなりますか?

いいえ。装飾が多いと、どこが重要か分かりにくくなる場合があります。同じ役割には同じスタイルを使い、色やボックスは判断や行動に必要な箇所へ限定しましょう。

テーマを変更してもSWELL専用ブロックは使えますか?

別テーマでは、同じ表示や編集機能を保てない可能性があります。専用機能が必要な箇所へ絞って使い、通常の文章や表は標準ブロックを基本にすると、将来の保守もしやすくなります。

まとめ

SWELL専用ブロックは、情報の役割を読者へ分かりやすく伝えるための機能です。初心者は、キャプションボックス、ステップ、FAQ、関連記事、投稿リスト、SWELLボタンの6種類から始めると、記事制作で使い分けやすくなります。

大切なのは、専用ブロックを多く使うことではなく、文章だけでは伝わりにくい役割へ適切に使うことです。まずはキャプションボックスを一つ追加して、タイトルと本文を入力し、PC・モバイルの表示を確認してから保存しましょう。

目的別に次の記事を選ぶ

実際の記事制作を練習したい方は、基本操作から装飾、画像、公開前確認までを順番に進めてください。

サイト全体の見た目や表示設定を整えたい方は、カスタマイザーの基本設定を確認してください。

この記事を書いた人

横畑デザイン事務所代表。Webデザイナー・プログラミング講師として、WordPressを中心としたWebサイトの制作・運用と個別指導に携わっています。実際の制作や指導で培った知識と経験をもとに、Web制作やAI活用について、初心者が迷わず一歩を踏み出せる情報を分かりやすく発信しています。

目次