SWELLのブロックエディターに感動!オリジナル機能を一挙紹介

SWELLのブロックエディターがすごい
URLをコピーする
URLをコピーしました!
悩んでいる男性

SWELLのブロックエディターの機能について、どんなことができるのか具体的に知りたい!

今回はこんな疑問にお答えします。

この記事の内容
  • SWELL専用のカスタムブロックで出来ること
  • SWELL独自のブロック装飾スタイル
  • ツールバーの拡張機能
この記事を書いた人
しんでぃ
  • 本職は最高マーケティング責任者
  • SWELLレビュー記事は公式サイト掲載
  • ブログ開設5ヶ月目で5桁収益
  • 現在8ヶ月で最高3.6万

Twitter : (@shinshindy33)

この記事では、SWELLのブロックエディターで出来る装飾やSWELLオリジナル機能など、SWELLで出来ることを余すことなく紹介しています。

購入前にどんなことができるのか知りたい方や、SWELLユーザーでも使ったことのない機能がある方に向けた記事です。

それでは前置きはさておき、早速見ていきましょう。

  • ブロックエディターは他テーマを圧倒
  • 圧倒的な使いやすさでブログが楽しくなる
目次

SWELL専用のブロックエディターを全て紹介

SWELLには独自の専用ブロックがあります。

これらのブロックは、SWELLのみで使用できるオリジナルです。

どれもめちゃくちゃ便利な上に、コンテンツの読みやすさを格段にアップさせる機能ばかりです。

Shindy

ぜひマスターして使いこなしてみてくださいね

順番に紹介していきます。

広告タグブロック

広告タグブロック

広告タグ管理機能で登録している広告を呼び出すブロックです。

下記のような広告をすぐに呼び出せます。

基本的な使い方と効果的な活用方法を、以下の記事で詳しく解説しています。

ふきだしブロック

ふきだしブロック
Shindy

吹き出しも呼び出すだけ。パターンを登録しておけばアッという間です。

文字を書いてからでも吹き出しを呼び出せるぞ

事前に登録していた吹き出しを呼び出したり、記事内でも、吹き出しの色や方向、外線やアイコン画像など細かく調整もできます。

ブログパーツブロック

ブログパーツブロック

ブログパーツと呼ばれる、よく使いたいコンテンツやデザイン、パーツなどを事前に登録しておけば、このブログパーツブロックからすぐ呼び出せます。

例えば、ブログパーツで作成しておいた以下のバナーもすぐ呼び出せます。

記事上部にある僕のプロフィールもブログパーツから呼び出しています。

投稿リストブロック

投稿リストブロック

自分の好きな設定で記事を呼び出せます。

以下は「SWELLのレビュー記事で、人気順に3つ、カード型で表示」という設定で表示しています。

詳しい使い方は以下の記事で解説しています。(該当部分にピンポイントで飛びます)

関連記事ブロック

関連記事ブロック

以下のようなブログカードを簡単に作成できます。

さらには、ブログカードだけでなく以下のようなアンカーテキストスタイルでも呼び出せます。

このテキスト型の何が便利かというと、記事内のリンクでアンカーテキストを使っている場合、記事のタイトルを変えると、その記事のリンクを貼ったページを修正して回らなければいけなません。

しかし、この関連記事のテキストスタイルを使えば、各リンクのタイトルが自動で修正されるので、タイトルを修正して回らなくてよくなるのです。

記事のタイトルか投稿IDを入力するだけで呼び出せます。

ブログカードの呼び出し

ABテストブロック

ABテストブロック

ABテストブロックは、AブロックとBブロックがそれぞれランダムで表示されるブロックです。

どちらのブロックが効果的かABテストをする際に使えます。

SWELLボタンと併用すると、クリック率の比較が出来て便利です。

アコーディオンブロック

アコーディオンブロック

アコーディオンブロックは、開閉式のブロックです。

長くなりがちな部分や、最初は隠しておきたい部分に使用するのが便利です。

バナーリンクブロック

バナーリンクブロック

画像とテキストを組み合わせたリンクです。

うまく使いこなすと、オシャレさがぐっと上がります。

SWELLボタンブロック

swellボタンブロック

SWELL独自のボタンブロックです。クリックの計測もできます。

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

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

キャプションがついた囲いブロックです。

情報をまとめる時や注目させたい時に使えます。僕も多用しています。

キャプション

呼び出すだけです。

キャプション

キャプションのスタイルもたくさん。

キャプション

アイコンも付けられます。

キャプション

色も変えられます

説明リストブロック

説明リストブロック

見出しにせずとも、説明したい項目を分かりやすく整理できます。

こちらも複数デザインがあります。

SWELLとは

WordPressテーマです。

SWELLのブロックエディター

独自にカスタマイズされています。

SWELLとは

WordPressテーマです。

SWELLのブロックエディター

独自にカスタマイズされています。

SWELLとは

WordPressテーマです。

SWELLのブロックエディター

独自にカスタマイズされています。

FAQブロック

FAQブロック

よくある質問で、Q&A形式で答える時に使用できるブロックです。

複数パターンの組み合わせでデザインやカラーを変更できます。

質問1

回答1

質問2

回答2

質問3

回答3

フルワイドブロック

フルワイドブロック

フルワイドブロックは、画面いっぱいにコンテンツを表示できます。

サイト型のトップページにしたい場合や、コーポレートサイトでページを作りこむ際に大活躍します。

当サイトのトップページもフルワイドブロックを活用しています。

背景画像を固定して、画像に一工夫することもあっという間に出来ます。

背景画像を固定して、画像に一工夫することもあっという間に出来ます。

詳しい使い方は以下の記事で解説しています。(該当部分にピンポイントで飛びます)

