MENU

当ブログ愛用のWordPressテーマ

広告

\乗り換え先おすすめテーマ!/

/ブロガーとして本格的に取り組む\

✓優秀なデザイン性 ✓最新のSEO ✓サイト高速化に対応|CocoonからSWELLに乗り換えた私の感想と評判レビューを見る >>

CocoonからSWELLに移行した私の感想を見る >>

クリック

タップ

【超基本】SWELL段落ブロックの使い方とデザイン装飾まとめ

「段落ブロックでできることを知りたい…」

「段落ブロックをグループ化したり、横並びする方法は?」

「段落ブロックをオシャレに装飾するには?」

この記事ではそんな方に向けて、SWELLで段落ブロックの使い方を解説します。

かめコンパス

こんにちは、かめコンパスです!

この記事を読めば、あなたも簡単に

  • 段落ブロックの基本的な使い方が分かる

ようになります。

私もあなたと同じことに悩んでたのですが、本記事の方法でサクッと解決でき、記事をおしゃれに作成することができました。

どこよりも分かりやすく書いている自信がありますので、あなたもパパッと解決してみてください!

SWELL購入を検討中の人はこちらもご覧ください!/

目次

SWELL段落ブロックでできること3選

段落ブロックはWordPress標準ブロックですが、SWELLではその機能が拡張しています。

SWELLで機能拡張した段落ブロックでは以下のようなことができます。

  • テキストを入力する
  • 様々なブロックを挿入する
  • 段落ブロックを装飾する

それぞれ詳しく解説します。

テキストを入力する

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

入力したテキストはブロックツールバーから以下のような装飾の設定ができますよ。

マーカー

背景色

テキストカラー

フォントサイズ

イタリック

太字

ブロックツールバーで設定できるテキスト装飾
かめコンパス

私は太字+マーカーの組み合わせをよく使っているよ

また、ユーザーの悩みや興味がありそうな話題をテキストリンクで別記事に誘導し、

回遊率アップとユーザーの満足度を高めることもできるでしょう。

様々なブロックを挿入する

SWELLには21種類のオリジナルブロックに加え、機能拡張したコアブロック(=WordPress標準ブロック)を段落ブロックに挿入できます。

SWELLオリジナルブロック一覧

ここでSWELLで利用できるブロックを一部紹介します。(:SWELLオリジナルブロック、:コアブロック。気になるブロックがあればブロック名のテキストリンクをクリックしてください。)

アコーディオン

タイトル

テキスト

タブ

テキスト1

キャプションボックス

タイトル

テキスト

説明リスト

タイトル

テキスト

タイトル

テキスト

ステップ

STEP
タイトル

テキスト

STEP
タイトル

テキスト

ふきだし

かめコンパス

テキスト

FAQ

質問

回答

リスト

  • テキスト
    • テキスト
  • テキスト

画像

テーブル

項目1項目2
aaabbb
cccddd

どのブロックも優秀で、情報をまとめて見やすくしたり、記事がオシャレになったりとどれも欠かせない機能です。

段落ブロックを装飾する

SWELLでは段落ブロックの装飾を28種類のオリジナルデザインから選べます。

SWELLの段落ブロックの装飾一覧

設定方法は、後ほど「SWELL段落ブロックのオリジナル装飾でおしゃれにデザイン!」で解説します。

さらにボーダー設定とそれ以外の装飾は組み合わせて使うことができ、以下のようにオシャレなデザインに仕上げられますよ。

ボーダーセット×方眼

ボーダーセット×ストライプ

ボーダーセット×グッド

SWELL段落ブロックの基本的な使い方

SWELLで段落ブロックの基本的な使い方を紹介します。

段落ブロックの追加

SWELLで段落ブロックを追加する方法は5つあります。

  1. キーボードのショートカットを使う

後に追加:Enterを押す

Windowsの場合…

前に追加:Ctrl+Alt+Tを同時に押す

に追加Ctrl+Alt+Yを同時に押す

Macの場合…

前に追加:Command+Option+Tを同時に押す

に追加Command+Option+Yを同時に押す

  1. ブロック挿入ツールから選択する

+段落の順にクリックする

SWELLで段落ブロックを追加する手順-2
  1. 検索窓から呼び出す

+をクリックし、検索窓に「段落」と入力する

SWELLで段落ブロックを追加する手順-3
  1. ブロックツールバーから選択する

前に追加 / 後に追加の順にクリックする

SWELLで段落ブロックを追加する手順-4
  1. ヘッダーツールバーから選択する

□⇒前に追加 / 後に追加の順にクリックする

SWELLで段落ブロックを追加する手順-5

段落ブロックの削除

SWELLで段落ブロックを削除する方法は3つあります。

  1. キーボードのショートカットを使う

Windowsの場合…

  • Backspaceを押す
  • Shift+Alt+Zを同時に押す

Macの場合…

  • Deleteを押す
  • Shift+Option+Zを同時に押す
  1. ブロックツールバーから選択する

削除の順にクリックする

SWELLで段落ブロックを削除する手順-2
  1. ヘッダーツールバーから選択する

□⇒削除の順にクリックする

SWELLで段落ブロックを削除する手順-3

テキストの入力

SWELLで段落ブロックにテキストを入力できます。

SWELLで段落ブロックにテキストを入力する手順

その他ブロックの挿入

SWELLでは以下3つの方法で、段落ブロックにふきだしやキャプションボックスなど様々なブロックを挿入できます。

  1. ブロック挿入ツールから選択する

+〇〇の順にクリックする 「〇〇」はブロック名です。

