MENU
さとしん
WordPressが好きで毎日触って勉強しています。ブロックエディターに出会ってから本当にWordPressが楽しくなりました。WordPressやブロックエディタに馴染めず困っている人の役にたてたら嬉しいなぁと思いながら、このサイトを運営しています!

SWELLのブロックエディターの使い方!超充実の機能を動画付きで紹介!

SWELLはブロックエディターに完全対応したWordPressテーマです。

ブロックエディターの使い心地が素晴らしく、記事の執筆が快適になったと僕も感じています。

ネット上でもSWELLに関して以下のようなコメントを良く見かけます。

これは僕も同意見です…!
SNSなどでよく見るコメント
  • 記事を書くのが楽しい!
  • 記事を書くのがはやくなった!
  • SWELLは使いやすい!

ブログを書くことに対しての高評価なコメントがとても多い印象です。

ですが、SWELLを使ったことが無いと「なんで記事を書くのが楽しく、速くなるの?」、「どんな感じで使いやすいの?」と思う方もいると思います。

そこでこの記事では、SWELLのブロックエディターの機能や使い方を動画も使いながら紹介していきます。

SWELL導入を検討中の方はもちろん、すでにSWELLユーザーの方にも簡単な使い方の参考になれば嬉しいです。

この記事はSWELLのブロックエディターに特化した記事です。SWELLについてもっと知りたい方は以下のレビュー記事を見てみてください。

目次

SWELLのブロックエディターは使い心地が最高!

SWELLはブロックエディターに完全対応したWordPressテーマです。

そのため、ブロックエディターの機能を大幅に拡張する多数のSWELL専用機能が実装されていて、とても高機能なエディターになっています。

公式サイトにも以下の様に記載されています。

ブロックエディター完全対応!
国内最高峰の使い心地を提供します。

『ブロックエディター』とは、WordPress5.0から導入された最新のエディターです。

SWELLはその新エディターに完全対応しており、
それは、無難に「使えるようにするだけ」の中途半端な対応ではありません。

熟考されたSWELL独自のカスタマイズを加え、その使い心地は圧倒的なものになっています。

引用元:SWELL公式サイト
さとしん

本当にこの言葉の通りだと感じています…!

僕は他テーマからSWELLへの乗り換えを機にブロックエディターを触り始めましたが、素晴らしい使い心地で記事執筆が楽しく、快適になりました。

また、SWELLでは、サイトトップページの作りこみに適したブロックも充実していて、プログラミングの知識が無くても、簡単におしゃれなページを作ることができるようになりました。

これから、以下3つの点に注目して、SWELLのブロックエディター機能を紹介していきます。

  1. SWELL専用カスタムブロック
  2. WordPress標準ブロックのSWELL独自機能
  3. ブロックツールバーの機能拡張

この記事ではブロックエディターのSWELL専用機能のみを紹介します。

全テーマ共通の基本的なブロックエディターの使い方は以下の記事を見てみてください。

SWELL専用ブロックの使い方と超充実な便利機能まとめ!

まず、「SWELL専用のカスタムブロック」をご紹介します。

その名の通り、SWELLでしか使えないオリジナルのブロックが多数実装されています。

さとしん

使い方も簡単で、デザインもおしゃれですよ…!

追加されるブロックは以下の18種類です。

  1. キャプション付きブロック
  2. 関連記事ブロック
  3. ふきだしブロック
  4. SWELLボタンブロック
  5. FAQブロック
  6. アコーディオンブロック
  7. ステップブロック(タイムライン)
  8. バナーリンクブロック
  9. 説明リストブロック
  10. ABテストブロック
  11. 投稿リストブロック
  12. フルワイドブロック
  13. 広告タグブロック
  14. ブログパーツブロック
  15. タブブロック
  16. RSSブロック
  17. リッチカラムブロック
  18. 制限エリアブロック

数が多いので、今回は僕が良く使うブロックをピックアップして紹介していきます。

全てのブロックの解説は、以下のSWELL公式サイトに詳しく書かれています。

ふきだしブロック

ブロガーさんなら必ず使いたいと考えるであろう「ふきだし」。

SWELLではプラグインの追加は不要で、簡単にふきだしを作ることができます。

ふきだしブロックでできることは以下のとおりです。

  • アイコンを複数設定できる
  • ふきだしを左右に配置できる
  • ふきだしの形を2種類から選べる
  • 色を変えたり枠線を付けることができる
さとしん

アイコンを複数設定できたり

さとしん

ふきだしの位置を左右で変えることができたり