ステップブロック

ステップブロック

ステップブロックは、作業の順番や時系列など、流れを説明する時に便利なブロックです。

Shindy

使い方の手順を説明する時によく使いますね

STEP
ステップ1

デザインパターンは3つあります。

STEP
ステップ2

デザインのカスタマイズもできます。

STEP
ステップ1

ステップ1の内容

STEP
ステップ2

ステップ2の内容

12:00
ステップ1

時系列で使う時にも役立ちます。

14:00
ステップ2

ステップ2の内容

タブブロック

タブブロック

タブブロックでは、タブを切り替えることのできるブロックです。

ビフォアー・アフターや、新着記事一覧・人気記事一覧など、様々なシーンで活用できるブロックです。

投稿リストブロックとの合わせ技!

画像でもタブ切り替え可能

>>SWELL公式サイトはこちら

SWELL独自のブロック装飾スタイル

SWELLでは、記事編集画面右側のメニューにある、WordPress標準のブロックのスタイルも独自でカスタマイズしてあります。

これまでCSSを駆使して使用していたような装飾が、ワンクリックで出来ます。

オシャレなデザインも豊富に揃っていますよ。

ボックス装飾

swell専用ブロックスタイル一覧
SWELL専用のブロックスタイル一覧

テキストを入力後、サイドバーにあるスタイルを選んでいくだけで、ボックス装飾が施せます。

囲みや装飾もクリック一つ

こんなことも

吹き出しもできます。

グッドやバッドポイントだって簡単に

  • アイコン付きの囲みも

ボックス装飾の上にボックス装飾もできます。

ブラウザ風

遊び心のあるデザインもあります

デスクトップ風でスクロールも可能です。

しんでぃブログのTopページ

「ブラウザ風」と「デスクトップ風」の画像をスクロールする方法

ブラウザ風」と「デスクトップ風」のスタイルで画像をスクロールさせるためには、まず画像をグループ化してください。

その後、スタイルで「ブラウザ風」と「デスクトップ風」を選ぶと、高さに合わせてスクロールになります。

STEP
画像を選択した状態で、ブロックをグループ化する
STEP
グループを選択した状態で、スタイルを選ぶ
STEP
スクロールバーが追加される

リストブロック

リストのデザインも複数あります。

  • リスト1
  • リスト2
  • リスト3
  • リスト1
  • リスト2
  • リスト3
  • リスト1
  • リスト2
  • リスト3
  1. リスト1
    • リスト1-1
  2. リスト2
    • リスト2-1

表ブロック

表ブロックは4種類あります。

ラベル1ラベル2
セル1セル4
セル2セル5
セル3セル6
デフォルト
ラベル1ラベル2
セル1セル4
セル2セル5
セル3セル6
ストライプ
ラベル1ラベル2
セル1セル4
セル2セル5
セル3セル6
シンプル
ラベル1ラベル2
セル1セル4
セル2セル5
セル3セル6
二重線

さらにデザインや列の調整、表が大きい場合のスクロール機能、PCとスマホでの見え方など、細かな調整もできます。

テーブル設定

以下の記事のカスタマイズを行えば、テーブルの色も変更することが可能です。

ブロックツールバーの拡張で執筆も最速

SWELLではもちろんブロックエディタのツールバーも拡張されています。

テキスト装飾をさらに強化

文字色マーカー線など、よく使う機能が簡単に使えるように工夫されています。

テキストのマーカー機能
ツールバーでマーカーを入れるのも簡単
テキストのフォントサイズ変更
フォントサイズの変更も簡単
Shindy

マーカーはよく使うので、すぐ呼び出せて便利です

ショートコードの簡単呼び出し機能

特にすごいなと思ったのがこの機能。

ショートコードを簡単に呼び出せる

僕がよく使うのは「アイコン用ショートーコード」と「評価用スター」です。

それぞれのツールバーをクリックすると、[icon class="アイコンクラス名"]・[review_stars 4.5/5]とショートコードが呼び出せます。

このショートコードを使用するとこんな感じになります。

  • アイコンが呼び出せるよ
  • 評価を星で示せるよ

ブロック下の余白量調節

ブロック下の余白調整は、僕の中でブロックエディタで一番SWELLにお世話になっていると言っても過言ではありません。

ブロック下の余白の調整

これまでは、ブロック下に余白を設けたい時は、わざわざスペーサーを呼び出して、高さを調整して挿入していましたが、これがなかなか面倒クサイ。

しかしSWELLではサクッと余白を挿入できるので、重宝しています。

その他にもあまり使いませんが、デバイス(PC・スマホ)によって表示・非表示の設定もツールバーからサクッと出来ます。

テンプレートに使えるSWELL専用ブロックパターン

よく使うブロックのパターンがある場合、毎回同じテンプレートを作成するのは面倒ですよね。

SWELLには、あらかじめ作っておいたブロックのデザイン・レイアウトをかんたんに呼び出す「SWELL専用ブロックパターン」という機能があります。

テンプレートをワンクリックで呼び出し中身を自由に編集できるので、記事作成が効率化して執筆速度を上げられます。

詳しくは以下の記事で紹介しています。

まとめ:SWELLなら記事の編集が素早くおしゃれに!

以上、SWELLのブロックエディターの機能を全て紹介しました。

ご自身が使ってみたい機能はあったでしょうか。

SWELLのブロックエディターは、かなり細かいところまで考えて作りこまれています。

読みやすいデザインにするだけでなく、執筆速度も大幅に上がるので、効率的にブログを書きたい方にはぴったりです。

Shindy

ブログの執筆が楽しくなりますよ

今回は以上です。

\ブロックエディターは他テーマを圧倒/

>>SWELL公式サイトはこちら

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる