SWELLブロックを実際に使ってみた【画像付リアルな使用感解説】

SWELLブロック使ってみた

どうもこんにちは!すけでぃー(@suked_blog)です!

あなた

SWELLブロックがめちゃくちゃ使いやすいって聞いたんだけど、実際どんな感じなの?
リアルな使用感が知りたい!

そんなお悩みにお答えしていきます!

本記事はこんな人が書いてます。
  • 副業ブロガー
  • ブログ最高月収5桁
  • これまでに4テーマを経験
  • 現在のテーマはSWELL
  • 3つのブログを運営
ブログ
最&高!

SWELL専用のブロックエディター機能である『SWELLブロック』。
多機能かつ使いやすいことで有名ではありますが、実際の使用感気になりますよね!

本記事では、僕が普段SWELLブロックを使っている感じから、リアルな使用感をお伝えしていこうと思います。

>>SWELLの基本情報については、公式サイトか、当サイトの『ワードプレステーマ『SWELL』?知られざる魅力と弱点を解説』 の記事をごらんください。

目次

SWELLブロック一覧

まずはSWELLブロック一覧をごらんください。

SWELLブロック一覧
SWELLブロック一覧

こんなにも専用のブロックを持っているのはSWELLだけです。

すけでぃー

ワードプレス標準のブロックも合わせて使えば、大抵のことはできてしまいますね!

SWELLブロックの実用例

SWELL専用ブロック一覧

それではSWELLブロックの実用例を見ていきましょう!

広告タグ

広告タグブロックでは、あらかじめよく使う広告を登録しておけば、ワンタッチで広告を表示することができます。

STEP
SWELLブロックから広告タグブロックを選択すると、以下のような選択肢が出てきます。
バナー①
STEP
今回は例としてアフィリエイト型の広告を表示させてみましょう。
バナー②

こんな感じに設定するだけで、下記のようにバナーをワンタッチで表示させることができます。

バナー広告をよく使う人にとっては、他の人とは一風違ったバナーを表示できて嬉しいですね。

ブログパーツ

ブログパーツブロックでは、よく使うブロックを瞬時に呼び出すことができます。

僕の場合はCTA(コールトゥーアクション)を呼び出したいときに使用しています。

STEP
SWELLブロックからブログパーツブロックを選択すると、以下の画面が表示されます。
CTA①
STEP
あらかじめ作成しておいたブログパーツを選択します。
すけでぃー

このようにワンタッチで呼び出せるので楽楽!
1から打ち直す必要なし!

投稿リスト

投稿リストブロックでは、自分のサイトの中の記事をピックアップして表示させることができます。

僕の場合は、記事の最後の関連記事を表示させたいときに使用しています。

STEP
設定を変更し、見せたい投稿リストを表示する
投稿リスト⑥
投稿リスト⑦

上記設定変更をすることによって、投稿リストは下記のように変化します。

このように設定によって全く違う投稿リストにできます。

このリストの便利なところは、サイト内の記事が更新されるたび、最新の情報に自動で更新されるところです!

関連記事

関連記事ブロックは、内部リンクや外部リンクをブログカードで簡単に貼り付けることができます。

ほとんどの人が頻繁に使うことになる優秀なブロックです。

STEP
SWELLブロックから関連記事ブロックを選択すると以下のように表示されます。
関連記事①
STEP
外部リンクをブログカードで表示させる
すけでぃー

外部リンクが簡単にブログカード表示できるのは楽すぎる!

ABテスト

ABテストブロックでは、一つのブロック内でランダムに違うブロックを表示させることができます。

どちらのブロックの方が読者さんに見てもらいやすいのか、クリックしてもらいやすいかを調べることができる優れものです。

すけでぃー

僕はボタンを2パターン表示させて、どちらのボタンがクリックされやすいか調べてるのに使っています!

STEP
SWELLブロックからABテストブロックを選択すると以下のように表示されます。
ABテスト①
STEP
Aブロックに1パターン目の表示させたいブロックを入力。
ABテスト②
STEP
Bブロックにもう1パターンの表示させたいブロックを入力。
ABテスト③
STEP
2つのブロックがランダムに表示される。

\ 今よりブログが楽しくなる /

今どちらが表示されていますか?

ページ更新すると、Aブロックが表示されるかもしれませんしBブロックが表示されるかもしれません。

アコーディオン

必要な人にだけ読んでもらえるようにしたりと、色んな使い方ができるのが魅力のブロックです。

STEP
アコーディオンブロックを選択すると以下のように表示されます。
アコーディオン①
STEP
常に表示させたい内容を上に、隠しておく内容を下に入力します。
アコーディオン②
STEP
実際の投稿では以下のように表示されます。
すけでぃー

ワンクリック要素があると読者さんも飽きずに読んでくれるとか!?

ふきだし

すけでぃー

先程からちょいちょい使っているこのふきだしですね!

ふきだしの文ってつい読んでしまいませんか?

あまりに多すぎると見にくいですが、たまに入れると読みやすくなっていいですよね!

STEP
ふきだしブロックを選択すると、以下のよう表示されます。
ふきだし①
STEP
ふきだしに表示したい内容を入力します。

なんてこった!!!

STEP
ふきだしの見た目を変更していきます。
ふきだし②
ふきだし③

上記設定にするとこんな吹き出しになります。(画像はあらかじめ保存してあります。)

すけでぃー

なんてこった

ワンタッチで自由自在にふきだしを作れるので、ついついふきだしが多くなりがちです。

バナーリンク

バナーリンクブロックでは画像の上に文字を入力し、画像全体をリンクにすることができます。

ツールを使わずに画像編集できるので、手軽に使えるのがいいですね!

