MENU
チロ猫
こんにちは、チロ猫です。

ネットショップと趣味のブログをいくつか運営しています。
◆ 神テーマ「SWELL」のすべて!◆ 特徴 ~ エディタ ~ 移行手順 ~ デメリット ~ 感想 ~ 比較まで!記事へ GO!

【SWELLブロックエディタの全て!】特徴~詳しい使い方まで紹介

「SWELLのブロックエディタ」は使いやすいと大評判!でも、

何がそんなにスゴイの?
どこが違うの?

「なにがスゴイのか?」「どう使いやすいのか?」違いをはっきり知りたい!という方のために、

「ブロックエディタの特徴」~「各ブロックの使い方」まで、
SWELLブロックエディタのすべてをご紹介します!

すべてのメニューや設定が見れるよ!

目次

SWELLブロックエディタの特徴

swell-theme.com

この記事ではSWELLの「ブロックエディタ」に特化して解説します。

どう使いやすいの?
何が違うの?

ざっとリストアップしてみたよ

  1. 共通ブロックにも手が入っている
  2. 独自ブロックが豊富「有料級レベル」
  3. 独自ブロックは「操作性が高い」
  4. 全ブロックに「スペース調整」や「デバイス制限」
  5. 動作は軽快、エラーが起きない

一つ一つ解説します。

1. 共通ブロックにも手が入っている

ブロックエディタの使いやすさは、「独自ブロック」だけじゃない!

WordPressにもともと備えられている共通ブロックにどれくらい手が入っているかで、使い勝手が大きく変わります。

  • 段落
  • 画像
  • リスト
  • カラム、など

実際「共通ブロック」こそ、一番多く使用され、使い勝手を大きく左右するブロックです。

SWELLでは「共通ブロック」に多くの設定が追加され、
大変使いやすくなっています。

下図では、共通ブロックにさまざまなな設定が追加されているのが分かります。

装飾が「ワンクリック」でキレイに出来上がるので、装飾の手間が大幅に省けます。

\ 参照リンク/

SWELL記事:段落の「ボックス装飾」一覧

SWELL記事:リストで使えるデザイン装飾一覧

SWELL記事:カラムブロックで使えるSWELLのオリジナル機能

2. 独自ブロックが豊富、有料級レベル

以下がSWELLの独自ブロックです。2021年10月現在、「18種類」とかなり豊富!

執筆に必要なブロックはもちろん、豪華な装飾まで、クリックだけで行うことができます。コードを書く必要は全くありません。

あらゆるコンテンツを「数クリック」で簡単に作成できます!

ABテスト」「関連記事(外部)」「ステップ」「フルワイド」などの高機能ブロックは、他のテーマでは、オプションで購入するか、そもそも付いていませんが、SWELLでは「標準装備」です。

2021年9月に「リッチカラム」が追加され、段組み、表組みがさらに自由になりました。

\ 参照リンク/

SWELL記事:ブロックエディターで使えるSWELLの専用機能まとめ

3. 独自ブロックは利便性に配慮

SWELLの独自ブロックは、使いやすいように様々な配慮がなされています

SWELL独自の工夫」の例を挙げてみるね!

例1、「キャプションボックス」ブロック

見本

デフォルト

見本

見本

枠上

見本

枠内

様々な形のボックスを、単一ブロックで作れる

通常他のテーマでは「ボックスの形」ごとに「別のブロック」になっています。

しかしSWELLでは、一つのブロックで「様々な形のボックス」を作ることができます。「ボタン一つ」でブロックの形をかえられます。

「やっぱり他の形に変えたい!」と思った時も、わざわざ違うブロックを作成して、中身を入れ替える必要はありません。

このように、SWELLのブロックエディタは多機能でも「すっきりと整頓されて」使いやすくなっています。

\ 参照リンク/

SWELL記事:SWELLの「キャプション付きブロック」の使い方

例2、「関連記事」ブロック

こちらが関連記事ブロック

通常、関連記事(ブログカード)で「リンク」を指定するには「記事ID」や「アドレス」を入力しなければなりません。

SWELLでは、「キーワードを入力するだけ」で記事の候補が表示されるので、クリックして選ぶだけです。

わざわざ他のウィンドウを開いて、「記事ID」や「サイトアドレス」を調べたりする必要はありません。

\ 参照リンク/

