当サイト使用中のテーマ「SWELL」のレビューはこちら

SWELL段落ブロックの使い方|ツールバーとサイドバー周りを完全解説

【PR】この記事には広告を含む場合があります。
アッフィー

こんな悩みを解決できる記事をご用意しました!
私はブログを始めて3年。
これまでに100本以上の渾身の記事を書き上げてきました。
その結果、累計で6桁の収益を達成することができました。

当サイトは、SWELLを3年間使い込んだ経験を活かし、SWELL 段落ブロックの全機能と具体的な使い方を徹底解説します。

この記事を読んで実践すれば、ブロックツールバーの操作からサイドバーの詳細設定まで完全に習得できます。

そして、段落ブロックを自在に扱えるようになるので、あなたの記事の読みやすさと品質が格段に向上するでしょう。

SWELLのポテンシャルを最大限に引き出し、読者から「見やすい」と評価される記事を一緒に作っていきましょう。

まだSWELLを購入していないなら、以下の記事を参考にSWELLを導入してください。

\ 初心者に最もおすすめなWordPressテーマ /

URL=https://swell-theme.com/

SWELLの魅力を知りたいなら、次の記事が参考になりますよ。ぜひ参考にしてみて下さい。

目次

SWELL段落ブロックの基本

段落ブロックは、記事作成で最も頻繁に使うブロックです。

SWELLではWordPress標準機能に加えて、豊富な装飾機能が追加されています。

まずは段落ブロックの基本的な概念と操作方法を理解しましょう。

WordPress標準ブロックを拡張した機能

段落ブロックはWordPressに標準搭載されているブロックですが、SWELLテーマを導入することで機能が大幅に拡張されます。

WordPress標準機能では文字色やサイズの変更といった最低限の装飾しかできません。

しかしSWELLでは28種類のボックスデザインやマーカー線、アイコンボックスなど、プロ並みの装飾が簡単に使えるようになります。

たとえば、重要な部分にマーカー線を引いたり、注意書きをボックスで囲んだりする作業が、ワンクリックで完了します。

装飾に悩む時間を減らし、記事執筆に集中できる点がSWELL導入の大きなメリットです。

\ 初心者に最もおすすめなWordPressテーマ /

URL=https://swell-theme.com/

改行と段落の違い

段落ブロックの使い方を説明する前に、ブログ初心者が迷うことの多い改行と段落の違いについて確認しておきましょう。

改行と段落は似ているようで、実は明確な違いがあります。

改行は段落内で行を変えるだけの操作で、Shift + Enterキーで実行します。行間は変わらず、文章が続いている印象を与えます。

この文章は改行と段落の違いについて説明しています。
改行は行間が変わらず文章が続くイメージです。

一方、段落は文章の意味のあるかたまりを区切る単位で、Enterキーだけで作成できます。

この文章は改行と段落の違いについて説明しています。

段落を分けると行間が広くなります。

段落を分けると行間が広くなり、視覚的にも内容が切り替わったことが分かりやすくなります。

  • 行を変える場合・・・Shift + Enter
  • 段落を分ける場合・・・Enter

段落ブロックでできること

SWELLの段落ブロックでは以下のことができます。

以下で深掘りします。

テキストを入力する

SWELLの段落ブロックにはテキストを入力することができます。

ブロックツールバーを使うと、テキストに装飾をかけることができます。

ブロックツールバー

テキストを入力しました。

テキストを太字にしました。

テキストを斜めにしました。

テキストのサイズを大きくしました。

テキストの色を変更しました。

テキストに背景色をつけました。

テキストにマーカーをしました。

いろいろなブロックを挿入する

SWELLではSWELLオリジナルブロックをはじめ、機能強化されたコアブロックが用意されており、クリックするだけで段落ブロックに挿入することができます。

SWELLオリジナルブロック

私がよく利用するブロックをご紹介しますね。

✳︎気になるブロックをクリックすると紹介記事に飛べますよ!

ブロックを装飾する

SWELLではブロックの装飾を以下の28種類のデザインから選べます。

ボーダー01

ボーダー02

ボーダー03

ボーダー04

ストライプ

方眼

角に折り目

ステッチ

かぎ括弧

かぎ括弧(大)

窪み

浮き出し

左に縦線

付箋

吹き出し

吹き出し2

グッド

バッド

インフォ

アナウンス

ペン

ポイント

チェック

バツ印

はてな

アラート

メモ

装飾の仕方については後ほど「ボーダーセットで枠線デザインを選ぶ」と「スタイル装飾でボックスデザインを追加する」で解説しますね。

新しいブロックを追加する6つの方法

ブロックエディタは見出し、段落、画像などをブロック単位で管理しています。

ブロック単位で管理

記事を書くためには、見出し、段落、画像などのコンテンツの数だけ新しいブロックを追加する必要があります。

新しいブロックを追加する方法は複数ありますが、ここでは6つ紹介します。

アッフィー

