SWELLで記事を書く方法|ブロックエディターの基本操作と装飾手順【2026年版】

SWELLで記事を書く方法を示すブロックエディターのイラスト

SWELLを導入しても、投稿編集画面を開いたところで「どのブロックを選べばよいのか」「装飾はどこまで使えばよいのか」と迷う方は少なくありません。

結論からいうと、最初に覚えるのは段落・見出し・画像・リスト・表などの標準ブロックです。本文の構造を標準ブロックで作り、FAQ・手順・関連記事など専用機能が必要な場所だけSWELLブロックを使うと、読みやすく修正しやすい記事になります。

この記事は、SWELLを導入し、パソコンで初めて記事を書く方に向けた操作ガイドです。新規投稿を下書きで作り、本文・画像・装飾・投稿設定を整え、公開前に見た目を確認できるところまでを順番に説明します。まずは短い記事を一つ作りながら試してみてください。

SWELLの導入がまだの場合は「SWELLの始め方」を先に確認してください。サイト全体の色やレイアウトをすべて決めていなくても、記事の下書きは作れます。掲載画面はWordPress 7.1.2・SWELL 2.18.0を使った例です。ボタン名や配置は、バージョンや編集設定で一部異なります。

この記事で分かること
  • 新規投稿を作成して本文構造を整える手順
  • 標準ブロックとSWELL専用ブロックの使い分け
  • 太字・マーカー・リンク・表などの装飾方法
  • SEO項目の入力と公開前の確認事項
目次

SWELLで記事を書く前に準備すること

エディターを開く前に、記事の目的と素材を整理しておくと、途中で見出しや画像の位置を何度も変えずに済みます。

記事の結論と見出し構成を先に決める

最初に「誰の、どの悩みを解決する記事か」「読み終えたあと何ができるようになるか」を一文で決めます。そのうえで、記事の大きな章にあたるH2見出しと、その章を分けるH3見出しを並べます。たとえばH2を「画像を追加する」、その下のH3を「画像を選ぶ」「代替テキストを入れる」とすると、操作の順序が伝わります。

本文を書きながら構成を考えると、同じ説明が重複したり、見出し階層が崩れたりしやすくなります。タイトルだけを決めて入力を始めるのではなく、短い構成案を作ってから投稿画面を開きましょう。

画像とリンクを準備する

スクリーンショットや図解は、どの説明の直後に置くかを決めて用意します。画像には、見えないときにも内容が伝わる代替テキスト(ALT)を設定します。内部リンクは自分のサイトの公開済み記事、外部リンクは公式の操作説明など、読者の疑問を補うページを選びます。

HOAI Point

記事制作は「文章を書く作業」だけではありません。構成、画像、リンク、SEO、表示確認までを一つの工程として準備すると、入稿後の手戻りを減らせます。

記事づくりは、構成を決める、本文と画像を入れる、投稿設定を整える、表示を確認する、の4段階で進めます。装飾は本文を入れてから、必要なところへ加えましょう。

構成、本文と画像、投稿設定、表示確認の順に進む記事づくりの4段階

WordPressで新規投稿を作成する

WordPress管理画面で「投稿」→「投稿を追加」を選ぶと、ブロックエディターが開きます。編集画面では、上部に保存・プレビュー・設定、中央にタイトルと本文、右側に投稿またはブロックの設定が表示されます。

WordPress投稿編集画面の上部操作、本文、右側の投稿設定
上部の操作、中央の本文、右側の設定を使って記事を編集します。

タイトルを入力して下書き保存する

「タイトルを追加」へ記事タイトルを入力します。作業を始めたら早めに「下書き保存」を押し、あとから編集を再開できる状態にします。公開ボタンは、本文と設定の確認が終わるまで押しません。

設定サイドバーとリストビューを使う

右上の設定ボタンでは、投稿全体と選択中ブロックの設定を切り替えられます。リストビューでは記事内のブロック構造を一覧できるため、長い記事の移動や見出し階層の確認に役立ちます。詳しい使い方はWordPress公式サポート「リストビュー」で確認できます。

ブロックエディターの基本操作

ブロックエディターでは、文章や画像を一つずつ「ブロック」として管理します。ブロック単位で移動・複製・削除できることが、従来の一枚の入力欄との大きな違いです。

ブロックを追加する

画面左上または本文内の「+」を選ぶと、ブロック挿入ツールが開きます。検索欄へ「見出し」「画像」などと入力する方法に加え、空の段落で「/」を入力してブロック名を検索する方法もあります。詳しい追加方法はWordPress公式サポート「ブロックの追加」で確認できます。

ブロックインサーターで見出しを検索した画面
「見出し」を検索し、使いたいブロックを選びます。

ブロックを移動・複製・削除する