さとしん

ふきだしの形を「発言」、「心の声」の2種類から選べたり

さとしん

ふきだしの色を変えたり

さとしん

ふきだしに枠線を付けることもできます。

このようなふきだしを簡単に使えるのがとても素敵です。

ふきだしは管理画面から事前に設定しておくことができます。

SWELLのふきだしの設定

設定した後は、投稿画面でふきだしブロックを呼び出すだけです。

さとしん

こんなに簡単に使うことができます…!

詳しくはSWELL公式サイトのマニュアルで解説されています。

キャプション付きブロック

キャプション付きブロックは、キャプション(説明文や表題)が付いたボックスの装飾ができるブロックです。

以下が実際のキャプションブロックです。

←アイコンを設定できる

文章を入力したり、

  • リストを
  • 挿入することも
  • 出来ます…!

キャプション付きブロックでできることは以下のとおりです。

  • スタイルは7種類から選択できる
  • ボックスカラーは事前に設定しておける
  • 文章だけでなく、リストや画像なども配置できる
  • キャプションにはアイコンも簡単に設定できる

こんな感じでサクサク操作できます。

スタイルを7パターンから自由に選択できます。

ブロックの中には、通常の文章だけなく、リストや画像など自由に配置することができます。

キャプションにはアイコンも設定することができます。

さとしん

クリック操作だけで簡単にアイコンが挿入できて便利…!

詳しくはSWELL公式サイトのマニュアルで解説されています。

SWELLボタンブロック

SWELL専用のボタンリンクが作れるブロックもあります。

WordPress側にも「ボタンブロック」があるのですが、「SWELLボタンブロック」はさらに機能が拡張されています。

SWELLボタンブロックでできることは以下のとおりです。

  • スタイルは5種類から選択できる
  • アイコンを設定できる
  • 広告タグを改変せず貼り付けできる

実際にSWELLボタンを使っている動画は以下です。

ボタンカラーをグラデーションにできたり、キラッと光るアニメーションもクリック操作だけで設定できます。

キャプション付きブロックと同様に、アイコンを設定することもできます。

さらに、テキスト型の広告タグを改変せずにそのまま貼り付けることができます。

また、ボタンのクリック率も計測してくれます。

さとしん

アフィリエイトリンクなどを設定するときに本当に便利な機能です…!

ボタンの形やカラーは管理画面から一括で設定できます。

SWELLボタンの設定

詳しくはSWELL公式サイトのマニュアルで解説されています。

ステップブロック

ステップブロックは、何かを順序立てて説明したいとき、時系列順に説明したいときに活躍するブロックです。

ステップブロックでできることは以下のとおりです。

  • スタイルは3種類から選択できる
  • STEPラベルの文字や形を変更できる
  • 親ブロックを簡単に選択できる

ステップブロックを使っている動画はこちらです。

スタイルは3種類から選ぶことができます。

「STEP」という文字を変えることができたり、形を四角と円から選択できます。

STEPごとに色を変えることも可能です。

さとしん

僕のブログも手順を書いたりする記事が多いのでかなり重宝しています…!

それから、地味に嬉しい機能が「親ブロックを選択」というボタンがあることです。

ブロックエディターでは、ブロックの中にブロックを入れ子にして使うことが良くあります。

そのときに、外側のブロック(親ブロック)が選択しにくいことがあります。

そんな時に、この「親ブロックを選択」ボタンを押すことで簡単に1番外側のブロックを選択することができて編集が捗ります。

詳しくはSWELL公式サイトのマニュアルで解説されています。

関連記事ブロック

関連記事ブロックは、ブログカードと呼ばれたりもします。

記事内で、関連する記事のリンクをカード形式で表示することができます。

関連記事ブロックでできることは以下のとおりです。

  • 内部、外部リンクどちらもブログカードにできる
  • 記事タイトルで検索してブログカードにできる
  • スタイルは管理画面から事前に設定可能

関連記事ブロックを使っている動画はこちらです。

自分のブログ内への内部リンク、他のサイトへの外部リンクどちらも関連記事ブロックを使うことができます。

それから、SWELLの関連記事ブロックのかなり便利な機能を1つ紹介します。

通常、記事のURLやIDを入れたりすることでブログカードになることが多いです。

さとしん

毎回URLをコピペしたり、記事IDを調べるのは面倒ですよね…!

なんと、SWELLの関連記事ブロックでは、記事タイトルを入力するだけでブログカードを作ることができます。

記事タイトルの一部を入力すると、候補の記事が表示されるので、その中から対象の記事を選択するだけです。

