SWELLの段落ブロック使い方完全ガイド【装飾テクも】

ここではSWELLの段落ブロックの使い方や設定方法を詳しくお伝えします。

SWELLの段落ブロックの使い方を、この1本でまとめて確認できるようにしました。記事を読みながら、実際のエディターを開いて一緒に触ってみてください。

SWELLの段落ブロックとは？基本の考え方とメリット

段落ブロックでできることをざっくり整理

SWELLの段落ブロックは、単なる「文字入力用の箱」ではありません。文章を書くことに加えて、装飾やレイアウトまでまとめて調整できる、かなり重要なブロックです。

できること	具体例	ポイント
文章を書く	本文・前置き・まとめなど	記事の土台になる基本ブロック
装飾をつける	ボックス・背景色・アイコンなど	情報の重要度や種類を視覚的に伝えられる
レイアウトを整える	余白・行間・配置の調整	「読みやすい行間」を自分で作れる
SEOを意識した構成にする	段落ごとに話題を分ける	検索エンジンに内容を整理して伝えやすい
導線を作る	ボタンや他ブロックへの変換	内部リンクやCTAへスムーズにつなげられる

イメージとしては、「文章・装飾・レイアウトをコントロールするための部品」という感覚で捉えておくと分かりやすいです。

段落＝pタグの意味をサクッと理解する

少しだけ専門的な話も触れておきます。段落ブロックは、HTMLという言語では「pタグ」として出力されます。

ざっくり言うと、次のようなイメージです。

• ひとつのまとまった話題＝1つの段落
• 段落ごとにpタグが1つ増える
• 検索エンジンも「このかたまりは同じテーマの話だな」と理解しやすくなる

完璧に理解する必要はありませんが、「1つの段落には1つの話題」という意識を持って書くと、読みやすさも検索評価も同時に上げやすくなります。

改行と段落の違い（EnterとShift+Enter）

次によくつまずくのが、「改行」と「段落」の違いです。ここを勘違いしたまま書いてしまうと、行間がスカスカになったり、逆に詰まりすぎたりします。

• Enterキー…新しい段落を作る（段落と段落の間にしっかりした余白が入る）
• Shift＋Enter…同じ段落の中で行だけ変える（段落の余白は増えず、行だけ折り返す）

会話文や箇条書きを説明するときなど、「テーマは同じだけど行だけ変えたい」という場合は、Shift＋Enterを使うと読みやすさがグッと上がります。私も、長めの一文を2行に分けたいときによく使っています。

SWELLの段落ブロックの使い方【基本操作】

段落ブロックの追加方法をまとめて覚える

段落ブロックを追加する方法はいくつかあります。よく使うものだけを整理すると、次のようなイメージです。

追加方法	操作	おすすめの使いどころ
Enterキー	段落の末尾でEnterを押す	普通に文章を続けて書くとき
ブロックの＋ボタン	段落の下に出る＋をクリック	段落と段落の間に別のブロックを挟みたいとき
画面左上の＋ボタン	上部の＋から「段落」を選択	構成をまとめて組み立てたいとき
スラッシュ入力	空の行で「/だんらく」などと入力	キーボード操作中心でサクサク追加したいとき

最初はEnterと＋ボタンだけでも十分ですが、慣れてきたらスラッシュ入力も使うと、マウスに持ち替える回数が減って執筆スピードがかなり変わります。

テキスト入力とよく使うショートカット

段落ブロックを追加したら、あとはそこにテキストを打ち込んでいくだけです。ここでちょっとしたショートカットを覚えておくと、作業が一気に楽になります。

• 太字にしたいテキストを選んで「Ctrl＋B」（MacはCommand＋B）
• リンクを入れたいテキストを選んで「Ctrl＋K」
• 1つ前の操作を戻すときは「Ctrl＋Z」

これらはWordPress全体で使える基本ショートカットですが、段落ブロックとセットで覚えておくと、文章の装飾や修正がかなりスムーズになります。

ブロックの移動・複製・削除

記事を書いていると、「この段落はもう少し上にあったほうが読みやすいな」「この装飾ごとコピーして使い回したいな」といった場面がよく出てきます。そんなときに便利なのが、ブロックの移動・複製・削除です。

やりたいこと	操作	コツ
ブロックを上下に移動	ブロック左側の上下矢印ボタンをクリック	構成を少しずつ並べ替えたいときに便利
ブロックを複製	ブロックの「︙」メニュー→「複製」	同じ装飾や構成を繰り返し使いたいときに使う
ブロックを削除	「︙」メニュー→「ブロックを削除」	消す前に複製しておくと、やり直ししやすい

私は「見出し＋説明の段落＋装飾ボックス」のセットを1回作り、複製しながら記事を書いていくことが多いです。そうすると、SWELLの段落ブロックの見た目が記事全体でそろいやすくなります。

