本記事はアフィリエイト広告を含んでいます。ごゆるりとご覧下さい。
はじめに｜SWELLの機能は、全部使わなくても大丈夫
前編では、WordPressテーマ「SWELL」を使って、新しい記事を作成し、公開するまでの基本的な流れを紹介しました。
タイトルを入力し、見出しを作り、本文を書き、画像を入れる。
そして、カテゴリー、アイキャッチ画像、メタディスクリプションなどを設定して、パソコンとスマートフォンの表示を確認する。
ここまでできれば、基本的な記事は十分に公開できます。
ただ、実際に記事を書いていると、次のようなことも気になってきます。
「大切な部分を、もう少し目立たせたい」
「操作の手順を、もっと分かりやすく見せたい」
「自分の感想を吹き出しで入れてみたい」
「関連記事をカードのように表示したい」
「比較表やチェックリストを、きれいに作りたい」
そんなときに役立つのが、SWELLに用意されている装飾機能や独自ブロックです。
SWELLには、吹き出し、キャプションボックス、ステップ、FAQ、アコーディオン、関連記事、SWELLボタンなど、記事を読みやすくする機能が数多く用意されています。
しかし、初心者が最初から全部を使おうとすると、かえって迷ってしまいます。
私も機能の名前が分からず、
「この囲み枠はどこにあるの？」
「ブログカードと関連記事は同じもの？」
「チェックボックスは、どのブロックを使うの？」
と、そのたびに調べながら進めてきました。
そこで後編では、SWELLの記事作成で使える機能の中から、初心者でも比較的使いやすいものに絞って紹介します。
今回取り上げるのは、次の12種類です。
- 太字とマーカー
- リストとチェックリスト
- キャプションボックス
- 吹き出し
- ステップ
- テーブル
- 関連記事
- SWELLボタン
- FAQ
- アコーディオン
- タブ
- カラム
この記事の目的は、SWELLの機能をすべて覚えることではありません。
伝えたい内容に合わせて、必要な機能を選べるようになることを目標に進めます。
この記事について
この記事は、2026年7月時点で私が使用しているWordPressとSWELLの画面をもとにしています。アップデートにより、名称や設定画面の表示が変わる場合があります。
↓こちらは主に画像を使った装飾事例です。あわせてご覧ください。
第1章｜装飾を始める前に知っておきたいこと
1-1．装飾は記事を書き終わってから行う
私は、本文を書きながら一つずつ装飾するより、文章をある程度書き終えてから装飾する方が進めやすいと感じています。
本文を書いている途中で、
- ボックスの色を選ぶ
- マーカーの色を変える
- 吹き出しの向きを決める
- ボタンの形を選ぶ
といった作業を始めると、文章を書く流れが何度も止まってしまうからです。
そこで、記事作成を次の2段階に分けます。
第1段階：内容を完成させる
- 見出しを作る
- 本文を書く
- 画像を入れる
- 表や箇条書きを入れる
第2段階：読みやすく整える
- 重要な部分を太字にする
- 必要な部分にマーカーを付ける
- 補足をボックスで囲む
- 手順をステップにする
- 関連記事やボタンを入れる
この順番にすると、装飾に気を取られすぎず、まず記事の内容に集中できます。
1-2．装飾が多いほど読みやすいとは限らない
SWELLには便利なデザインがたくさんあります。
そのため、覚えた機能を全部使いたくなるかもしれません。
しかし、色や囲み枠が多すぎると、どこが本当に重要なのか分かりにくくなります。
例えば、ひとつの画面の中に、
- 黄色いマーカー
- 赤い太字
- 青いボックス
- 緑のチェックリスト
- 吹き出し
- 大きなボタン
がすべて表示されていると、読者の視線が落ち着きません。
私は、装飾を使う前に次のように考えることにしています。
この装飾がなくても、文章の意味は伝わるだろうか。
意味が十分に伝わるなら、無理に装飾を加える必要はありません。
装飾は、文章の代わりではなく、文章を補うために使います。
1-3．ブログ全体で使い方をそろえる
同じ意味の情報には、できるだけ同じ装飾を使うと分かりやすくなります。
例えば、次のように自分なりのルールを決めます。
| 伝える内容 | 使用する装飾の例 |
|---|---|
| 特に重要な結論 | 太字 |
| 注意してほしいこと | 黄色または赤系のマーカー |
| 確認項目 | チェックリスト |
| 補足説明 | キャプションボックス |
| 自分の感想 | 吹き出し |
| 操作手順 | ステップ |
| 関連記事への案内 | 関連記事ブロック |
記事によって使い方を変えすぎない方が、ブログ全体に統一感が生まれます。
第2章｜太字とマーカーで大切な言葉を目立たせる
2-1．文字を太字にする方法
段落の中で強調したい文字を選択すると、文字の上にツールバーが表示されます。
その中にある「B」を押すと、選択した文字が太字になります。
太字は、次のような場所に向いています。
- 記事の結論
- 操作で必ず確認してほしいこと
- 読者に覚えてほしい言葉
- 注意事項の中心部分
例えば、次の文章です。
公開前には、必ずスマートフォン表示を確認します。
文章全体を太字にするより、重要な部分だけを太字にした方が内容が伝わりやすくなります。
2-2．マーカーを付ける方法
強調したい文字を選択し、ツールバーにあるSWELLの装飾メニューからマーカーを選びます。
設定によって、黄色や青色などのマーカーを使えます。
マーカーは目立つため、使いすぎには注意が必要です。
私は、ひとつの段落に何か所もマーカーを付けるより、特に読んでほしい一部分に絞る方が見やすいと思っています。
2-3．太字とマーカーを重ねすぎない
太字にした文章へ、さらにマーカーを付けることもできます。
ただし、すべてを「太字＋マーカー」にすると、強調の効果が弱くなります。
例えば、次のように使い分けます。
- 通常より少し強調したい：太字
- 特に見逃してほしくない：マーカー
- 記事全体の重要な結論：太字＋マーカー
私の使い分け
太字は比較的よく使い、マーカーは本当に目立たせたい場所だけに使うようにしています。
2-4．使用例
WordPressの初期設定で、最も見落としやすいのがパーマリンク設定です。
この設定を後から変更すると、これまでの記事のURLがすべて変わってしまいます。
第3章｜リストとチェックリストで情報を整理する
3-1．通常のリストを作る
複数の情報を並べるときは、文章の中で読点を使って並べるより、リストにした方が分かりやすくなります。
「＋」ボタンから「リスト」を選ぶか、段落の先頭に記号を入力して作成します。
通常のリストには、主に次の2種類があります。
- 順番のない箇条書き
- 1、2、3と番号が付く順序付きリスト
例えば、必要な設定を並べる場合は、順番のない箇条書きが向いています。
- タイトル
- カテゴリー
- アイキャッチ画像
- メタディスクリプション
操作の順番を説明する場合は、番号付きリストが向いています。
- WordPressへログインする
- 「投稿」を選ぶ
- 「新規投稿を追加」を押す
- タイトルを入力する
3-2．チェックリストを作る
SWELLでは、リストブロックを選択した状態で、ブロックのスタイルを変更できます。
チェックマークの付いたデザインを選ぶと、確認事項を見やすく表示できます。
チェックリストは、次のような内容に向いています。
- 公開前の確認
- 必要な持ち物
- おすすめする条件
- 設定しておきたい項目
- メリットの一覧
例えば、公開前のチェックなら次のように使います。
- タイトルを確認した
- スラッグを設定した
- アイキャッチ画像を設定した
- スマートフォン表示を確認した
- 誤字脱字を確認した
3-3．通常の箇条書きとの使い分け
すべてのリストをチェックマークにする必要はありません。
私は、次のように考えると選びやすいと思っています。
| 内容 | 向いているリスト |
|---|---|
| 単純な情報の列挙 | 通常の箇条書き |
| 操作の順番 | 番号付きリスト |
| 確認する項目 | チェックリスト |
| 良い点やメリット | チェックまたは丸印 |
| 注意点や避けたいこと | 注意・バツ印など |
リストのデザインだけで意味が分かるようにすると、読者が内容を素早く理解できます。
第4章｜キャプションボックスで補足をまとめる
4-1．キャプションボックスとは
キャプションボックスは、上部にタイトルを付けられる囲み枠です。
SWELL公式サイトでは「キャプション付きブロック」と紹介されています。ブロックを追加するときは、検索欄へ「キャプション」と入力すると見つけやすくなります。呼び方が2つある点だけ、頭の片隅に入れておくと迷いにくくなります。
ブロックを追加したら、上の部分にタイトルを、枠の中に本文を入力します。
例えば、次のような使い方ができます。
- この記事のポイント
- 初心者が注意すること
- 私が実際に迷ったこと
- 設定前に確認すること
- 用語の簡単な説明
SWELL公式では、キャプションボックスを追加後、タイトルと内容を編集し、右側の「スタイル」からデザイン（7種類）を選び、その下の「カラー設定」で色を変更できます。
4-2．キャプションボックスを入れる手順
- 挿入したい場所で「＋」を押す
- 検索欄に「キャプション」と入力する
- 「キャプションボックス」を選ぶ
- 上部にタイトルを入力する
- 枠内に説明文やリストを入れる
- 右側の「スタイル」からデザインを選ぶ
- 必要に応じて「カラー設定」から色を調整する
半角の「/」に続けてブロック名を入力し、候補から呼び出す方法もあります。候補が表示されない場合は、「＋」ボタンから「キャプション」と検索する方法が確実です。
4-3．どんなときに使うとよいか
キャプションボックスは、本文から少し分けて見せたい情報に向いています。
例えば、「初心者が注意すること」という補足を、普通の段落のまま入れると、前後の文章に埋もれてしまうことがあります。
そのような場合に囲み枠を使うと、読者が見つけやすくなります。
一方で、すべての説明を囲み枠に入れると、記事全体が細かく分断されてしまいます。
ひとつのH2の中で何度も使うのではなく、本当に分けて見せたい情報に絞ります。
おすすめの使い方
「この記事の結論」「初心者が注意すること」「私が迷ったところ」など、記事内で同じ役割を持つ情報に、同じデザインを使うと統一感が出ます。
4-4．使用例
初心者が注意することSWELLの初期設定は、公式マニュアルと画面の表示が少し違う場合があります。焦らず、自分の管理画面をそのまま確認しながら進めてください。
第5章｜吹き出しで自分の感想や疑問を伝える
5-1．吹き出しブロックとは
吹き出しは、人物のアイコンと会話のような形で文章を表示するブロックです。
通常の本文とは少し違う形で、自分の感想や読者の疑問を表せます。
例えば、次のような使い方があります。
- 自分が実際に感じたこと
- 初心者の頃に抱いた疑問
- 本文を読んだ人が感じそうな質問
- 操作中に迷いやすいポイント
- 文章だけでは伝わりにくいひとこと
5-2．吹き出しを入れる方法
吹き出しは、事前登録をしなくても、その場で使い始められます。
ブロックを追加すると初期状態の吹き出しが挿入されるので、テキストを入力し、右側の設定からアイコン画像や名前、色、向きなどをその場で指定するだけで使えます。
- 吹き出しを入れたい場所で「＋」を押す
- 「ふきだし」と検索する
- SWELLの「ふきだし」ブロックを選ぶ
- 吹き出しの文章を入力する
- 右側の設定画面でアイコン画像や表示名を設定する
- 吹き出しの向きや形、色などを調整する
- プレビューで表示を確認する
半角の「/」に続けて「ふきだし」などと入力し、候補から選ぶ方法もあります。
5-3．よく使う吹き出しは「ふきだしセット」に登録しておくと便利
吹き出しは記事内でその都度設定できますが、同じアイコンや名前、デザインを何度も使う場合は、「ふきだしセット」として登録しておくと呼び出すだけで使えて便利です。
WordPress管理画面の「ふきだし」を開き、アイコン画像、表示名、吹き出しの形や色などを登録します。
登録後は、記事編集画面でふきだしブロックを選択し、右側の設定画面から登録済みのふきだしセットを呼び出せます。
私のブログでも、自分の顔をもとに作った丸型のイラストを登録し、同じデザインで使い回す予定です。
5-4．吹き出しに向いている文章
吹き出しには、短く、会話に近い文章が向いています。
例えば、次のような文です。
「この『＋』ボタン、最初は何をするものか分かりませんでした」
反対に、何行も続く詳しい説明を吹き出しに入れると、かえって読みにくくなります。
詳しい説明は通常の本文に書き、吹き出しはひとことにとどめます。
5-5．吹き出しを使いすぎない
吹き出しは親しみやすい反面、何度も続くと記事の流れが止まります。
私は、次のような場所に絞って使うのがよいと思っています。
- 記事の冒頭
- 大きく迷った場面
- 読者に安心してもらいたい場面
- 章の最後のひとこと
本文の代わりに吹き出しを多用するのではなく、記事に少し親しみを加えるために使います。
5-6．使用例
セリーンこの『＋』ボタン、最初は何をするものか分かりませんでした
そっか段落、画像なんかを追加できるんだ
第6章｜ステップブロックで操作手順を説明する
6-1．ステップブロックとは
ステップブロックは、複数の操作を順番に説明するSWELL独自のブロックです。
「STEP 1」「STEP 2」のように表示できるため、WordPressやSWELLの操作方法を説明する記事と相性があります。
例えば、次のような内容に使えます。
- SWELLのインストール方法
- 新しい記事を作る手順
- 画像を入れる手順
- Google Search Consoleで確認する手順
- アフィリエイト広告を貼る手順
6-2．ステップブロックを入れる方法
- 「＋」ボタンを押す
- 「ステップ」と検索する
- SWELLのステップブロックを選ぶ
- 最初のステップのタイトルと説明を入力する
- 次のステップを追加する
- 必要な数だけ繰り返す
- 右側の設定からデザインを調整する
段落ブロックの先頭で「/ステップ」または「/step」と入力して呼び出す方法もあります。
6-3．ステップのタイトルは短くする
各ステップのタイトルは、操作内容がひと目で分かるようにします。
例えば、次のようにします。
STEP 1 投稿画面を開く
STEP 2 タイトルを入力する
STEP 3 見出しを作る
STEP 4 本文を書く
タイトルの中に詳しい説明まで詰め込まず、説明部分で補足します。
6-4．番号付きリストとの違い
簡単な手順なら、通常の番号付きリストでも十分です。
ステップブロックは、次のような場合に向いています。
- ひとつの手順に説明文が必要
- 各手順に画像を入れたい
- 操作の順番を特に目立たせたい
- 途中を飛ばすと設定できない
短い3項目程度の手順で、説明も一行ずつなら、番号付きリストの方がすっきり見えることもあります。
6-5．使用例
WordPress管理画面から「投稿」→「新規追加」を選びます。
記事の内容が伝わるタイトルをつけます。
見出しを作りながら、内容を進めます。
パソコンとスマートフォンの両方で表示を確認します。
第7章｜テーブルで情報を比較する
7-1．テーブルが向いている内容
テーブルは、複数の項目を同じ基準で比べるときに便利です。
例えば、次の内容です。
- レンタルサーバーの料金比較
- WordPressテーマの機能比較
- 設定項目とおすすめ設定
- メリットとデメリット
- パソコンとスマートフォンの違い
文章で一社ずつ説明するより、表にした方が違いを見つけやすくなります。
7-2．テーブルを作る方法
- 「＋」ボタンを押す
- 「テーブル」と検索する
- 列数と行数を選ぶ
- 「表を作成」を押す
- 各セルに文字を入力する
- 必要に応じて見出し行を設定する
- 右側の設定からデザインを調整する
7-3．スマートフォンでは列を増やしすぎない
パソコンで見やすい表でも、スマートフォンでは横幅が足りない場合があります。
例えば、6列や7列ある比較表は、文字が小さくなったり、横スクロールが必要になったりします。
私は、できるだけ次のように整理します。
- 重要な項目だけを残す
- 1つの表を複数に分ける
- 長い説明は表の下に書く
- 3列程度を目安に考える
- 公開前にスマートフォンで確認する
3列を超えてはいけないという決まりはありません。
ただし、列を増やした場合は、実際のスマートフォン表示で読めるかを必ず確認します。
7-4．表の中に文章を詰め込みすぎない
表は情報を簡潔に比べるためのものです。
ひとつのセルに長い文章を入れると、かえって比較しにくくなります。
表では短くまとめ、詳しい理由や注意点は表の後に文章で説明します。
7-5．使用例
| 項目 | Xserver | ConoHa WING |
|---|---|---|
| 月額料金（目安） | やや高め | 安め |
| SWELLの導入しやすさ | テーマ選択機能あり | 手動インストール |
| 実体験 | 実際に使用中 | 調査ベース |
第8章｜関連記事ブロックで内部リンクを見やすくする
8-1．関連記事ブロックとは
関連記事ブロックは、別の記事へのリンクをカード形式（ブログカード）で表示するSWELL独自ブロックです。
サムネイル画像、記事タイトル、抜粋文などを表示できるため、通常の文字リンクよりも目立たせたいときに使えます。
内部リンクだけでなく、外部リンクにも対応しています。
8-2．関連記事を入れる方法
- 関連記事を入れたい場所で「＋」を押す
- 「関連記事」と検索する
- 関連記事ブロックを選ぶ
- 自分のブログ内の記事へリンクする場合は、記事タイトルを検索するか投稿IDを入力する
- 外部サイトへリンクする場合は、「外部リンク」または外部サイトのURLを入力する欄にURLを入力する
- 右側の設定画面で、画像や抜粋文の表示などを調整する
- プレビューで表示とリンク先を確認する
注意
自分のブログ内の記事を指定するときは、記事タイトルの検索または投稿IDを使います。外部サイトへリンクするときは、「外部リンク」または「外部サイトのURL」の入力欄を使います。内部記事用の検索欄と、外部リンク用のURL入力欄を間違えないようにしましょう。
半角の「/」に続けて「関連記事」などと入力し、候補から呼び出す方法もあります。候補が表示されない場合は、「＋」ボタンから「関連記事」と検索する方法が確実です。
8-3．どこに置けばよいか
関連記事は、読者が「次に詳しく知りたい」と感じる場所へ置きます。
例えば、記事の途中でGoogle Analyticsについて触れた場合、その直後にGoogle Analyticsの詳しい記事を案内します。
記事の最後に関連記事をまとめる方法もあります。
ただし、本文の内容と関係の薄い記事を無理に置く必要はありません。
8-4．関連記事を増やしすぎない
関連記事カードが何枚も続くと、広告のように見えたり、本文が途中で分断されたりすることがあります。
記事の流れに必要なものを選び、同じ記事へ何度もリンクしないようにします。
文字リンクとの使い分け
文章の流れを止めずに案内したい場合は文字リンク、関連記事そのものを目立たせたい場合は関連記事ブロックが使いやすいと思います。
8-5．使用例
第9章｜SWELLボタンでクリック先を分かりやすくする
9-1．SWELLボタンとは
SWELLボタンは、リンクを大きなボタンとして表示する独自ブロックです。
公式ページ、申し込みページ、詳しい記事など、読者に次の行動を分かりやすく示したい場合に使います。
デザインには、ノーマル、立体、キラッと、アウトライン、MOREボタンの5種類があり、色や丸みも設定画面から調整できます。
9-2．SWELLボタンを入れる方法
- 「＋」ボタンを押す
- 「SWELLボタン」または「ボタン」と検索する
- SWELLボタンを選ぶ
- ボタンに表示する文字を入力する
- リンク先のURLを設定する
- ボタンの色や形を選ぶ
- 必要に応じて中央揃えやサイズを変更する
段落ブロックで「/button」と入力して呼び出す方法もあります。
9-3．ボタンの文字は行き先が分かるようにする
「こちら」「詳しくはこちら」だけでは、クリックした後に何が表示されるのか分かりにくい場合があります。
例えば、次のように具体的にします。
- SWELL公式サイトで機能を見る
- エックスサーバーの料金を確認する
- WordPress初期設定の記事を読む
- お問い合わせページを開く
ただし、ボタンの文字が長すぎると、スマートフォンで2行になることがあります。
意味が分かる範囲で短くまとめます。
9-4．ボタンを使う前にリンク先を確認する
公開前には、実際にボタンを押して次の点を確認します。
- 正しいページが開く
- リンク切れになっていない
- アフィリエイトリンクが正しい
- 意図しない編集画面へつながっていない
- 外部サイトと内部記事を間違えていない
ボタンは目立つため、リンク先を間違えると読者に大きな負担をかけてしまいます。
第10章｜FAQブロックで質問と回答を整理する
10-1．FAQブロックとは
FAQは、「よくある質問」と「回答」をセットで表示するためのブロックです。
記事を読んだ方が最後に感じそうな疑問を、質問と回答の形で整理できます。
FAQブロックは、内容を「構造化データ」として出力する機能も持っています。
ただし、Googleは2026年5月7日から、FAQのリッチリザルト（検索結果にQ&Aが展開して表示される機能）を検索結果に表示しなくなりました。そのため、FAQを設置しても、検索結果に質問と回答が大きく表示される効果は期待できません。
FAQブロックは、検索結果で目立たせるためではなく、読者の疑問と回答を分かりやすく整理するために使うものと考えておくのが実情に合っています。
例えば、この記事なら次のような質問です。
- SWELLの装飾は全部使う必要がありますか？
- 吹き出しは何個くらい使えばよいですか？
- FAQとアコーディオンは同じですか？
- ボタンと関連記事はどう使い分けますか？
10-2．FAQを入れる方法
- 「＋」ボタンを押す
- 「FAQ」と検索する
- FAQブロックを選ぶ
- 質問を入力する
- その下に回答を入力する
- 必要な数だけ質問と回答を追加する
- 右側の設定からデザインを調整する
10-3．FAQとアコーディオンは別の機能
FAQは、質問と回答を分かりやすく見せるブロックです。
一方、アコーディオンは、見出しを押すと内容を開閉できる折りたたみ機能です。
SWELLのFAQブロックは標準では開閉機能（アコーディオン式）を持っていないため、書いた質問と回答は基本的にそのまま表示されます。
「質問と回答を見せたい」のか、「長い補足を折りたたみたい」のかで使い分けます。
10-4．本文と同じ質問を繰り返さない
FAQを増やすために、本文ですでに詳しく説明した内容をそのまま繰り返す必要はありません。
FAQには、本文を読んだ後に残りそうな疑問や、短く確認したい内容を選びます。
10-5．使用例
第11章｜アコーディオンで長い補足を折りたたむ
11-1．アコーディオンとは
アコーディオンは、見出し部分を押すと、中の文章が開いたり閉じたりする機能です。
最初からすべてを表示しないため、記事を必要以上に長く見せずに補足情報を入れられます。
次のような内容に向いています。
- 詳細な補足
- 長い注意事項
- 読みたい方だけに見せたい説明
- 専門的な内容
- 記事の本筋から少し離れる情報
11-2．アコーディオンを入れる方法
- 「＋」ボタンを押す
- 「アコーディオン」と検索する
- アコーディオンブロックを選ぶ
- 見出し部分にタイトルを入力する
- 開いた部分に詳しい内容を入力する
- 必要な数だけ項目を追加する
- 開閉状態やデザインを確認する
11-3．重要な結論は折りたたまない
読者に必ず読んでほしい結論や注意事項をアコーディオンの中に入れると、開かれないまま読み飛ばされる可能性があります。
そのため、アコーディオンには「読まなくても記事の中心は理解できる補足」を入れます。
例えば、操作に失敗するとサイトが表示されなくなるような重要な注意は、折りたたまず、本文や注意ボックスで見せた方が安心です。
11-4．使用例
（開くと）SWELLとAFFINGER7の細かいライセンス差異について、詳しく比較すると次のようになります…（長い補足をここに収納）
第12章｜タブで似た情報を切り替えて表示する
12-1．タブとは
タブは、複数の見出しを押して、表示する内容を切り替える機能です。
例えば、次のような使い方があります。
- パソコンでの操作／スマートフォンでの操作
- 無料プラン／有料プラン
- メリット／デメリット
- 初心者向け／経験者向け
- Windows／Mac
同じ場所に似た情報をまとめられるため、記事が必要以上に長くなるのを防げます。
12-2．タブを入れる方法
- 「＋」ボタンを押す
- 「タブ」と検索する
- タブブロックを選ぶ
- それぞれのタブ名を入力する
- 各タブの中に文章や画像を入れる
- タブを切り替えて表示を確認する
- スマートフォンでも操作しやすいか確認する
段落ブロックの先頭で「/タブ」または「/tab」と入力して呼び出す方法もあります。
12-3．タブ名を短くする
タブ名が長いと、スマートフォンで窮屈に表示されることがあります。
例えば、
「パソコンを使用して設定する場合」
ではなく、
「パソコン」
と短くします。
タブ名だけで違いが分かり、その下の内容で詳しく説明する形が読みやすくなります。
12-4．タブを増やしすぎない
タブが5つ、6つと増えると、どこに何があるのか分かりにくくなります。
2〜3種類の似た情報を比べる場合に使うと、効果を発揮しやすい機能です。
12-5．使用例
設定画面はメニューの左側から進みます。
第13章｜カラムで画像や文章を横並びにする
13-1．カラムとは
カラムブロックは、複数の内容を横に並べて表示するWordPressの標準ブロックです。
SWELLでは、この標準カラムブロックにも、デザインやスマートフォン表示に関する独自の設定が加えられています。
なお、SWELLには別に「リッチカラム」という独自ブロックもあります。「＋」で検索すると両方が候補に出てくるので、最初は間違えないように注意してください。この記事では、初心者でも扱いやすい標準のカラムブロックについて説明します。
次のような内容に利用できます。
- 画像と説明文
- 2つの商品やサービス
- メリットとデメリット
- 操作前と操作後
- 2種類の選択肢
13-2．カラムを入れる方法
- 「＋」ボタンを押す
- 「カラム」と検索する
- カラムブロックを選ぶ
- 2列、3列などの構成を選ぶ
- それぞれの列に画像や文章を入れる
- 列の幅や余白を調整する
- スマートフォン表示を確認する
13-3．スマートフォンでは縦並びになることがある
パソコンでは横に並んでいても、通常はスマートフォンの画面幅に合わせて縦並びになります。
SWELLには、スマートフォンでも2列表示のままにする追加設定もありますが、文字や画像が小さくなることがあるため、特別な理由がなければ縦並びのままの方が読みやすい場合が多いです。
そのため、横並びの状態だけでなく、縦に並んだ場合も意味が通じる順番にします。
例えば、
- 左：画像
- 右：その画像の説明
という構成がスマートフォンで、
- 上：画像
- 下：説明
となっても自然に読めるか確認します。
13-4．本文記事では無理に横並びにしない
カラムは便利ですが、文章量が多い場合は横幅が狭くなり、読みにくくなることがあります。
特にスマートフォンから読まれる記事では、通常の縦並びの方が分かりやすい場合もあります。
短い説明や画像の比較など、横並びにする意味がある場所に絞って使用します。
13-5．使用例
この画像は、Pillowで観光客を除去して作成しました。
第14章｜どの装飾を使えばよいか迷ったときの選び方
機能を覚えても、実際の記事でどれを使えばよいか迷うことがあります。
その場合は、伝えたい内容から逆に考えます。
| 伝えたい内容 | 向いている機能 |
|---|---|
| 重要な一文を目立たせたい | 太字・マーカー |
| 複数の項目を整理したい | リスト |
| 確認事項を並べたい | チェックリスト |
| 補足を本文と分けたい | キャプションボックス |
| 自分の感想を入れたい | 吹き出し |
| 操作を順番に説明したい | ステップ |
| 同じ基準で比較したい | テーブル |
| 別の記事を紹介したい | 関連記事 |
| 申し込み先などを目立たせたい | SWELLボタン |
| 質問と回答をまとめたい | FAQ |
| 長い補足を隠しておきたい | アコーディオン |
| 似た情報を切り替えたい | タブ |
| 画像や短い内容を横に並べたい | カラム |
装飾の名前から選ぶのではなく、読者にどう見せたいかから選ぶと判断しやすくなります。
第15章｜初心者が避けたい装飾の使い方
15-1．見出しの直後に装飾だけを並べる
見出しの直後から、吹き出し、ボックス、表などが続くと、その章で何を説明するのか分かりにくくなります。
見出しの下には、まず短い導入文を置きます。
その後、必要に応じて装飾を入れると、読者が内容を理解しやすくなります。
15-2．同じ内容を文章とボックスで繰り返す
本文で説明した直後に、まったく同じ文章をボックスへ入れると、読者は同じ内容を二度読むことになります。
ボックスでは、本文の要点を短くまとめるか、本文にない注意点を補足します。
15-3．色の意味を記事ごとに変える
ある記事では赤いボックスを注意事項に使い、別の記事ではおすすめ情報に使うと、ブログ全体で意味が統一されません。
例えば、
- 赤や黄色：注意
- 青：補足
- 緑：おすすめや確認済み
- グレー：参考情報
のように、ある程度のルールを決めておくと使いやすくなります。
15-4．ボタンを何個も並べる
ひとつの場所に複数のボタンを置くと、読者がどれを押せばよいか迷います。
特におすすめしたいリンクを1つ選び、その他は文字リンクや関連記事にする方法もあります。
15-5．装飾の中へ装飾を重ねすぎる
キャプションボックスの中に吹き出しを入れ、その中にリストを入れるなど、何重にも重ねると編集が複雑になります。
表示が崩れたときも、どのブロックが原因なのか分かりにくくなります。
最初のうちは、ひとつの装飾の中には文章や簡単なリストを入れる程度にしておくと安心です。
第16章｜装飾後に確認したいチェックリスト
太字・マーカー
- 本当に大切な部分だけを強調している
- 文章全体を太字にしていない
- マーカーを使いすぎていない
- 色の使い方が記事内で統一されている
リスト・表
- 箇条書きにした方が分かりやすい内容になっている
- 操作の順番には番号を付けている
- 表の見出しから比較内容が分かる
- 表のセルに長文を詰め込んでいない
- スマートフォンで表を確認した
吹き出し・キャプションボックス
- 本文と同じことを繰り返していない
- 吹き出しの文章が長すぎない
- アイコンが正しく表示されている
- 囲み枠が連続していない
- 同じ役割には同じデザインを使っている
ステップ・FAQ・アコーディオン
- 手順の順番が正しい
- ステップを飛ばしてもよいような書き方になっていない
- FAQに本文と同じ説明を並べすぎていない
- 重要な注意をアコーディオンに隠していない
- 実際に開閉できるか確認した
関連記事・ボタン
- 記事内容と関係のあるリンクになっている
- 同じリンクを何度も掲載していない
- ボタンの文字から行き先が分かる
- 正しいページが開く
- アフィリエイトリンクが正しい
- 広告であることを必要に応じて明示している
全体表示
- 装飾を使いすぎていない
- パソコンで表示を確認した
- スマートフォンで表示を確認した
- 画像や表がはみ出していない
- タブやアコーディオンが操作できる
- 読者がどこを見ればよいか分かる
記事公開前チェックリストです。よろしかったらお使いください
実際にチェックできます。また、一番下のチェックをリセットを押すとチェックがクリアされます。
Serene Life · Publish Checklist
記事公開前チェックリスト
60代・ブログで試行錯誤｜人生これから
第17章｜よくある質問
SWELLの装飾機能は全部覚える必要がありますか？
全部を覚える必要はありません。
まずは、太字、リスト、キャプションボックス、関連記事の4つ程度から始めても、十分に読みやすい記事を作れます。
必要になったときに、吹き出し、ステップ、FAQなどを少しずつ覚えていけばよいと思います。
吹き出しは、ひとつの記事に何個まで使えますか？
決まった上限はありません。
ただし、吹き出しが続くと本文の流れが細かく分断されます。
記事の冒頭、自分の体験、初心者が迷いやすい場面など、特に効果がある場所に絞ると読みやすくなります。
FAQとアコーディオンは同じ機能ですか？
別の機能です。
FAQは質問と回答を分かりやすく整理するためのブロックで、標準では開閉機能を持っていません。
アコーディオンは、内容を折りたたみ、クリックやタップで開閉するためのブロックです。
関連記事とSWELLボタンは、どう使い分けますか？
関連記事は、別の記事のタイトルや画像を見せて案内するときに向いています。
SWELLボタンは、公式サイト、申し込みページ、特に読んでほしいページなど、読者に明確な行動を促すときに向いています。
装飾を使うとSEOに有利になりますか？
装飾を入れただけで検索順位が上がるとは限りません。
FAQブロックについても、2026年5月以降、Google検索でFAQのリッチリザルトは表示されなくなっています。検索結果での見た目を目的にFAQを増やす必要はありません。
ただし、情報が整理され、読者が目的の内容を見つけやすくなれば、記事の読みやすさや使いやすさの改善にはつながります。
装飾そのものを目的にせず、読者が知りたい情報を分かりやすく伝えるために使うことが大切です。
まとめ｜装飾は「目立たせる」より「分かりやすくする」ために使う
今回は、SWELLで記事を書くときに覚えておきたい装飾機能を紹介しました。
もう一度まとめます。
- 太字とマーカー：大切な言葉を強調する
- リストとチェックリスト：複数の情報を整理する
- キャプションボックス：補足を本文と分ける
- 吹き出し：感想や疑問を会話形式で見せる
- ステップ：操作手順を順番に説明する
- テーブル：複数の情報を比較する
- 関連記事：別の記事へ案内する
- SWELLボタン：読者に次の行動を示す
- FAQ：質問と回答を整理する
- アコーディオン：長い補足を折りたたむ
- タブ：似た情報を切り替えて表示する
- カラム：画像や短い内容を横に並べる
SWELLには数多くの機能がありますが、大切なのは、使える機能の数ではありません。
「この内容は文章だけで伝わるのか」
「箇条書きにした方が分かりやすいのか」
「画像や表を使った方が理解しやすいのか」
と、読者の立場で考えて選ぶことが大切です。
私も最初は、機能の名前が分からず、「＋」ボタンを開いては閉じることを繰り返していました。
ブログカードと関連記事の違いも分からず、チェックボックスをどこから作るのかも迷いました。
それでも、実際の記事でひとつずつ試すうちに、少しずつ使い方が分かってきました。
最初からすべての機能を覚える必要はありません。
まずは本文を書き、必要なところにだけ装飾を加える。
そして、パソコンとスマートフォンで読みやすさを確認する。
この流れを繰り返していけば、自分のブログに合った装飾の使い方が、少しずつ決まってくると思います。
SWELLの装飾は、記事を派手にするためのものではありません。
読者が迷わず内容を理解できるようにするための道具です。
前編と後編が、これからSWELLで記事を書き始める方にとって、何度でも確認できる手引きになれば嬉しいです。