本文で対象のブロックをクリックし、上に出るツールバーの上下矢印で位置を変えます。複製や削除は、同じツールバーの「︙」(オプション)から選びます。長い記事では左上のリストビューで対象を選ぶと、別のブロックを誤って操作しにくくなります。移動後は、前後の見出しと本文の順序を確認してください。

ブロックのオプションメニューにある複製と削除
選択中のブロックは、オプションメニューから複製・削除できます。

グループやキャプションボックスは、内側の文章や画像をまとめて包む「親ブロック」です。親ブロックを削除すると、内側のブロックもまとめて削除されます。一つの段落だけを消したいときは、リストビューで内側の段落を選んでから削除してください。

元に戻す・やり直すを使う

誤って変更した直後なら、画面上部の「元に戻す」を選びます。取り消した操作を再度行うときは「やり直す」を使います。戻したあとに、対象の文章や画像が意図した状態になったか確認しましょう。新規記事の作業中は区切りごとに下書き保存します。公開済みの記事では「保存」や「更新」が公開ページへ反映されるため、下書き保存と同じつもりで押さないでください。

本文の基本構造を作る

記事本文は、段落・見出し・リスト・画像・表を中心に組み立てます。装飾を先に決めるのではなく、文章の役割に合うブロックを選びます。

段落ブロックで本文を書く

タイトルの下の空いている場所をクリックして文章を入力すると、段落ブロックになります。段落の末尾でEnterを押すと次の段落、Shift+Enterを押すと同じ段落内の改行です。一つの段落では一つの話題を扱い、話題が変わるところで分けます。空の段落をいくつも重ねて余白を作らないようにしましょう。

H2・H3で見出し階層を整える

「+」で「見出し」を追加して見出し文を入力し、ブロック上部の「H2」などのレベル表示、または右側のブロック設定から必要な階層を選びます。SWELLの記事タイトルはH1になるため、本文の大きな章はH2、その章を分ける小見出しはH3にします。文字の大きさだけで階層を選ばず、リストビューでも見出しと本文の並びを確認します。

見出しブロックの設定でH2とH3を選ぶ欄
右側のブロック設定でも、記事の章はH2、小見出しはH3を選べます。

リストを使って並列情報を整理する

「+」で「リスト」を追加し、1項目ずつ入力します。Enterで次の項目へ進み、空の項目でEnterを押すとリストを終了できます。並列の項目は箇条書き、操作順や優先順位がある場合はツールバーで番号付きリストを選びます。

画像ブロックを追加する

画像を置きたい位置で「+」→「画像」を選びます。パソコンにある画像は「アップロード」、すでに登録した画像は「メディアライブラリ」から選択します。画像が本文に表示されたら、画像を選んで右側のブロック設定にある代替テキストを入力し、記事内での大きさを確認します。画像の追加方法はWordPress公式「画像ブロック」でも確認できます。

代替テキストには「見出しブロックでH2を選んだ画面」のように、画像が伝える内容を書きます。純粋な飾りの画像では空欄にします。キャプションは画像の下に表示する補足文で、必要なときだけ付けます。最後にプレビューで、画像の欠けや小さすぎる文字がないか確認してください。

画像ブロックの代替テキスト入力欄と装飾用としてマークの設定
画像を選択し、右側の「代替テキスト」に画像が伝える内容を入力します。

SWELL専用ブロックと標準ブロックを使い分ける

SWELLには多くの専用ブロックがありますが、すべてを使う必要はありません。専用機能、自動更新、構造化、再利用性に明確な利点がある場合に選びます。

内容基本の選択選ぶ理由
本文・見出し・画像・リスト標準ブロック構造が単純で修正しやすい
比較表・料金表標準テーブル+SWELL拡張見出しセルと横スクロールを設定できる
手順の流れSWELLステップ番号と工程の関係を伝えやすい
よくある質問SWELL FAQQ&A形式で整理して表示できる
判断支援の囲みSWELLキャプションボックスタイトルと内容の役割を明確にできる
特定の関連記事SWELL関連記事記事情報をカードとして呼び出せる
複数記事の自動一覧SWELL投稿リスト公開記事の追加・更新を自動反映できる

手順説明にはステップブロックを検討する

3段階以上の操作や、順序を飛ばすと失敗しやすい手順にはステップブロックが向いています。一方、短い2項目だけなら番号付きリストのほうが簡潔です。

よくある質問にはFAQブロックを使う

質問と回答を組にして並べたいときは、「+」で「FAQ」を検索して追加し、質問欄と回答欄へ入力します。この記事の末尾でも使用しています。回答は本文と矛盾しない短い内容にし、開閉式にする設定を使った場合はプレビューで動作も確認します。

判断基準にはキャプションボックスを使う

「+」で「キャプションボックス」を検索すると、タイトル付きの囲みを追加できます。タイトルと説明文を入力し、注意点や判断の基準など、本文から少し区別して伝えたい内容に使います。次の「HOAI Point」は、このサイトで使っている例です。