段落ブロックのツールバーとサイドバーの使い方（SWELL）

上部ツールバーでよく使う項目

段落ブロックをクリックすると、そのすぐ上に横長のツールバーが表示されます。よく使う主な機能をまとめると、次のようになります。

機能	役割	使いどころ
ブロックタイプの変更	段落を見出しやリストなどに変換	書いたあとで「やっぱり見出しにしたい」と思ったとき
配置（左・中央・右）	テキストの位置を調整	図のキャプションだけ中央寄せにしたいときなど
太字・リンクなど	文字の装飾	強調したい言葉や外部リンクを入れるとき
SWELL独自の装飾ボタン	マーカーやインラインボックスなど	文章中の一部分だけ軽く目立たせたいとき

とくに「ブロックタイプの変更」はかなり便利で、一度段落として書いたあとでもワンクリックで見出しブロックやリストに変えられます。書きながら構成を微調整しやすくなるので、積極的に使っていきたいところです。

右サイドバー「設定」「スタイル」のポイント

段落ブロックを選択した状態で、画面右側の「ブロック」タブを見ると、SWELL独自の項目がいくつか並んでいます。よく触るものを整理すると、次のような感じです。

項目	内容	よくある使い方
ボーダーセット	枠線や背景の基本パターンを選ぶ	注意書きや結論のボックスを簡単に作る
スタイル（ボックス系）	吹き出し・付箋などの装飾スタイル	会話風にしたいときや、メモっぽく見せたいとき
ブロック下の余白量	段落の下にどれだけ空きを入れるか	セクションの区切りをはっきりさせたいとき
色・タイポグラフィ	テキスト色・背景色・フォントサイズ・行間	見やすい文字サイズや行間に微調整するとき

SWELLの段落ブロックに慣れてきたら、このサイドバーを中心にいじるだけで「全体の統一感」を出しやすくなります。毎回違う設定にするのではなく、「自分のブログの標準」を決めておくと迷いが減ります。

高度な設定（HTMLアンカー・追加CSSクラス）

少し上級編にはなりますが、「高度な設定」も知っておくと便利です。

• HTMLアンカー…その段落に「名前」を付けるイメージ。目次やページ内リンクから、特定の段落へジャンプさせたいときに使う。
• 追加CSSクラス…自分で決めたクラス名を書いておくと、CSS側で見た目を一括指定できる。例えば「注意ボックス用のクラス」を作っておくと、同じスタイルをどの段落にも当てやすい。

ここは無理に触る必要はありませんが、「デザインをもう一段細かく整えたい」と思ったときに役立つ部分です。少しずつ慣れていけばOKです。

SWELL段落ブロックの装飾とデザインルール

よく使う装飾スタイルとおすすめ用途

SWELLには、段落ブロック用の装飾がたくさん用意されています。すべてを覚える必要はないので、まずは次のような定番パターンだけ押さえておけば十分です。

装飾スタイルの例	向いている用途	私のよく使うパターン
チェック系ボックス	結論・メリット・要点	見出し直下の「結論」をまとめるときに使う
アラート系ボックス	注意点・デメリット・重要な補足	お金や健康など、読み飛ばしてほしくない注意を書き込む
メモ・付箋風ボックス	補足情報・豆知識	本文に入れると流れが途切れそうな小ネタを置く
吹き出し	会話・体験談	自分や読者の声を演出したいときに使う
ストライプや方眼など背景系	セクションのまとめ	長い説明の最後に要点をまとめるときに使う

ブログ全体のイメージを崩さないためにも、「自分のブログではこの3〜4種類だけをメインで使う」と最初に決めておくと、見た目が安定します。

使いすぎ注意！読みやすさを守るためのルール

装飾は便利ですが、やりすぎると読者の目が疲れてしまいます。私自身が意識しているルールを挙げておきます。

大事なのは「飾るための装飾」ではなく「伝えるための装飾」にすることです。SWELLの段落ブロックは見た目を派手にもできますが、あえて引き算することで読みやすさがぐっと上がります。

ブログのジャンル別・段落装飾の使い方

ブログのジャンルによって、向いている段落装飾も少しずつ違います。ざっくりとした目安をまとめると、次のような感じです。

ブログジャンル	合う装飾	避けたい装飾
アフィリエイト系（商品紹介）	チェック系・アラート・メモ	カラフルな吹き出しの多用
雑記・日記系	吹き出し・付箋・メモ	堅すぎるボックスばかりのレイアウト
ビジネス・ノウハウ系	シンプルなボックス・ストライプ	派手な背景色を多用した装飾
美容・ファッション系	柔らかい色のボックス・付箋	原色に近い強い色のボックス

どのジャンルでも共通して大事なのは、「読者層に合ったトーンでそろえる」ことです。SWELLの段落ブロックはデザインの幅が広いので、自分のブログのキャラクターに合う装飾を選んでみてください。

SEOと読みやすさを意識したSWELL段落ブロックの使い方

1段落の長さとキーワード配置のコツ

まずは、1段落の長さについてです。人によってスタイルは違いますが、私が意識している目安は次のようなイメージです。

• 1段落の文字数は、スマホで読んだときに一息で読める長さ（おおよそ50〜100文字前後）
• 行数は2〜4行程度におさめると、画面が文字だらけにならない
• キーワードは、見出しと最初の1〜2段落に自然に混ぜる程度にとどめる

例えばこのテーマなら、「SWELL」「段落ブロック」「使い方」といった言葉を、見出しと導入、まとめ部分に散らしつつ、本文では自然な日本語として「SWELLの段落ブロックの使い方」「段落ブロックの操作」などの形で使っていくイメージです。

スマホでの見え方をチェックするポイント

今は多くの読者がスマホで記事を読みます。なので、段落ブロックの使い方もスマホの画面を意識して調整したほうがうまくいきます。

プレビューでスマホ表示に切り替え、「初めてこの記事を読む人」のつもりで上から下まで流し読みしてみると、気になる部分が見えてきます。気になったところだけ、段落ブロックの余白や装飾を調整していきましょう。

私がよく使うSWELL段落テンプレ例

最後に、私がよく使っているSWELLの段落構成のテンプレートを紹介します。これをベースに少しアレンジするだけでも、かなり読みやすさが変わります。

位置	段落の役割	装飾例
見出し直下	結論・要点を1〜2段落でまとめる	シンプルなチェック系ボックス
理由・根拠部分	箇条書きと短い段落で説明する	装飾なし＋必要な部分だけ太字
注意点・補足	読み飛ばしてほしくない情報を書く	アラート系ボックス
セクションの最後	要点のまとめと一言メッセージ	ストライプ系のボックスなど控えめな装飾

SWELLの段落ブロックの使い方に迷ったら、このテンプレに当てはめて考えてみてください。「なんとなく装飾する」のではなく、「この段落の役割に合わせて装飾を選ぶ」という感覚に変わっていきます。

よくある質問：SWELLの段落ブロックの使い方

Q1. 段落ブロックとクラシックブロック、どちらを使うべきですか？

A. これから記事を書いていくなら、基本的には段落ブロックを中心に使うのがおすすめです。クラシックブロックは旧エディターの延長のようなもので、SWELLの豊富なブロックや装飾と組み合わせにくい場面が出てきます。

一方で、段落ブロックをベースにしておけば、見出し・リスト・ボックスなどと柔軟に組み合わせやすく、SWELLらしいデザインも活かしやすくなります。過去記事を少しずつ段落ブロックに置き換えていくのも良い方法です。

Q2. 段落ブロックの行間や余白が思ったとおりになりません

A. 行間は「スタイル」タブのタイポグラフィ設定、上下の余白は「ブロック下の余白量」で調整するのが基本です。それでも違和感がある場合は、テーマカスタマイザーや追加CSSで全体の行間設定を見直す必要が出てくることもあります。

おすすめは、まず1つの段落ブロックで行間と余白のバランスを整え、その見た目を基準に記事全体を合わせていくやり方です。いきなり全記事を変えようとせず、よく読まれる記事から少しずつ調整していくと、負担が少なく済みます。

Q3. 段落ブロックの装飾が多すぎて、どれを使えばいいか分かりません

A. 最初から全部試そうとせず、「結論用」「注意用」「補足用」の3種類だけ決めて使い始めるのがおすすめです。例えば「結論はチェック系ボックス」「注意はアラート」「補足はメモ風」といった感じで、自分のルールを決めておきます。

SWELLの段落ブロックの使い方で大事なのは、「先にルールを決めておくこと」です。記事ごとに違う装飾を使いすぎると、読者は何が重要なのか分かりづらくなってしまいます。まずは3種類に絞って慣れていき、必要に応じて少しずつバリエーションを増やしていきましょう。

まとめ：SWELLの段落ブロックの使い方のコツ

この記事のポイントを振り返ります

今日からできる最初の一歩としては、まず「よく使う段落装飾を3種類だけ決める」ことをおすすめします。その3種類を使いながら、少しずつSWELLの段落ブロックの使い方に慣れていき、自分のブログに合ったルールを足していくイメージです。

いきなり完璧を目指す必要はありません。この記事を開いたまま、まずは1つの見出しだけ、ここで紹介したコツを意識して書き直してみてください。それだけでも、読みやすさの変化を実感できるはずです。