SWELL記事:関連記事ブロックで簡単にブログカード作成!

4. 全ブロックに「スペースの調整」と「デバイス制限」

SWELLでは「共通ブロック」「独自ブロック」を問わず、すべてのブロックに「デバイス制限」と「ブロック下の余白量がついています。

これが案外便利なんだわ!

  • デバイス制限
    ブロックごとに「PCのみ表示」「スマホのみ表示」を設定できます(通常は両方で表示)。
    これにより、デバイスごとに細かい設定が可能になります。
     
  • ブロック下の余白量
    ブロック間の余白量を調節でき、装飾の幅が広がります。

スマホ専用のブロックも作れる!

ブロック間のスペースを自由に変えることで、装飾に「妥協」しなくて済みます

PCとスマホ専用のブロックを作れるので、デバイス別に表示を最適化することができます。

\ 参照リンク/

SWELL記事:各ブロックで使用できるレイアウト設定・上下の余白調節

5. 動作が軽快、エラーがない

SWELLはとにかく「スムーズでサクサク動く」印象です

プログラミングのことは詳しくない素人が見ても「きれいなコードで書かれているのだろうな」というほど軽快ですし、エラーが起こることがありません

ほかのテーマを使っていた時は、「表示が変?」と思うことが何度かありましたが、SWELLではそのようなことが全くありません。

SWELLは当分の間、No.1 でい続けると思うよ!

最新!「リッチカラム」ブロックの追加でさらに神に!

SWELLバージョン2.5.1(2021年9月)へのアップグレードで、さらにブロックエディタが神に!

新たに「リッチカラム」ブロックが追加されました!

さらに神に近づいたよ

リッチブロックのおかげで、段組みや表組にさらに自由度が増しました。また、PC、タブレット、スマホの表示を個別に変えることができます。

2週間位でどんどんアップデートされてるよ!

\ 新機能をチェック/

SWELLアップデート情報:swell-theme.com/category/update/

SWELLブロックエディタ、各ブロックの詳細をご紹介

SWELLブロックエディタ、ブロックの詳細をご紹介します。

SWELLの必須知識と、各ブロックを解説します。

段落、見出し、リスト、グループ(共通ブロック)

段落、見出し、リスト、グループ」ブロックは、執筆の際に一番多く使われるブロックです。

WordPressに元々ある「共通ブロック」で、SWELLの「独自」ブロック」ではありませんが、SWELL独自の設定が多く追加されています

各ブロックの「SWELL独自の工夫」は、以下の通り

  • 段落
    通常の段落に「枠・アイコン・付箋・小ふきだし」などの装飾を追加できます。ボックスブロックを使わなくても、ボックスのような装飾を簡単に追加できます。
     
  • 見出し
    事前に設定済みの「デフォルト」見出しと、自由に装飾できる「セクション用」見出しを選べます。特定のページのみ、違った見出しを作成できます。
     
  • リスト
    リストの先頭項目に「〇・×・色付数字」を付けたり、リストに「下線」や「横並び」を選択できます。
     
  • グループ
    複数のブロックをひとまとめにして、「枠・アイコン・ブラウザ風装飾」などの装飾を追加できます。

\ 参照リンク/

SWELL記事:段落の「ボックス装飾」一覧

SWELL記事:リストで使えるデザイン装飾一覧

テーブル、画像、カラム(共通ブロック)

テーブル・画像・カラム」ブロックもまた、良く使われる共通ブロックで、SWELL独自の設定が多く追加されています

こんな機能が追加されています

  • テーブル
    表を「横にスクロール」したり、「ヘッダーを固定」できるため、大きな表を見やすくできます。また、「最低維持幅」を設定できるため、表幅を最適化できます。
     
  • 画像
    画像に様々な「枠の装飾」の装飾を追加できます。クリックして画像を拡大するかどうかを指定できます。
     
  • カラム
    スマホでの列数(1または2)」を指定したり、「」を設定できます。特に、スマホでの列数指定(2列)は大変便利です。このSWELL独自の機能を利用することにより、スマホでコンテンツを横並びにできます

\ 参照リンク/

SWELL記事:カラムブロックで使えるSWELLのオリジナル機能

SWELL記事:「テーブルブロック」で使えるSWELLのオリジナル機能

ボタン、ボックス、ふきだし(SWELL独自ブロック)