HOAI Point

迷ったときは「専用ブロックに置き換えられるか」ではなく、「専用機能によって読者の理解や更新作業が改善するか」で判断します。利点がなければ標準ブロックが基本です。

太字・マーカー・リンクで要点を伝える

装飾は記事を華やかにするためではなく、読者が重要な情報を見つけるために使います。

選択した文字を太字やマーカーで装飾するツールバー
文字を選択したあと、Bで太字、マーカーのアイコンで強調を設定します。

太字は重要語や短い要点に使う

太字にしたい文字をドラッグして選択し、ツールバーの「B」(太字)を押します。解除するときは同じ範囲を選んで、もう一度押します。流し読みでも拾ってほしい重要語や短い結論に絞り、一段落すべてを太字にしないようにします。

マーカーは最重要の判断・注意・行動に限定する

文字を選択し、ツールバーのマーカーアイコンから色を選びます。ここでは黄色のマーカーを使っていますが、実際の色はサイト側の設定で変わることがあります。マーカーは、読者に必ず確認してほしい判断・注意・行動に絞りましょう。アイコンの表示位置も設定により異なります。詳しくはSWELL公式「テキスト装飾」で確認できます。

リンク文だけで移動先が分かるようにする

リンクにしたい文字を選択し、ツールバーの鎖のアイコンを押します。入力欄に移動先のURLを貼り付け、表示される適用ボタンで確定します。自分のサイトの記事はタイトルで検索して選ぶこともできます。設定後はプレビューで実際にリンクを開き、目的のページへ移動するか確認しましょう。

選択した文字にリンク先URLを入力する画面
URLを入力したら、Enterまたは適用ボタンでリンクを確定します。

「こちら」ではなく、「SWELL公式のブロックエディター機能一覧」のように、リンク先の内容が分かる言葉へ設定します。内部リンクも外部リンクも数を増やすことを目的にせず、読者が理解・判断・行動するために必要な場所へ置きます。

表・ボタン・関連記事を追加する

標準ブロックとSWELL拡張を組み合わせると、比較や次の行動を分かりやすく示せます。

表には見出しセルを設定する

「+」で「テーブル」を検索して追加し、列数と行数を指定して作成します。表を選んだ状態で右側のブロック設定からヘッダーセクションを有効にし、見出し行へ項目名を入れます。スマートフォンで幅が足りない場合は、まず列数と文章量を減らし、それでも必要な表にはSWELLの横スクロール設定を使います。設定方法はSWELL公式「テーブルの拡張機能」で確認できます。

テーブルのヘッダーセクションとスマホ向け横スクロール設定
見出し行は「ヘッダーセクション」で追加します。横長の表は、スマホ向け横スクロールと表の幅を調整します。

ボタンは明確な行動がある場所だけに置く

公式ページを開く、問い合わせる、申し込むなど、読者が次に行う操作が明確な場合にボタンを検討します。ブロック挿入ツールの「+」で「SWELLボタン」を検索して追加し、ボタンの文言とリンク先URLを設定します。通常の参考リンクまでボタンにすると優先順位が分かりにくくなります。

関連記事は文脈に合わせて選ぶ

特定の記事を案内する場合は、ブロック挿入ツールの「+」で「関連記事」を検索して追加し、案内したい公開済み記事を選びます。複数記事を条件で自動表示する場合は投稿リストブロックを使い分けます。本文と関係の薄いカードを増やさず、読者の次の疑問につながる記事を選びます。

投稿設定とSEO項目を入力する

本文が完成したら、右側の投稿設定を入力します。

カテゴリー・タグ・スラッグを設定する

右側の「投稿」設定で、カテゴリーとタグを選びます。カテゴリーは記事の大きな分類、タグは記事を横断して探すための語です。まずは主題に合うカテゴリーを一つ選び、タグを増やしすぎないようにします。スラッグは記事URLの末尾の文字列です。英数字とハイフンで内容が分かる形にし、公開後は安易に変更しません。

カテゴリーにWordPress、タグにSWELLを選んだ投稿設定
記事の主題に合うカテゴリーと必要なタグを設定します。

アイキャッチと抜粋を設定する

「投稿」設定のアイキャッチ画像の欄から、画像をアップロードするか、登録済みの画像を選びます。記事一覧などに使われる画像なので、文字や重要な図柄を端へ寄せすぎず、設定後に見切れがないか確認します。「抜粋」には記事の短い紹介文を入力します。抜粋が表示される場所はテーマや一覧の設定によって異なります。

投稿設定のアイキャッチ画像を設定ボタンと抜粋を編集リンク
「アイキャッチ画像を設定」と「抜粋を編集」から、画像と紹介文を整えます。

SEOタイトルとディスクリプションを入力する