状況に応じて使い分けると作業がスムーズになりますよ。

方法①:Enterキーで追加(最も簡単)

投稿編集画面の初期状態では、空白の段落ブロックが一つだけ用意されています。

投稿編集画面の初期状態

段落ブロック内の文章の末尾でEnterキーを押してみて下さい。

すると、すぐ下に空白のブロックが追加されます。

新しい段落ブロックが追加される

文章を書きながら自然に次の段落を作れるため、最も簡単で使用頻度が高い方法です。

方法②:ブロックツールバーから追加

ブロックツールバー右端の「」(オプション)から「前に挿入」または「後に挿入」をクリックしましょう。

ブロックツールバーの (オプション)から「前に挿入」または「後に挿入」の順にクリック

すると、すぐ上または下に空白のブロックが追加されます。

すぐ上または下に段落ブロックを追加できる

方法③:画面左上の「+」から追加

方法①、方法②は空白ブロックを追加する方法でした。

ここからは、その他のブロックを追加する方法を紹介しますね。

画面左上の「+」ボタンをクリックしましょう。

画面左上の「+」ボタンをクリック

ブロックの一覧が表示されるので、追加したいブロックのアイコンをクリックして下さい。

追加したいブロックのアイコンをクリック

なお、「+」をクリックする前にどこを選択していたかにより、追加される場所が変わります。

どこを選択していたか?追加される場所
空白ブロックを選択していた場合その場所にブロックが追加される
空白ブロック以外を選択していた場合その下にブロックが追加される
どこも選択していない場合記事の一番最後に追加される

方法④:ブロック間の「+」から追加

既存の2つのブロックの間にマウスを合わせると表示される「+」ボタンをクリックしてください。

行間に「+」ボタンが表示されるのでクリック

すると、ブロックの候補が表示されるので、追加したいブロックのアイコンをクリックしましょう。

ブロックの候補が表示される

候補の中に追加したいブロックがない場合は、検索窓にブロック名を入れて検索しましょう。

検索窓にブロック名を入れて検索

「すべて検索」をクリックすると。【画面左上の「+」をクリック】と同じブロック選択画面が表示されます。

ブロック選択画面が表示される

追加したいブロックのアイコンをクリックして、ブロックを追加しましょう。

アッフィー

この方法は、テキストとテキストの間にブロックを挿入したい場合に便利ですよ

方法⑤:空白ブロックの右端の「+」から追加

空白の段落ブロックの右端の「+」ボタンをクリックしてください。

空白ブロックの右端の「+」をクリックする

するとブロックの候補が表示されますので、追加したいブロックのアイコンをクリックしましょう。

ブロックの候補が表示される

この後の手順は【ブロック間の「+」から追加と同じです。

方法⑥:スラッシュコマンドを使う

空白ブロックで「/」と「ブロック名」を入力すると、ブロックの候補が表示されます。

たとえば「/カラム」と入力すると、カラムブロックとリッチカラムブロックが候補として出てきます。

「/」と「ブロック名」を入力

「/」を使う方法は、キーボード操作だけで完結するため、慣れると最も速く追加できます。

アッフィー

紹介した方法の中から、自分に合った方法を見つけてくださいね!

ブロックツールバーとサイドバーの役割

段落ブロックの装飾や設定は、主にブロックツールバーサイドバーの2箇所から行います。

ブロックツールバーとサイドバーの説明

ブロックツールバーはブロック上部(または画面左上)に表示され、文字揃えや太字、リンク挿入といった基本操作がワンクリックで実行できます。

一方、サイドバーは画面右側にあり、ボックス装飾やボーダーセット、余白調整など、より詳細な設定を行う場所となります。

たとえば、文字を太字にしたいときはツールバーで瞬時に設定し、段落全体をおしゃれなボックスで囲みたいときはサイドバーから選ぶという使い分けです。

次からは、ブロックツールバーとサイドバーでどんなことができるのかを見ていきましょう。

SWELLのブロックツールバーでできること

ブロックツールバーは、段落ブロックを選択したときに上部(または画面左上)に表示されるメニューです。

ブロックツールバー

文字装飾から配置調整まで、よく使う以下の機能がまとまっています。

順番に見ていきましょう。

ブロックタイプを変換する

段落ブロックは、ツールバー左端のアイコンをクリックすることで、見出しやリストなど別のブロックタイプに変換できます。

ツールバー左端のアイコンをクリック

すでに入力した文章をそのまま活かしながらブロックタイプを変更できるので、わざわざ文章をコピーして貼り直す手間がかかりません。

たとえば、段落として書いた文章を「これは見出しにしたほうがいいな」と思ったら、ツールバーから「見出し」を選んでみてください。

ツールバーから「見出し」を選ぶ

すると、文章が見出しに変換されます。

文章が見出しに変換される
アッフィー

一度入力した内容を無駄にせず、柔軟にレイアウトを調整できますよ!

段落ブロックを移動する

ブロックツールバーの上下矢印ボタンを使えば、段落ブロックを好きな位置に移動できます。

上矢印をクリックすると上へ、下矢印をクリックすると下へ、段落ごと移動します。

下矢印をクリックすると下へ段落ごと移動
上矢印をクリックすると上へ段落ごと移動

また、ツールバー左側の6つの点(ドラッグハンドル)をドラッグ&ドロップすれば、離れた場所にも一気に移動可能です。

6つの点(ドラッグハンドル)をドラッグ_ドロップすすると、離れた場所に移動可能
アッフィー

この機能で簡単に段落の順番を入れ替えよう!

文字揃えを変更する

ツールバーの文字揃えアイコンをクリックすると、段落全体の配置を「左寄せ」「中央寄せ」「右寄せ」に変更できます。

ツールバーの文字揃えアイコンをクリック

初期設定は左寄せですが、2行目以降を「テキスト中央寄せ」「テキスト右寄せ」に設定すると以下のようになります。

「テキスト中央寄せ」「テキスト右寄せ」に設定
アッフィー

文字配置を工夫するだけで、記事の印象がガラッと変わりますよ!

デバイスごとに表示を切り替える

SWELLのブロックツールバーには、デバイス別に表示を制御する機能があります。

「PCのみ表示」「スマホのみ表示」を選択することで、表示するデバイスにより段落の表示・非表示を切り替えられます。

表示するデバイスににより段落の表示・非表示を切り替えられる

PCで表示すると、「PCサイズでのみ表示する」に設定した文章が表示され、

「PCサイズでのみ表示する」に設定した文章が表示される

スマホで表示すると、「スマホサイズでのみ表示する」に設定した文章が表示されます。

「スマホサイズでのみ表示する」に設定した文章が表示される

たとえば、詳しい説明文はPC版だけに表示し、スマホでは簡潔な文章だけを見せる、といった使い分けが可能です。

アッフィー

デバイスごとに最適な情報量を見つけて、読者の離脱を防ごう!

ブロック下の余白量を調整する

ブロックツールバーの余白調整アイコンから、段落ブロックの下に入る余白を0〜6emの範囲で設定できます。

段落ブロックの下に入る余白を0〜6emの範囲で設定できる

余白を広げると視覚的に区切りが明確になり、逆に余白を狭めると段落をまとまりとして見せることができます。

アッフィー

重要なポイントの前に余白を広めに取ると、読者の注意を引きやすくなりますね!

太字とイタリックで強調する

ツールバーの「B」ボタンで太字、「I」ボタンでイタリック(斜体)に変更できます。

「B」ボタンで太字、「I」ボタンでイタリック(斜体)に変更

重要なキーワードや読者に伝えたい箇所を太字にすると、流し読みしている人の目にも留まりやすくなります。

イタリックは引用や補足説明など、本文とは少し違ったニュアンスを伝えたいときに便利です。

アッフィー

使い方は簡単。文字を選択してボタンをクリックするだけ!

文字を選択してボタンをクリック

リンクを挿入する

ツールバーのリンクアイコンをクリックすると、選択した文字にリンクを設定できます。

リンクアイコンをクリックして選択した文字にリンクを設定

外部サイトへのリンクはもちろん、同じブログ内の別記事(内部リンク)も簡単に挿入できます。

リンク先を指定してEnter

リンクの設定については、「【リンクの貼り方】WordPressブログにURLを貼る方法」で詳しく解説しています。参考にしてください。

内部リンクについては「SEOに効果的な内部リンクの貼り方のコツと注意すべき点を解説」も参考になりますよ。

その他の機能