さとしん

これがものすごく便利…!

記事内に内部リンクを貼る機会はとても多いはずなので、合計するとかなりの作業時間短縮になります。

ブログカードのスタイルも管理画面から設定可能です。

SWELLの関連記事ブロックの設定

詳しくはSWELL公式サイトのマニュアルで解説されています。

投稿リストブロック

投稿リストブロックは、様々な条件で投稿の一覧を表示することができるブロックです。

主に、トップページやカテゴリーページなどを作りこむときに大活躍します。

投稿リストブロックでできることは以下のとおりです。

  • スタイルは4種類から選択できる
  • 表示順を4パターンから設定できる
  • 表示条件を自由に設定できる

投稿リストブロックを使っている動画はこちらです。

表示形式は5種類から選ぶことができます。

記事の表示順は以下の3種類から選択できます。

  1. 新着順
  2. 更新順
  3. 人気順
  4. ランダム

また、表示条件を細かく設定することもできます。

  1. カテゴリー別
  2. タグ別
  3. 任意の記事
さとしん

もちろん、表示する記事数も自由に設定できます…!

これだけ指定できればユーザーのやりたいことはほぼ叶うと言えると思います。

他のテーマだと、ショートコードと呼ばれるもので記事一覧を作る必要があることもありますが、SWELLはこの投稿リストブロックで簡単に任意の記事一覧を作ることができます。

詳しくはSWELL公式サイトのマニュアルで解説されています。

フルワイドブロック

フルワイドブロックは、画面の横幅全体を使って背景画像や背景色を設定できるブロックです。

特に、トップページを作りこむときに活躍します。

フルワイドブロックでできることは以下のとおりです。

  • 背景に画像や塗りつぶしを適用できる
  • ブロック上下の境界線の形状を変更できる

フルワイドブロックを使っている動画はこちらです。

背景色を設定したり、フルワイドブロック上下の境界線の形状を4種類から自由に変更することができます。

背景画像も設定可能です。

背景色や背景画像を設定した上で、自由に他のブロックを組み合わせることができます。

さとしん

一気にサイト全体の雰囲気がリッチになります…!

詳しくはSWELL公式サイトのマニュアルで解説されています。

リッチカラムブロック

リッチカラムブロックは、WordPress標準のカラムブロックの上位互換のような機能を持ったブロックです。

リッチカラムブロックでできることは以下のとおりです。

  • デバイスごとの表示列数を柔軟に設定できる
  • カラムの横幅をデバイスごとに設定できる
  • 余白設定も柔軟に調整できる
  • 公式サイトと同じレイアウトがCSS無しで作れる!
さとしん

カラムブロックではできなかった設定もCSS不要で簡単に作れる…!

リッチカラムブロックを使っている動画はこちらです。

リッチカラムブロックでは、PC、タブレット、スマホ、それぞれの表示列数を個別に設定することができます。

通常のカラムブロックではPCの表示列数しか設定できず、タブレットとスマホ表示は1列で固定になります。

また、PC、タブレット、スマホ、それぞれで表示する横幅をカラムごとに個別に設定することもできます。

通常のカラムブロックでは、PCサイズの横幅しか設定できません。タブレットとスマホ表示では均一の横幅になります。

そして、リッチカラムブロックはカラムの余白設定も柔軟に設定が可能です。

以下の2か所の余白を自由に調整することができます。

  • カラムとカラムの間の余白
  • カラム内の上下左右の余白
さとしん

設定できる項目がとにかく豊富で柔軟な使い方ができます…!

リッチカラムブロックについては以下の記事で画像も使いながらより細かい使い方を紹介しています。

制限エリアブロック

制限エリアブロックは、特定の期間だけブロックを表示したり、ログインしているユーザーだけにブロックが表示されるような設定ができるブロックです。

制限エリアブロックでできることは以下のとおりです。

  • ブロックを表示する期間の指定
  • ユーザーごとにブロックの表示/非表示の切り替え

例えば、以下のように指定した期間のみブロックを表示させることができます。

2021/1/1の06:00から2021/1/4の23:59の間だけブロックを表示する。

期間限定セールなどと絡めて、セール期間だけブロックを表示させることができます。

手動で期間限定セールの情報を追記したものの、セール期間が終了した後も削除し忘れてずっと古いセール情報が表示されている。というミスを防ぐことができます。

以下が実際の設定画面です。

制限エリアブロックの使い方-8

それから、ブロックを表示するユーザーを制限することができます。 大きくは以下の2つの制限を指定できます。

  1. 非ログインユーザー
  2. ログインユーザー