SWELLブロックエディタの「ボタン、ボックス、ふきだし」ブロックは、次のような特徴があります。

SWELLの独自ブロックは大変便利!

  • ボタン
    「色や形」
    を変えられたり、「キラリと光る」ボタンを作れます。また、「アフィリエイトタグ」をそのまま入力できるので、コード改変せずにすみます。
     
  • ボックス
    様々な形のボックス」を作成できます。ボタン1つで簡単に変更可能。を変更したり、アイコンを設定できます。
     
  • ふきだし
    無制限にふきだしのキャラを作成できます。事前設定しなくても、その場で画像を選ぶだけでキャラを作成可能。色や形を変更可能。

\ 参照リンク/

SWELL記事:SWELL専用ボタンブロックの使い方

SWELL記事:SWELLの「キャプション付きブロック」の使い方

SWELL記事:管理も簡単!SWELLのふきだし機能の使い方

ステップ、タブ、アコーディオン(SWELL独自ブロック)

ステップ、タブ、アコーディオン」ブロックは、少し高度なブロックで、他テーマでは付属していないこともあります。もちろんSWELLは標準装備。

  • ステップ
    数字付きの手順を作成でき、3種類のデザインを選択可能。「ステップ名」も自由に設定できる。
     
  • タブ
    切り替え用のタブを無制限に設定でき、タブの幅も自由に指定可能。
     
  • アコーディオン
    4種類のデザインのアコーディオンボックスを設定可能。

\ 参照リンク/

SWELL記事:ステップブロックの使い方

SWELL記事:アコーディオンブロックの使い方

関連記事、投稿リスト(SWELL独自ブロック)

SWELLの「関連記事・投稿リスト」は、様々な工夫により大変使いやすくなっています。特に、投稿リストは大変設定豊富。

  • 関連記事
    内部および外部のブログカードを作成(
    外部カードは作れない他テーマも多いが、SWELLは標準装備)。IDやアドレスを調べなくても、キーワードから入力可能で超便利。
     
  • 投稿リスト
    カテゴリー」や「ID」を指定して記事リストを作成できます。カード型リスト型テキスト型などを選択でき、数も指定可能。スマホPCの表示も変えられるので、非常にフレキシブル。

\ 参照リンク/

SWELL記事:関連記事ブロックで簡単にブログカード作成!

SWELL記事:投稿リストブロックの使い方

広告タグ、ブログパーツ、ABテスト(SWELL独自ブロック)

  • 広告タグ
    事前に設定した広告
    を、エディタ上で選択できます。
     
  • ブログパーツ
    事前に設定したブログパーツを、エディタ上で選択できます。
     
  • ABテスト
    ABテストの選択肢を簡単に作成できます。すべてのブロックを使用可能。

「広告タグ・ブログパーツ」は、事前に設定しておく必要があります。設定方法は関連記事をご覧ください。

\ 参照リンク/

SWELL記事:広告タグ管理機能・広告タグブロックの使い方

SWELL記事:登録したコンテンツを自由に呼び出せる「ブログパーツ」機能

SWELL記事:ABテストブロック(動画あり)

バナーリンク、フルワイド(SWELL独自ブロック)

「バナーリンク」や「フルワイド」ブロックを使用すると、迫力のある動的な画像や見出しを設定できます。

  • バナーリンク
    アニメーション効果やブラー効果付きの画像リンクを作成
     
  • フルワイド
    幅いっぱいに画像や見出しを作成。ダイナミックなアニメーション効果付き。

\ 参照リンク/

SWELL記事:画像編集の必要なし!便利なカスタムバナー機能の使い方

SWELL記事フルワイドブロックの使い方

リッチカラム・制限エリア(SWELL独自ブロック)

  • リッチカラム
    通常の「カラム」をさらに高度にしたブロックです。カラムの数、余白、幅を自由に設定できます。またPC、タブレット、スマホでのカラム表示数を自由に変えられるため、よりデバイスに適した表現が可能です。
     
  • 制限エリア
    特定のユーザーにだけ表示する制限エリアを作成できます。

神レベルのSWELLのブロックエディタ、いかがでしたか?

当サイト、イチオシのSWELL。
自信をもってオススメできます。

\ 関連リンク/

SWELLホームページ:swell-theme.com

SWELLをダウンロード:swell-theme.com/download

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