SEO SIMPLE PACKは、SWELLとは別に導入するSEOプラグインです。導入済みの場合、本文下部の設定欄で「このページのタイトルタグ」と「このページのディスクリプション」を入力できます。SEOタイトルはページのタイトルタグ、ディスクリプションは検索結果の説明文の候補です。記事本文のタイトルや、記事一覧用の抜粋とは役割が異なります。検索エンジンが表示内容を調整するため、入力どおりの表示を保証するものではありません。

記事の内容に合う自然な文章にし、キーワードだけを並べないようにします。未導入の場合は同じ欄は表示されません。ほかのSEOプラグインを使っている方は、そちらの設定欄を確認してください。SEO SIMPLE PACKの仕様は公式プラグインページを参照できます。

公開前にプレビューで確認する

入稿の最後は保存ではなく、読者が見る画面の確認です。デスクトップとスマートフォンの両方を確認します。

本文と見出し構造を確認する

タイトル、導入文、H2・H3、表、FAQ、まとめが構成どおりか確認します。見出しだけを読んでも話の流れが分かるか、目次に不要な見出しが混ざっていないかも見ます。

画像・リンク・ブロック表示を確認する

画像の画質・代替テキスト・キャプション、リンク先と開き方、表のはみ出し、ボタンの押しやすさを確認します。FAQを開閉式にした場合や、表に横スクロールを設定した場合は、その動作も試します。編集画面だけで判断せず、実際のページに近いプレビューでも確認してください。

スマートフォン表示を確認する

下書きは、編集画面上部の「表示」(端末形のアイコン)を開き、デスクトップ・タブレット・モバイルへ切り替えて確認します。「新しいタブでプレビュー」も開き、本文全体、画像、リンクの移動先を確認してください。表示機能はWordPress公式「プレビュー機能の使い方」で説明されています。

表示メニューのモバイルと新しいタブでプレビューの選択肢
「モバイル」で幅を切り替え、「新しいタブでプレビュー」でページ全体を確認します。

公開済みページのサイト全体の見え方は、「外観」→「カスタマイズ」を開き、対象記事を表示してから下部の端末アイコンでも確認できます。これは未公開の下書きを探す手順とは別です。確認だけなら、カスタマイザーの設定を変更・公開する必要はありません。基本操作はSWELL公式「テーマカスタマイザーの使用方法」を参照してください。

新規記事はプレビューの確認が終わってから「公開」へ進み、公開日時と公開範囲を確認して確定します。公開後は記事URLを開き、保存した内容が反映されていることを確認してください。スマートフォンを使える場合は、端末上の文字の読みやすさやタップ操作も確認すると安心です。

よくある質問

SWELLの記事では専用ブロックを多く使ったほうがよいですか?

いいえ。本文・見出し・画像・リストなどは標準ブロックを基本にし、FAQ、手順、自動記事一覧など専用機能の利点がある場所だけSWELLブロックを使います。

EnterとShift+Enterはどう使い分けますか?

段落ブロックの末尾では、Enterで次の段落を作り、Shift+Enterで同じ段落内に改行します。話題が変わるときは段落を分けます。リストなど、別のブロックではEnterの動作が異なります。

装飾はどのくらい使えばよいですか?

重要度が伝わる最小限にします。太字は重要語、マーカーは最重要の判断・注意・行動へ限定し、同じ内容へ複数の装飾を重ねすぎないようにします。

下書き保存と公開は何が違いますか?

新規記事の下書き保存は、一般の読者へ公開せずに内容を保存します。公開はサイト上へ表示する操作です。公開済み記事の「保存」や「更新」は公開ページへ反映されるため、区別してください。

画像には必ずキャプションが必要ですか?

必要ありません。画像だけでは分からない補足がある場合に付けます。ALTは画像の内容や目的、キャプションは読者へ見せる補足として役割を分けます。

公開後にスラッグを変更してもよいですか?

URLが変わり、既存リンクや検索結果へ影響する可能性があります。公開前に決め、公開後に変更する場合はリダイレクトや内部リンクの更新も検討してください。

まとめ

SWELLで記事を書くときは、構成と素材を準備し、標準ブロックで本文構造を作り、専用機能が必要な場所だけSWELLブロックを使用します。

特に重要なのは、装飾の多さではなく、見出し階層、情報の役割、読者の次の行動が分かることです。最後にカテゴリー、アイキャッチ、SEO項目を設定し、PCとスマートフォンで確認してから公開します。

目的別に次の記事を選ぶ

記事を書く前にサイト全体の見た目と表示設定を整えたい方は、SWELLのカスタマイズ手順を確認してください。

SWELLをまだ導入していない方は、導入手順でインストールから確認できます。下書きを作れる状態なら、まずこの記事の順に1本完成させましょう。

この記事を書いた人

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

目次