STEP
バナーリンクブロックを選択すると以下のように表示されます。
バナーリンク①
STEP
画像を選択して表示させます。
バナーリンク②
STEP
画像に文字を入力していきます。
バナーリンク③
STEP
ブロックの編集をしていきます。
バナーリンク④

上記設定を加えると以下のような画像になります。

文字を強調したいときなどにぼかし機能が有効ですね!

SWELLボタン

SWELLボタンブロックでは、ボタンリンクをワンタッチで作ることができます。

すけでぃー

SWELLボタンはシンプルに使いやすくていいんですよね!

STEP
SWELLボタンブロックを選択すると以下のように表示されます。
SWELLボタン①

※色はあらかじめ設定しているテーマカラーが自動で表示されます。

STEP
ボタンリンク内にテキストを入力します。
SWELLボタン②
STEP
ボタンリンクの設定を変更していきます。
SWELLボタン③
SWELLボタン④
SWELLボタン⑤

上記設定のSWELLボタンが以下になります。

すけでぃー

個人的にはクリック率計測が便利すぎます!

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

キャプション付きブロックでは、タイトル付の枠を作ることができます。

記事の冒頭やまとめに使ったりと、万能な使い方ができますね!

STEP
キャプション付きブロックを選択すると以下のように表示されます。
キャプション

※色はあらかじめ設定しています。

STEP
キャプションと内容を入力していきます。
好きな食べ物
  • ステーキ
  • しゃぶしゃぶ

※リストブロック(箇条書き)を併用

STEP
ブロックの設定を変更していきます。
CAPブロック①
CAPブロック②

上記設定で以下のようなブロックになります。

好きな食べ物
  • ステーキ
  • しゃぶしゃぶ
すけでぃー

設定の数が多すぎないからちょうどいいんですよね!

説明リスト

説明リストブロックでは、連続する改行ブロックをワンタッチで作ることができます。

僕はあまり使っていませんが、解説系の記事を書く人には重宝しそうですね!

STEP
説明リストブロックを選択すると以下のように表示されます。
説明リストブロック①
STEP
文章を入力していきます。

地表の高くもり上がっているところの総称。

「山の高いところ」という意味の言葉です。 山の中でも、特に頂上や尾根の部分を指しています。

STEP
ブロックの設定をしていきます。
説明リストブロック③

上記設定に変更すると以下のように表示されます。

地表の高くもり上がっているところの総称。

「山の高いところ」という意味の言葉です。 山の中でも、特に頂上や尾根の部分を指しています。

何についての説明をしているのかが非常に分かりやすくなるブロックですね!

FAQ

FAQブロックでは、質問と回答の組み合わせをワンタッチで表示させることができます。

『質問集』などを作るときに便利なブロックですね!

STEP
FAQブロックを選択すると以下のように表示されます。
FAQブロック①
STEP
質問と回答を入力していきます。
好きな筋肉は?

大円筋

お気に入りの筋トレ種目は?

チンニング(懸垂)

STEP
ブロックの設定をしていきます。
FAQブロック②
FAQブロック③

上記設定にすると以下のように表示されます。

好きな筋肉は?

大円筋

お気に入りの筋トレ種目は?

チンニング(懸垂)

※大円筋は背中の筋肉です。

フルワイド

フルワイドブロックとは、全画面をダイナミック使うことができるブロックです。

サイトのトップページで使うとめちゃくちゃインパクトがあります。

STEP
フルワイドブロックを選択すると以下のように表示されます。
フルワイド①
STEP
画像を挿入します。
フルワイド②
STEP
ブロックを編集します。
フルワイド③

上記設定のようにパラドックス効果を設定すると、以下のように表示されます。

ステップ

ステップブロックは先程から何度も使用していますが、段階ごとにステップ番号を自動でつけてくれるブロックです。

使うだけでなんとなくキレイに見えるので多用しています。笑

STEP
STEPブロックを選択すると以下のように表示されます。
STEP①
STEP
文章を入力していきます。
STEP
トイレにいきます

起床時間は5時〜6時、寝坊すると7時だったりします。

STEP
その足で顔を洗いにいきます

顔を洗ったあと、拭くのが面倒なのでそのまま化粧水をぶっかけます。

STEP
ブロックを編集します。
STEP②

上記設定をすると、以下のように表示されます。

モーニングルーティーン
トイレにいきます

起床時間は5時〜6時、寝坊すると7時だったりします。

モーニングルーティーン
その足で顔を洗いにいきます

顔を洗ったあと、拭くのが面倒なのでそのまま化粧水をぶっかけます。

すけでぃー

しょうもない内容でも、それっぽい感じになってしまいますね!

タブ

タブブロックでは、ボタンクリックで画面切り替えができるブロックです。

〇〇の人はこっちを、✕✕の人はこっちを、といったふうに読者さんに分かりやすく選択させることができます。

STEP
タブブロックを選択すると以下のように表示されます。
TAB①
STEP
Tab1、Tab2に入力していきます。
TAB②
TAB③
STEP
ブロックの編集をしていきます。
TAB④
TAB⑤

上記設定を行うと、以下のように表示されます。

大雑把でおおらかな人が多いです。

読者さんに選択肢を与えつつ、見た目をスッキリできましたね!

SWELLブロックまとめ

まとめ

今回はSWELLブロックの実際の使用感をお届けしていきました。

めちゃくちゃ簡単に便利なブロックが作れることが伝わりましたか?
ほとんどの操作が直感的に行えるので、困ることなく楽しく作っていくことができます。

SWELL公式でも詳しく解説してくれているので、気になる方はぜひ見てみてくださいね!

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

コメント

コメントする

CAPTCHA


目次
閉じる