更に、WordPressのユーザー権限でも細かく制限をかけることができます。

  • 管理者
  • 編集者
  • 投稿者
  • 寄稿者
  • 購読者

以下が実際の設定画面です。

制限エリアブロックの使い方-6
さとしん

個人ブログだけでなく、コーポレートサイトなどでも活躍するブロックです…!

制限エリアブロックについては以下の記事で実際の使用例や、詳しい使い方を紹介しています。

SWELLではWordPress標準ブロックの機能も強化される!

SWELLのブロックエディターは、WordPress本体の標準ブロック(コアブロック)の機能も拡張されて使い勝手が向上しています。

以下の6つのブロックについて拡張された機能をご紹介します。

  1. 段落ブロック
  2. グループブロック
  3. 画像ブロック
  4. リストブロック
  5. テーブルブロック
  6. カラムブロック

段落ブロック

まず、記事を書く上で最も使用する段落ブロックです。

SWELLでは、段落ブロックに入力した文字にクリック操作だけで装飾をすることができます。

通常の段落ブロックにはこのような装飾はありません。

SWELLとWordPress標準の段落ブロックの設定項目を比較すると以下のような違いがあります。

SWELLの段落ブロックの装飾
さとしん

SWELLの段落ブロックの充実ぶりが分かりますね…!

グループブロック

グループブロックは複数のブロックをグループ化してくれるブロックです。

SWELLのグループブロックはとても便利です。

先ほどの段落ブロックで設定できる装飾がグループブロックにも適用できます。

また、グループブロックをうまく使うと以下動画の様に、他のブロックを枠で囲んだりすることができます。

さとしん

おすすめの使い方です…!

画像ブロック

画像ブロックは記事の中に画像を埋め込むことができるブロックです。

通常、画像ブロックのスタイルは2種類しかありませんが、SWELLの場合は7種類から選ぶことができます。

SWELLの画像ブロックのスタイル
さとしん

僕は「影あり」が好きで頻繁に使っています…!

さらに、2021年2月にリリースされたVer2.3.3で追加された2つの装飾もお気に入りです。

  1. デスクトップ風
  2. ブラウザ風

例えば以下のような装飾が出来ます。PCの画面キャプチャなどを表示する時にもピッタリの装飾です。

ブラウザ風装飾

WebNote+
WebNote+

デスクトップ風装飾

WebNote+

リストブロック

リストブロックは箇条書きが簡単に作れるブロックです。

リストブロックもサイドバーの「スタイル」でデザインを簡単に切り替えられます。

SWELLのリストブロックでは装飾スタイルが以下の6種類追加されます。

SWELLのリストブロック

WordPress標準のリストブロックでは、シンプルなドットのスタイル1種類しかありません。

また、SWELLのリストブロック独自の機能として以下のような装飾もできます。

  • リストに下線を付ける
  • リストを横並びにする
SWELLのリストブロック-2
さとしん

どの設定もクリック操作だけでできてしまうのが本当に便利です…!

テーブルブロック

テーブルブロックは表を作ることができるブロックです。

SWELLのテーブルブロックは4つの装飾スタイルを選ぶことができます。

SWELLの表ブロック

また、通常のテーブルブロックではできない機能が多数追加されています。

この記事では、僕のお気に入りの機能を一部だけ紹介します。

  • 横長の表で横スクロールができる
  • 表の1行目と1列目を固定表示できる

例えば、以下の表は横スクロールできて、左の1列が固定される設定にしています。

さとしん

とっても便利な機能です…!

スクロールできます
No.項目1項目2項目3項目4項目5項目6
1テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
2テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
表の1番左の列を固定

他の追加機能を詳しく知りたい方は公式サイトの「テーブルブロックで使えるSWELLのオリジナル機能」のマニュアルを見てみてください。

当サイトでもテーブルブロックの使い方を紹介しています。

ブロックツールバーもSWELL独自の機能が追加されてとても便利!

SWELLでは、ブロックツールバーで設定できる項目も拡張されています。

ブロックツールバーとは

任意のブロックを選択している時に、ブロック上部に表示されるツールバーのこと。

SWELLのブロックツールバー

WordPress標準の状態とSWELLのブロックツールバーを比較すると、項目の多さが分かるかと思います。

デフォルト

デフォルトのブロックツールバー

SWELL

SWELLのブロックツールバー

サイドバーを使わなくても、ブロックツールバーから様々な設定ができるようになっています。

