SWELLのブロックエディターは使い心地が最高!充実の機能を動画で紹介!

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でしか使えないオリジナルのブロックが多数実装されています。

さとしん

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

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

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

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

全てのブロックの解説は、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標準ブロックも機能拡張でさらに使いやすく

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のブロックツールバー

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レビュー!進化が止まらない高機能でオシャレなWordPressテーマ!

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

>>WordPressテーマ『SWELL』の使い方や設定で困ったときの情報まとめ!

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

>>【SWELL】トップページをおしゃれなサイト型にカスタマイズする!

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

>>WordPressテーマ『SWELL』を使った素敵なサイト、ブログを集めました!!

SWELLのブロックエディターは使い心地が最高!充実の機能を動画で紹介!

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

よかったらシェアしてね!

この記事を書いた人

WordPressとSWELLが好きな20代のブロガー。
ブロックエディターに出会ってWordPressが楽しくなりました。
WordPressのこと、SWELLのこと、ブロックエディターのことを熱く語るブログです。

目次
閉じる