「さらに表示ボタン」(をクリックすると、WordPressに標準で用意されているその他の機能が使えます。

「さらに表示ボタン」をクリック

インラインコードを設定する

インラインコードは、文章中にプログラムコードやHTMLタグを表示させるときに使います。

ツールバーの「さらに表示」ボタン(下矢印)から「インラインコード」を選択すると、選択した文字が等幅フォントで強調表示されます。

ツールバーの「さらに表示」ボタン(下矢印)から「インラインコード」を選択
アッフィー

下図のように一目で区別できるので、読者が「これはコードだ」とすぐに理解できますよ!

コードを見て区別できる

文章中に画像を挿入する

①画像を挿入する位置を選択し、②ツールバーの「さらに表示」ボタン(下矢印)から③「インライン画像」をクリックすると、文章の途中に画像を埋め込めます。

ツールバーの「さらに表示」ボタン(下矢印)から「インライン画像」を選択

たとえば「このアイコンを選択して〜」のように、文章の中に画像を表示させたい時に使えます。

説明と画像を一体化させて見せたいとき
アッフィー

小さなアイコンや絵文字的な画像を挿入するのに適していますよ!

キーボード入力を表示する

キーボード入力機能は、読者がキーボードで入力すべき文字を示すときに使います。

ツールバーの「さらに表示」()をクリックして表示されるメニューから「キーボード入力」をクリックすると、選択した文字がキーボードキー風に表示されます。

ツールバーの「さらに表示」ボタンから「キーボード入力」をクリック

すると、選択した文字がキーボードキー風に表示されます。

たとえば「Command + Cでコピーできます」のように、ショートカットキーを説明する際に視覚的に分かりやすくなります。

Ctrl + Cでコピーできます

上付き・下付き・打ち消し線を使う

ブロックツールバーの「さらに表示」をクリックして表示されるメニューで「上付き」、「下付き」、「打ち消し線」が設定できます。

上付き・下付き・打ち消し線を使う

たとえば以下のように使用できます。

効果使用例
上付きm²(平方メートル)
下付きH₂O
取り消し線5,000円→3,000円

脚注を追加する

ブロックツールバーの「さらに表示」をクリックして表示されるメニューから「脚注」を選択すると、選択した部分に脚注番号が付き、記事の最後に脚注ブロックが自動で追加されます。

選択した部分に脚注番号が付き、記事の最後に脚注ブロックが追加される

SWELL独自の装飾機能

SWELLのブロックツールバーには、WordPress標準にはない独自の装飾機能が追加されています。

SWELLマークをクリックする

順番に見ていきましょう。

書式クリアで装飾をリセットする

SWELL装飾メニューの「書式クリア」を選択すると、選択した文字に施されたすべての装飾を一括でリセットできます。

SWELL装飾メニューの「書式クリア」を選択
アッフィー

個別に解除する手間が省けていいですよ!

コード表示(DIR・FILE)を使う

SWELL装飾メニューの「コード(DIR)」や「コード(FILE)」を選択すると、ディレクトリ名やファイル名を視覚的に区別して表示できます。

SWELL装飾メニューの「コード(DIR)」や「コード(FILE)」を選択

たとえば、

エクスプローラーを開きます。

C:\Program Files\MyApplication\(DIR に移動してください。

その中にある config.ini(FILE) をメモ帳で開きます。

のように使用します。

これにより、ユーザーが見落としがちな「パス」や「ファイル名」が強調されるので、操作ミスを減らせます。

注釈を追加する

脚注よりも軽い補足情報を、その場で伝えたいときに使える機能です。

注釈は脚注よりも軽い補足情報を、その場で伝えたいときに使える機能

たとえば、

おすすめのプランは「スタンダードコース」です。月額980円※初回登録時は初月無料キャンペーン対象で利用できます。

のように、条件や補足をさりげなく示すことができます。

アッフィー

記事を読み進めながら補足情報を確認できるので便利ですね!

インラインボタンを設置する

SWELL装飾メニューの「インラインボタン」を使うと、表の中に小さなボタンを設置できます。

表の中に小さなボタンを設置

たとえば以下のように設置できます。

商品A商品B商品c
機能少し古い普通最新版
性能200[単位]500[単位]1000[単位]
デザイン普通良い微妙
価格5,000円10,000円15,000円
購入する購入する購入する

商品比較表などで「購入する」といったリンクボタンを配置したいときに便利です。

表にリンクボタンを設置する手順はここをクリック →
手順
テーブルブロックを挿入する
テーブルブロックを挿入
手順
ボタンのテキストを入力し選択
ボタンのテキストを入力し選択
手順
インラインボタンをクリック
インラインボタンをクリック
手順
ボタンデザインを選択
ボタンデザインを選択
手順
ペンアイコンをクリック
ペンアイコンをクリック
手順
リンク先を入力し、保存
リンク先を入力し、保存

カスタム書式で独自スタイルを適用する

SWELL装飾メニューの「カスタム書式」を使うと、事前に登録したCSSスタイルを選択した文字に適用できます。

カスタム書式で独自スタイルを適用する

SWELL設定 ➡️エディター設定 ➡️ カスタム書式で、よく使う装飾をクラス名とともに登録しておけば、ワンクリックで呼び出せます。

アッフィー

上記のカスタム書式を設定すると、こんな風に装飾されますよ。

ちなみに、上記CSSは以下のとおりです。

/* カスタム書式:キーボード風 */
 .swl-format-1 {
    display: inline-block;
    padding: 2px 6px;
    font-family: monospace;
    font-size: 0.9em;
    line-height: 1.4;
    color: #333;
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-shadow: 0 2px 0 rgba(0,0,0,0.1);
    margin: 0 2px;
}
アッフィー

参考にしてみて下さいね

書式セットで一括装飾する

SWELL装飾メニューの「書式セット」を使うと、太字・文字色・背景色・マーカー・フォントサイズをまとめて設定した書式を一括で適用できます。

書式セットで一括装飾する

SWELL設定 ➡️エディター設定 ➡️ カスタム書式で書式セットを登録しておけば、複数の装飾を一度に施せます。

たとえば「太字+黒文字+黄色マーカー」という組み合わせを「重要ポイント」として登録すれば、毎回個別に設定する手間がなくなります。

「SWELL設定 > エディター設定 > カスタム書式」で書式セットを登録

アイコンを挿入する

SWELL装飾メニューの「アイコン」をクリックすると、文章中にアイコンを挿入できます。

「アイコン」をクリックすると、文章中にアイコンを挿入できる

「アイコン」をクリックするとSWELLで利用できるアイコン一覧が表示されます。

アイコン一覧が表示される
アッフィー

アイコンを探してクリックするだけです!

ショートコードを活用する

SWELL装飾メニューの「ショートコード」から、事前に登録した以下のショートコードを挿入できます。

  • 記事内広告
  • スマホだけ改行
  • PCだけ改行
  • アイコン
  • 評価用スター
  • HTML挿入
「ショートコード」から、事前に登録したショートコードを挿入できる

テキストの大きさを変更する

「フォントサイズ」をクリックすれば、選択したテキストの大きさを変更できます。

選択したテキストの大きさを変更できる

大きさはXS、S、L、XLを指定する方法と、サイズを入力する方法があります。

テキストのサイズを変更したら、「適用」をクリックして保存しましょう。

テキスト色を変更する

次はテキストの色の変更方法です。

変更したいテキストを選択し、「テキスト色」をクリックしてください。

「テキスト色」をクリック

カラーパレットが表示されるので、変更したいカラーを選択します。

変更したいカラーを選択

他の色に変更したい場合は、縞模様の部分をクリックしてカラーパレットを表示させ、①マウスで色を選択、または②カラーコードを入力して色を選択しましょう。

マウスで色を選択、またはカラーコードを入力して色を選択

カラーコードを調べるのには、「Color Picker for Chrome」が便利です。

クリックすると開きます/

「Color Picker for Chrome」を使ってカラーコードを調べる手順はこちら ➡️
STEP
Color Picker for Chromeを導入

ChromeウェブストアーからColor Picker for Chromeのページを開きましょう。

Color Picker for Chromeのページを開く

ページが開いたら右上にある「Chromeに追加」ボタンをクリックしてください。

「Chromeに追加」をクリック

「Color Picker for Chrome」を追加するか確認されますので、「拡張機能を追加」をクリックします。

「拡張機能を追加」をクリック

すると、「Color Picker for Chrome」が追加されました、とのコメントが表示されます。

「Color Picker for Chrome」が追加されました。とのコメントが表示される

これで「Color Picker for Chrome」の導入は完了です。

STEP
よく使う拡張機能としてお気に入りに固定

導入したらよく使う拡張機能としてお気に入りに固定しておきましょう。

下の画像のように、拡張機能ボタン⇒固定ボタンの順にクリックしてください。

拡張機能ボタン⇒固定ボタンの順にクリック

固定すると、Chrome上部にあるツールバーに常時表示されるようになります。

ツールバーに常時表示される
STEP
Color Picker for Chromeを使う

カラーピッカーを使う時は、webサイトを開いた状態で①拡張機能をクリックして表示される、②「PICK COLOR」をクリックしてください。

「PICK COLOR」をクリック

「PICK COLOR」をクリックすると、カーソル付近が虫眼鏡のように拡大されます。

調べたい箇所にカーソルをおいてクリックしてください。

調べたい箇所にカーソルをおいてクリック

クリックすると、下図のようにカラーコードが表示されます。

これをコピーすれば、カラーコードのコピーは完了です。

カラーコードをコピー

背景色を設定する

続いてテキストの背景色の変更です。

①変更したいテキストを選択し、②「背景色」をクリックしてください。

「背景色」をクリック

カラーパレットが表示されるので、背景色にしたいカラーを選択します。

背景色にしたいカラーを選択

ほかの色に変更したい場合は、テキスト色の場合と同様にカラーパレットを使って変更しましょう。

マーカーを引く

SWELLのツールバーにあるマーカーアイコンをクリックすると、選択した文字に蛍光ペン風のマーカー線を引けます。

WordPress標準にはない機能で、SWELLならではの便利な装飾です。

カラーが選択できるウィンドウが開くので、マーカーの色を選択しましょう。

マーカーの色を選択する

マーカーの色はSWELL設定 ➡️ エディター設定➡️マーカーから変更でき、マーカーの形状も太線やストライプなどから選択できます。

マーカーの色は「SWELL設定 > エディター設定 > マーカー」から変更
アッフィー

重要なポイントを目立たせたいときには、欠かせない機能ですよ!

段落ブロックの便利なオプション機能

ブロックツールバーの「」(オプション)メニューには、ブロックの管理や再利用に役立つ機能がまとまっています。

ブロックツールバーの「 」(オプション)メニュー

コピーやグループ化など、知っておくと作業効率が格段にアップする機能ばかりですよ!

ブロックをコピー・複製する

オプションメニューから「コピー」を選択すると、段落ブロックをクリップボードにコピーできます。

段落ブロックをクリップボードにコピー

「複製」を選択すれば、選択中のブロックと同じものがすぐ下に作成されるので、似た内容の段落を連続して作りたいときに便利です。

「複製」をクリックすると同じ段落ブロックがしたに作成される

前後にブロックを追加する

オプションメニューの「前に挿入」「後に挿入」を使うと、選択中のブロックの直前・直後に新しいブロックを追加できます。

「前に挿入」「後に挿入」を使うと直前・直後に新しいブロックを追加できる

たとえば、見出しの直前に導入文を追加したいとき、「前に追加」をクリックすれば、

見出しの直前に導入文を追加したいとき

ピンポイントで空の段落ブロックを配置できます。

見出しのすぐ上に段落ブロックを配置できる

スタイルをコピーして再利用する

オプションメニューの「スタイルをコピー」を使うと、選択中のブロックに施された装飾だけをコピーできます。

「スタイルをコピー」をクリック

その後、別のブロックを選択して「スタイルを貼り付け」を実行すれば、同じ装飾を再現できます。

別のブロックを選択して「スタイルを貼り付け」を実行

複数ブロックをグループ化する

オプションメニューの「グループ化」を使うと、複数の段落ブロックを1つのグループとしてまとめられます。

「グループ化」をクリック

グループ化すると、グループ全体にボーダー設定を適用したり、スタイルを設定したりできます。

スタイルを設定する手順は以下の通りです。

STEP
グループ化する段落を選択
グループ化する段落を選択
STEP
オプションメニューの「グループ化」をクリック
オプションメニューの「グループ化」をクリック

すると選択した段落ブロックをグループ化できます。

選択した段落ブロックがグループ化される
STEP
ボーダー設定やスタイルを設定する
ボーダー設定やスタイルを設定する

ブロックをロックして保護する

オプションメニューの「ロック」を使うと、ブロックの移動や削除を防げます。

「ロック」をクリック

誤って重要な段落を消してしまったり、位置を変えてしまったりするのを防ぎたいときに便利です。

アッフィー

作業中のミスを防ぐのに使いましょう!

パターンとして保存する

オプションメニューの「パターンを作成」を使うと、段落ブロックをパターンとして登録できます。

「パターンを作成」をクリック

登録したパターンは、エディター画面の「パターン」タブからいつでも呼び出せます。

パターンの登録と呼び出しの手順は以下のとおりです。

STEP
登録したいパターンの作成
登録したいパターンの作成
STEP
「パターンを作成」をクリック
「パターンを作成」をクリック
STEP
パターンの名前を入力し追加をクリック
パターンの名前を入力し追加をクリック

これでパターンの登録が完了します。

STEP
左上「+」をクリックし、パターンタブを選択
左上「+」をクリックし、パターンタブを選択
STEP
「マイパターン」をクリック
「マイパターン」をクリック

「マイパターン」をクリック

STEP
パターンをドラッグ&ドロップ
パターンをドラッグ&ドロップ
アッフィー

繰り返し使う定型文や装飾済みのブロックを保存しておくと、記事作成がグッと楽になりますよ!

HTMLで直接編集する

オプションメニューの「HTMLとして編集」をクリックすると、選択したブロックをHTMLコードで直接編集できます。

選択したブロックをHTMLコードで直接編集できる

実際に「HTMLとして編集」をクリックしてみました。

「HTMLとして編集」をクリックした結果

たとえば、独自のCSSクラスを追加したり、Xのポストを張ることができます。

ブロックを削除する

オプションメニューの「削除」を選択すると、ブロックを削除できます。

「削除」を選択すると、ブロックを削除できる

SWELLサイドバーでできる詳細設定

SWELLの段落ブロックには、記事編集画面の右側にあるサイドバーを使って、デザインや表示に関する高度な設定を適用できます。

設定タブ

「設定」タブでは、主にブロック全体に対する装飾や表示のルールを設定します。

「設定」タブ

順番に見ていきましょう。

ボーダーセットで枠線デザインを選ぶ

ボーダーセットで枠線デザインを選ぶ

段落ブロックに枠線を簡単に追加できます。

枠線の種類は以下のとおりです。

ボーダー01

ボーダー02

ボーダー03

ボーダー04

枠線の太さや枠線の色は、SWELL設定➡️エディター設定➡️ボーダーセットタブのボーダーセットの登録でカスタマイズできますよ。

ボーダーの枠線の太さや枠線の色のカスタマイズ

スタイル装飾でボックスデザインを追加する

スタイル装飾

ボックス装飾は、ワードプレステーマSWELLの大きな魅力の一つです。

スタイルは24種類もあります。

ストライプ

方眼

角に折り目

ステッチ

かぎ括弧

かぎ括弧(大)

窪み

浮き出し

左に縦線

付箋

吹き出し

吹き出し2

グッド

バッド

インフォ

アナウンス

ペン

ポイント

チェック

バツ印

はてな

アラート

メモ

アッフィー

沢山ありすぎて、どれを使うか迷ってしまいますね

デバイス制限で表示を最適化する

記事を閲覧するデバイス(PC、タブレット、スマホ)ごとに、そのブロックを表示するか非表示にするかを制御できます。

デバイス制限

例えば、スマホでは不要な大きな表をPC限定にしたり、PCでは表示せずスマホだけで簡潔な案内を表示したりといった使い方が可能です。

この機能はブロックツールバーの「デバイスごとに表示を切り替える」と同じ機能です。

ブロックツールバーの「デバイスコントロール」と同じ機能

ブロック下余白で間隔を調整する

段落ブロックの直下の余白(間隔)を「0em〜6em」の範囲で調整できます。

ブロック下余白で間隔を調整する

この機能はブロックツールバーに設置された「ブロック下の余白量」と同じ機能ですが、より細かく設定できます。

ブロックツールバーに設置された「ブロック下の余白量」

HTMLアンカーでページ内リンクを設定する

HTMLアンカーとは、そのブロックをページ内リンクの移動先として指定するための「目印」のことです。

HTMLアンカー

たとえば、h2見出しの中で「この章の目次」を作る時に活躍します。

この章の目次

追加CSSクラスでカスタマイズする

ブロックエディターの標準機能やSWELLの機能だけでは設定できない、独自の装飾やレイアウトを適用したい場合に利用します。

追加CSSクラス

あらかじめCSSファイルに記述したスタイル(例:字下げや特殊な背景色)を、この入力欄にクラス名として指定することで呼び出せます。

CSSを記述できる中級者以上向けの機能です。


スタイルタブ

「スタイル」タブをクリックすると、文字の大きさや色など、タイポグラフィ(文字のデザイン)に関する設定ができます。

スタイルタブ

スタイルタブには以下のような機能があります。

順番に見ていきましょう。

テキスト色、背景色を設定する

段落ブロック全体の文字の色(テキスト色)、背景色を設定できます。

テキスト色、背景色を設定する

カラーパレットやお好みのカラーコードを使って、簡単に色の変更が可能です。

カラーパレットやカラーコードを使って設定

タイポグラフィで文字スタイルを整える

タイポグラフィでは、ブロック内の文字のサイズ行の高さ(行間)などを詳細に設定できます。

タイポグラフィ

タイポグラフィは、オプションマークをクリックし項目にチェックを入れることで、行間や文字間隔なども変更できるようになりますよ。

オプションマークをクリックし項目にチェックを入れる

SWELL段落ブロックを使いこなすコツ

SWELLの装飾機能は非常に豊富ですが、無計画に使うと記事全体がごちゃついて見えてしまいます。

ここでは、読者に読みやすい段落ブロックの適切な使い方とテクニックをご紹介します。

1段落3〜4行を目安にする

一つの段落は、3〜4行程度になるように調整しましょう。

文章ばかりが続く塊は、読者にとって非常に大きな負担となり、離脱の原因になるからです。

行数が多くなったら、Enterキーを使って適切に段落を区切りましょう。

適切な段落分けを行うことで、読者は文章を「意味のある塊」として認識しやすくなります。

特にスマホで見た場合、同じ文字数でも行数が倍近くなるため、意識的に短く区切るようにしましょう。

装飾は重要箇所だけに絞る

太字やマーカー、文字色などの装飾機能は、最も伝えたい核心部分だけに限定して使いましょう。

全ての文章に装飾を施すと、どこが重要なのかが逆に分からなくなってしまいます。

例えば、結論やキーとなる専門用語、重要なメリットなど、読者に「ここだけは注目してしてほしい」と思う箇所に装飾をするのがおすすめです。

装飾を絞り込むことで、読者の視線が狙ったポイントに集まり、記事の主張が際立つように整います。

マーカーと太字を組み合わせる

インライン装飾のなかで最も強調力が高いのが、マーカー(蛍光ペン)と太字の組み合わせです。

マーカーだけでは弱く、太字だけでは他の見出しと紛れてしまう可能性があります。

伝えたいキーワードを太字にした上からマーカーを引くことで、文章の流れを止めずに圧倒的な視認性で強調できます。

アッフィー

SWELLの段落ブロックツールバーから簡単に設定できますよ

書式セットを使う

ボックス装飾で情報を際立たせる

SWELLのサイドバーから設定できるボックス装飾(スタイル装飾)は、文章以外の情報を扱う際に非常に役立ちます。

例えば、読者への注意書きには「アラート」スタイル、記事の結論には「ポイント」スタイルを使い分けましょう。

通常の段落とは視覚的に明確に区別できるため、その情報が特別な重要性を持つことを読者に直感的に伝えられます。

スマホ表示を必ず確認する

装飾や段落分けを行った後は、必ずスマホやタブレットでの表示を確認する習慣をつけましょう。

記事作成のほとんどはPCで行われますが、現在のWebサイトの閲覧は約7〜8割がスマートフォンからだからです。

PCでは見栄えが良くても、スマホで確認すると文字が詰まっていたり、ボックスが画面からはみ出したりしている場合があります。

読者の多くを占めるスマホユーザーへの配慮が、記事の読みやすさ向上につながります。

SWELL 段落ブロックのデザインを効率化するテクニック

SWELLはデザイン性の高さが特徴ですが、毎回同じ装飾を施すのは手間がかかります。

ここでは、一度作ったデザインや装飾セットをすぐに呼び出せるようにする、時短のためのテクニックをご紹介します。

書式セットを活用する

書式セットとは、あらかじめ設定した文字の装飾(太字や文字色、背景色など)を保存し、ワンクリックで適用できる機能のことです。

例えば、サイト内で使用する「注意喚起の文字色+マーカー」を登録しておくと、以降の執筆時に手間を大きく削減できます。

登録は、WordPressダッシュボードからSWEL設定➡️エディター設定➡️カスタム書式タブで行います。

書式セットを使えば記事デザインの一貫性を保ちつつ、作業時間を大幅に短縮できますよ。

作成したブロックをパターン登録で再利用する

よく使う段落ブロックの組み合わせや装飾が完了したブロックは、「パターン」として保存しておきましょう。

「パターン」として保存

例えば、「ボックス装飾を施した段落」と「その下の画像」をセットで登録できます。

パターン登録をしておくと、新しい記事を書く際にエディターから簡単に呼び出して再利用が可能です。

アッフィー

ブロックを作り直さなくてもいいので、記事執筆のスピードが格段に上がりますよ!

パターン登録の仕方と呼び出し方は「パターンとして保存する」を確認して下さい。

SWELL段落ブロックでよくある質問

段落ブロックの操作に慣れてくると、細かいデザインやレイアウトの調整方法について疑問が出てくるものです。

ここでは、SWELLユーザーから特によく寄せられる質問にお答えします。

順番に見ていきましょう。

マーカーの色を変更するには?

マーカー(蛍光ペン)の色は、「SWELL設定」→「エディター設定」の「マーカー」タブの「マーカー設定」で、色やスタイルを自由に変更できます。

マーカー設定で色やスタイルを自由に変更

サイトのメインカラーに合わせて色をカスタマイズし、記事全体に統一感を持たせましょう。

段落の余白をより広くしたい場合は?

段落ブロックと次のブロックとの間隔を大きく空けたい場合は、「スペーサー」ブロックを間に挟んでみましょう。

「スペーサー」ブロック

スペーサーブロックは、文字通り空白のスペースを作るためのブロックです。

このブロックを挿入し、ドラッグ操作で簡単に高さを調節できます。

挿入方法は以下のとおりです。

STEP
「スペーサー」ブロックを検索

余白を入れたい部分で「+」(ブロック追加)ボタンをクリックし、検索窓で「スペーサー」を検索し選択します。

「スペーサー」ブロックを検索
STEP
ドラッグ操作で高さを調整

スペーサーブロックが挿入されたら、ドラッグ操作でお好みの高さに調整しましょう。

ドラッグ操作でお好みの高さに調整

これで段落ブロックの間にスペースができます。

段落ブロックの間にスペースができる
アッフィー

これでブロック間を大きく開けることができますよ!

ブロック装飾の設定を変更したい場合は?

ブロック装飾のデザインを変更したい場合は、「SWELL設定」から行います。

WordPressの管理画面から「SWELL設定」→「エディター設定」の「ボーダーセット」タブまたは「アイコンボックス」タブを開いてください。

「ボーダーセット」タブ
「アイコンボックス」タブ

ここで、枠線のスタイルや太さ、アイコンの色などをあらかじめ設定しておきましょう。

まとめ|SWELL段落ブロックを使いこなして高品質な記事を作ろう

今回は、SWELLテーマにおける段落ブロックの全機能と操作方法を網羅的に解説しました。

本記事の内容は以下のとおりです。

記事で学んだツールバーサイドバーの役割を理解し、基本操作から応用操作までを使いこなすことが大切です。

特に、装飾を重要箇所に絞る1段落3〜4行を目安にするといったコツを守ることで、読者がストレスなく読み進められる記事になります。

SWELLの段落ブロックを活用すれば、デザインに悩む時間を減らし、執筆に集中できるようになります。

本記事を参考に、SWELLが持つ力を最大限に引き出して、読者に価値を届けるコンテンツ作成に役立ててください。

これだけの高機能がプラグインなしで使えるのはSWELLだけです。 

まだSWELLを導入していない方は、ぜひ以下のレビュー記事で他の神機能もチェックしてみてください。

\ 初心者に最もおすすめなWordPressテーマ /

URL=https://swell-theme.com/

この記事が気に入ったら
フォローしてね!

シェア頂けると嬉しいです!よろしくお願いします!
目次