【SWELL】ブロックツールバー
  • テキストの装飾
  • ショートコードの呼び出し
  • PC、スマホの表示設定
  • ブロック下の余白設定

それぞれ簡単に概要を紹介していきます。

詳しく知りたい方は、使い方なども含めて別記事にまとめたので、見てみてください。

テキストの装飾

まずはテキストの装飾です。ブロックの中の任意の文字だけに装飾をすることができます。

WordPress標準の機能では、ブロック全体への装飾しかできません。

ツールバーのSWELL装飾という項目の中に、たくさんのテキスト装飾が用意されています。

SWELLのテキスト装飾

フォントサイズを変えたり、文字に背景色やマーカー装飾を設定することができます。

さとしん

マーカーの種類も4種類から選べます…!

さらに、2021年5月にリリースされたVer 2.3.8で「カスタム書式」という機能が追加されました。

自分好みのテキスト装飾のCSSを事前に設定画面で記述しておくことで、記事内で簡単に使用できる機能です。

以下の様なイメージです。

SWELLのカスタム書式機能

オレンジのマーカーはSWELL標準のマーカー線、赤の装飾はカスタム書式機能で僕が追加した装飾です。

さとしん

これ、ホントに便利な機能です…!

カスタム書式機能については、以下の記事で詳しく解説したので見てみてください。CSSのサンプルも紹介しています。

ブロック下の余白設定

文章を書いていて、特定の箇所だけ行間を広げたり、狭くしたりしたいことがあります。

そんな時に、SWELLではブロックの下の余白量を5段階から簡単に選ぶことができます。

SWELLのブロック下の余白量設定

他テーマだと、行間を広げたい場合は「スペーサーブロック」を使って広げることが多いです。

わざわざスペーサーブロックを呼び出さずに、クリック操作だけで簡単に余白量を選択できるのはとても便利です。

さとしん

この機能はほんとに時短になり助かっています…!

PC、スマホの表示設定

PCだといい感じのレイアウトで表示できるけど、スマホ表示だと見にくいと思うことが頻繁にあります。

SWELLでは、PCだけで表示させたり、スマホだけで表示させるブロックを設定することができます。

SWELLのデバイスコントロール-3

デバイスコントロールという機能です。

僕が良く使うのは以下のように、PCでは横並び、スマホではタブで切り替えて表示という見せ方です。

PCとスマホで表示を分けた例

ショートコードの呼び出し

便利なショートコードも簡単に呼び出して記事内に挿入することができます。

SWELLのショートコード

ブロックツールバーから呼び出せるショートコードは以下のとおりです。

  1. 記事内広告
  2. スマホだけ改行
  3. PCだけ改行
  4. アイコン用ショートコード
  5. 評価用スター
  6. ログイン時限定コンテンツ

詳しい使い方や用途は「【便利!】スマホだけ非表示や改行も簡単!SWELLのブロックツールバーの使い方」で紹介しています。

記事内広告では、アドセンスなどの広告を記事の中の任意の場所に簡単に設置することができます。

スマホだけ改行では、サイト閲覧者がスマホから見ている場合のみ、文章を改行させることができます。PCだけ改行はその逆でPCのみで改行することができます。

このように、見やすい記事を作っていくうえで便利な機能がショートコードで簡単に設定できます。

さとしん

このような機能もうまく使えると記事執筆のスピードが速くなりますね…!

SWELLのブロックエディターの快適さはぜひ一度体験して欲しい

SWELLのブロックエディターの機能について紹介しました。

SNSなどで「SWELLは記事が書きやすい!」、「記事を書くのが楽しくなった!」というコメントを見かけます。

ただ、SWELLを使っていない方には伝わりにくいかなと感じたので、今回この記事を書いてみました。

SWELLのブロックエディターはブログを書くための機能が充実していますし、簡単におしゃれな装飾スタイルを設定することもできます。

さとしん

一度この快適さを味わうと他のテーマを使う気持ちになりません…!笑

SWELLの導入を検討中の方には、心からおすすめしたいWordPressテーマです。

ぜひ、この快適さを味わってほしいです。

既にSWELLを使っている方は、SWELLを使いこなして楽しくブログ運営をしていきましょう。

最後まで読んでいただきありがとうございました。


SWELL公式サイトはこちらからどうぞ…!

SWELL

SWELLのレビュー記事はこちら↓↓

SWELLの基本的な設定や使い方はこちら↓↓

SWELLでトップページをカスタマイズする方法↓↓

SWELLで作られたサイト集↓↓

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

よかったらシェアしてね!
目次
閉じる