SWELLで段落ブロックに様々なブロックを挿入する手順-1
  1. キーワードを入力する

/〇〇を入力する 「/(スラッシュ)」は半角、「〇〇」はブロック名 or 任意のキーワードを入力してください。

SWELLで段落ブロックに様々なブロックを挿入する手順-2
  1. 検索窓から呼び出す

+をクリックし、検索窓に「〇〇」と入力する 「〇〇」はブロック名を入力してください。

SWELLで段落ブロックに様々なブロックを挿入する手順-3

段落ブロックの移動

SWELLで段落ブロックを移動する方法は2つあります。

  1. ブロックツールバーから選択する
  • 上に移動 / 下に移動をクリックする
  • ドラックをドラッグ&ドロップする
SWELLで段落ブロックを移動する手順-1
  1. リストビューからドラッグ&ドロップする

ドキュメント概観リストビューの順にクリックして任意の段落ブロックをドラッグ&ドロップする

SWELLで段落ブロックを移動する手順-2

段落ブロックのコピー

SWELLで段落ブロックをコピーする方法は2つあります。

  1. キーボードのショートカットを使う

Windowsの場合…

  • Ctrl+Cを同時に押す

Macの場合…

  • Command+Cを同時に押す
  1. ブロックツールバーから選択する

コピーの順にクリックする

SWELLで段落ブロックをコピーする手順-2

段落ブロックの設定

記事編集ページ右上の設定ブロックの順にクリックすると、SWELLで段落ブロックの設定ができます。(後ほど本記事の「SWELL段落ブロックのオリジナル装飾でおしゃれにデザイン!」で詳しく解説します。)

SWELLで段落ブロックを設定する手順

段落ブロックのグループ化

グループ化とは…複数のブロックを1つにまとめること

SWELLで段落ブロックをグループ化する方法は2つあります。

  1. マウスで選択する

マウスでクリックしたまま複数の段落ブロックを選択し、ツールバー項目のグループ化をクリックする

SWELLで複数の段落ブロックをグループ化する手順-1
  1. キーボードとマウスで選択する

Shiftキーを押したまま複数の段落ブロックを選択し、ツールバー項目のグループ化をクリックする

SWELLで複数の段落ブロックをグループ化する手順-2

段落ブロックの横並び

SWELLで複数の段落ブロックを選択して、ツールバー項目の横並びをクリックすると、段落ブロックを横並びにできます。

SWELLで複数の段落ブロックを横並びする手順

横並びはSWELL専用ブロック「リッチカラム」でも可能です。

段落ブロックの変換

SWELLでは段落ブロックを選択して、ツールバー項目の段落をクリックすると、見出しやリストなど様々なブロックに変換できます。

SWELLで段落ブロックをその他のブロックに変換する手順

SWELL段落ブロックのオリジナル装飾でおしゃれにデザイン!

SWELLの段落ブロックは、以下のようなデザインに装飾できます。

ボーダー設定01

ボーダー設定02

ボーダー設定03

ボーダー設定04

ストライプ

方眼

角に折り目

スティッチ

かぎ括弧

かぎ括弧(大)

窪み

浮き出し

左に縦線

付箋

吹き出し

吹き出し2

グッド

バッド

インフォ

アナウンス

ペン

ポイント

チェック

バツ印

はてな

アラート

メモ

SWELL公式サイトでもこれらの装飾について解説しています。

公式サイトSWELLで使える「ボックス装飾」一覧

設定方法は、右サイドバーの設定タブから選んでください。

SWELLで段落ブロックを装飾する手順

また、ボーダー設定01~04と一部の装飾は、スタイルを別のパターンに変更することができます。

SWELLの段落ブロックの装飾「ボーダーセット」のデザイン一覧
ボーダーセット全8種類
SWELLの段落ブロックの装飾「アイコンボックス(小)」のデザイン一覧
アイコンボックス(小)全3種類
SWELLの段落ブロックの装飾「アイコンボックス(大)」のデザイン一覧
アイコンボックス(大)全2種類

これら装飾の変更は、WordPress管理画面でSWELL設定エディター設定の順にクリックし、「ボーダーセット」と「アイコンボックス」タブ内で設定できますよ。

SWELLの段落ブロックの装飾「ボーダーセット」「アイコンボックス」のデザインを変更する手順-1
  • ボーダーセット

ボーダーセットでは、「枠線のスタイル」「枠線の太さ」「枠線の色」の3つを設定できます。

SWELLの段落ブロックの装飾「ボーダーセット」のデザインを変更する手順-2
  • アイコンボックス

アイコンボックスでは、「装飾スタイル」「アイコンの色」「装飾内の色」の3つを設定できます。

SWELLの段落ブロックの装飾「アイコンボックス」のデザインを変更する手順-2

色の設定では、「方法①:カラーピッカーで直感的に色を選ぶ」「方法②:カラーコードを入力して色を指定する」の2通りから色を選べますよ。

SWELLの段落ブロックの装飾「ボーダーセット」「アイコンボックス」のデザインを変更する手順-3
かめコンパス

カラーコードはChromeの拡張機能「ColorZilla」で調べるのがおすすめ!

SWELL段落ブロックまとめ

今回は、SWELLで段落ブロックの使い方を紹介しました。

当ブログではSWELLに関する記事をいくつか書いてます。

下のページにまとめていますので、のぞいてみてください。

かめコンパス

ためになったという人は“Twitterフォロー”や“ブックマーク”してくれると嬉しいです!

・   ・   ・

SWELLの関連記事まとめ

SWELLで段落ブロックの使い方の記事

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次