【ふきだしブロックで比較】THE THORよりもSWELLが使いやすい!

【ふきだしブロックで比較】THE THORよりもSWELLが使いやすい!

THE THORとSWELLの「ふきだしブロック」機能について比較してみました。

「ふきだしブロック」はブログを賑やかにするだけでなく、「とっつきやすさ」や「オリジナリティ」を高めるのに便利な機能です。

THE THORとSWELL両方とも「ふきだし」機能は実装されていますが、よく調べると結構違いがあります。

この記事でその違いを詳しく解説していますので、ワードプレステーマ選びの参考にしてください。

関連するSWELL公式マニュアルはこちら

この記事の目次

THE THOR ふきだし機能

THE THORでは次のような吹き出しデザインを設置することができます。

アバター画像の犬猫はデフォルトの画像です。

背景スタイル
THE THOR ふきだし(背景スタイル)
ボーダースタイル
THE THOR ふきだし(ボーダースタイル)

ふきだしのカスタマイズ方法

ふきだしのアバター画像やカラーの初期設定は、「外観」→「カスタマイズ」→「パーツスタイル設定[THE]」 →「吹き出し設定(個別ページ用)」で変更できます。

THE THOR パーツスタイル設定 吹き出し設定
吹き出しの設定場所
THE THOR 吹き出し設定
吹き出し設定項目

吹き出し画像設定

吹き出しの画像変更や表示名の設定を行います。

THE THOR 吹き出し設定 アバター

画像は横縦比が1:1だときれいに設置できます。

ふきだしのカラー設定

吹き出しのテキスト部分の色を変更することができます。

文字色、背景色、枠線色のカラーピッカーを使って設定してください。

THE THOR 吹き出し設定 スタイル

「吹き出し設定(個別ページ用)」のカラー設定は、左側の吹き出しと右側の吹き出しで別々の色を設定することはできません。

キャラクターによってイメージカラーを使い分けたい場合はCSSの追加カスタマイズが必要です。

ふきだしをカスタマイズすると、設置済みのふきだしについてもアバター画像や色が更新されますが、表示名については更新されません。

もしリネームしたい場合は投稿記事の編集が必要です。

更新される要素

  • アバター画像
  • 画像の大きさ

更新されない要素

  • 表示名

ふきだしの使い方

THE THORのふきだしをエディターで設置してみます。

STEP
ツールバーの「プリセットパーツ」→「吹き出し」を選択
THE THOR エディター プリセットパーツ 吹き出し
STEP
ふきだしのスタイルを選択

先にご紹介した通り、4つのふきだしから選びます。

THE THOR エディター 吹き出し選択肢
ふきだしスタイル一覧
THE THOR ふきだし(背景スタイル)
吹き出し(背景スタイル)
THE THOR ふきだし(ボーダースタイル)
吹き出し(ボーダースタイル)

ここまでの作業でふきだしがエディターに設置されました。

STEP
ふきだしのテキストを変更

ふきだしの表示名とコメント部分はカーソルで選択すると編集できます。

マウスで画像赤枠あたりをクリックしてください。

THE THOR エディター ふきだし テキスト変更

エディターからアバター画像を変更

アバター画像はエディターからも変更できます。

STEP
アバター画像の左上側にカーソルを合わせる

分かりにくいですが、「|」が表示されます。

THE THOR エディター アバター画像の選択
STEP
「メディアの追加」をクリック
THE THOR エディター アバター画像 メディアを追加
STEP
変更したい画像を選択

メディアから画像を選びます。

横縦比が1:1のスクエアタイプがおすすめです。

THE THOR エディター アバター画像 メディアを選択

ふきだしのスタイルを変更したい場合は最初からやり直し

例えば設置した左画像のふきだしを右画像に変更したり、背景スタイルをボーダースタイルに変更したりする場合、設置済みのふきだしを削除して、最初から設置しなおす必要があります。

設置済みのふきだしにカーソルを合わせて、設置手順を繰り返しても、無理やりふきだしが追加されてしまいます。

THE THOR ふきだし スタイルの変更

THE THORのふきだしは複製が難しい

ふきだしを逐一プリセットパーツから設置するのが手間なので、コピペで複製したいところなのですが、これがなかなか難しいです。

ふきだし1ラリー分を選択してコピペすると次のようになることがしばし起きます。

ドラッグ範囲の指定がかなり難しい

THE THOR ふきだしの複製 1

ドラッグ範囲を微調整すると、右画像のふきだしもコピペできました。

THE THOR ふきだしの複製 2

THE THORのふきだしのコピペはドラッグ範囲にコツがいる。

SWELL ふきだしブロック

SWELLでは標準搭載されている「ふきだしブロック」で次のようなふきだしを作成することができます。

SWELL 吹き出し作成例

SWELL ふきだしブロック 作成例

別画面であらかじめふきだしセットを登録しておくことで、簡単に好きなふきだしを呼び出すことが可能です。
後ほど詳しく解説します。

ふきだしセットの作成

SWELLではあらかじめ、ふきだしの色や形、アイコン画像などの設定を1つのテンプレートとして登録しておくことができます。

これが優れものなので、ぜひ見ていただきたいです!

「管理メニュー」→「ふきだし」で次のような画面が表示されます。

SWELL 管理メニュー ふきだし
ふきだしセット一覧

「新規追加」もしくは「編集」でふきだしの作成画面が表示されます。

SWELL ふきだしセット 作成画面

SWELLではプレビューで確認しながらふきだしの設定が可能です。

例えばアイコン画像や名前を設定するとリアルタイムでふきだしプレビューが更新されます。

SWELL ふきだしセット プレビュー

その他の設定項目

アイコンの丸枠

「あり」にすると、アバター画像を丸枠で縁取ることができます。

SWELL ふきだし アイコンの丸枠
SWELL ふきだし アイコンの丸枠 プレビュー
ふきだしの向き

ふきだしの左右方向を設定できます。

SWELL ふきだし ふきだしの向き
SWELL ふきだし ふきだしの向き プレビュー
ふきだしの形

ふきだしを発言と心の声で形を変えることができます。

SWELL ふきだし ふきだしの形
SWELL ふきだし ふきだしの形 プレビュー
ふきだしの線

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

SWELL ふきだし ふきだしの線
SWELL ふきだし ふきだしの線 プレビュー
ふきだしの色

ふきだしの色は5色からえらぶことができます。

SWELL ふきだし ふきだしの色
SWELL ふきだし ふきだしの色 プレビュー

ふきだしの色の変更

ふきだしの背景と線の色は「SWELL設定」→「エディター設定」の「ふきだし」で変更できます。

SWELL設定 エディター設定 ふきだし

背景とボーダーの色をカラーピッカーで変更するとリアルタイムでプレビューされます。

SWELL ふきだしカラー設定

カラーセットの名称までは変更できません。

SWELL ふきだしカラー設定 名称

作成したふきだしは管理メニューの「ふきだし」で一覧表示されます。

プレビューされるので、どんなふきだしなのかすぐに分かるのが嬉しいです。

設定を変更したい場合は「編集」を選択してください。

SWELL ふきだしセット 編集

ふきだしを更新すると設置済みのすべてのふきだしが更新されます。

ふきだしの設置方法

SWELLでは「ふきだしブロック」を使うことで、実際の表示を確認しながらふきだしを設置することができます。

STEP
「ブロックを追加」から「ふきだし」を選択

初期状態のさっぱりとしたふきだしが設置されます。

SWELL ブロックライブラリー ふきだしブロックの設置
SWELL ふきだしブロック 初期状態
STEP
登録したふきだしセットを呼び出す

ふきだしブロックを選択すると、右サイドメニューにふきだしの設定パネルが表示されます。

登録したふきだしセットがプレビューされているので、使いたいふきだしセットを選択してください。

SWELL ふきだしブロック 設定パネル

すると先ほどのさっぱりとしたふきだしが、選択したふきだしセットに置き換わります。

SWELL ふきだしブロック 設置完了

一度設置したふきだしセットを選択した状態で、またプレビューのふきだしセットを選択し直せば、簡単にふきだしセットを変えることができます。

コメント部分は直接編集

エディター上でふきだしのコメント部分を選択すれば、任意のテキストを入力できます。

段落ブロックと同じようにテキスト装飾が使えます。

SWELL ふきだしブロック テキストの編集

ふきだしの詳細設定で個別カスタマイズ

ふきだしブロックの設定パネルには、ふきだしセットの管理ページと同じ項目が並んでいます。

SWELL ふきだしブロック 設定パネル項目一覧

これらを設定すると、ふきだしセットを作成したときと同じように、ふきだしの見た目を調整することができます。

ふきだしセットの設定よりもエディター上での設定が優先して適用されます。
1ページだけふきだしを変更したい場合に便利です。

ゲストなパンダ

つまり、テンプレート化したふきだしをエディター上で個別カスタマイズ可能という大変使い勝手の良い仕様となっています。

グループ化すれば装飾の幅も広がる

ふきだしブロックにボーダーやボックススタイルを追加したい場合はふきだしのグループ化を行います。

SWELL ふきだしブロック グループ化
3点リーダーアイコンから「グループ化」を選択

グループ化するとボーダーやボックススタイルが選択できるようになります。

SWELL ボックススタイル一覧

あとはプレビューをクリックしてスタイルを適用するだけでOKです。

例えば「はてな」のボックススタイルを追加できる

SWELL 吹き出しブロック ボックススタイル追加例

ふきだしの追加もブロックエディターなら簡単

ブロックエディターではブロック複製のショートカットコマンドが用意されています。

「Ctrl+Shift+D」でブロックを複製することができます。

会話のラリー分ブロックが必要なふきだしブロックもブロック複製のショートカットコマンドを使うと作業がはかどります。

SWELL ブロックエディター ブロックの複製

まとめ ふきだしの使い勝手・デザインともにSWELLの圧勝

THE THORの総評

THE THORのふきだしはデザインパターンが2つしか用意されておらず、SWELLほど自由な表現ができません。

一度設置したふきだしのスタイルを変更する場合は、一度ふきだしを削除して最初から設置しなおす手間もかかります。

ふきだしのアバター画像の編集や複製が直感的にできないため、作業ストレスが大きいです。

THE THORのここがダメ
  • デザインパターンが少ない
  • 一度設置したあとのやり直しの手間が大きい
  • アバター画像の編集や複製が直感的にできない

SWELLの総評

大変よく考えて作られていると思います。

管理・デザイン・操作性すべて大満足◎です。

その1 管理がしやすい

ふきだし管理画面機能によって、ふきだしのテンプレートの作成と編集がしやすいです。

テンプレートの数に制限もありません。

その2 デザインパターンが豊富

ふきだしのカラーは5種類、コメント部分の形が「発言」と「心の声」で2パターン用意されているので、表現豊かな記事に仕上げることができます。

その3 デザイン操作が簡単

ふきだしのデザイン設定はマウス操作で完結しているので、小難しいCSSコードの記述が不要。

デザインがその場でプレビューされるので、デザインの確認に時間がかからないのも嬉しいです。

その4 ふきだしセットの個別カスタマイズが可能

ふきだしはエディター上で個別カスタマイズできます。

ゲスト的に1回だけ使いたいキャラクターのふきだしを作るときに便利です。

執筆のしやすさは圧倒的にSWELL

THE THORのふきだしはデザインパターンが少なく、使い勝手も良くないと思います。

一方、SWELLのふきだしはとにかく使いやすい!

常にサイドバーに適用されるデザインがプレビューされるので視認性が高いです。

THE THORにはもっと頑張て欲しいが・・・

これまでいろいろな機能でTHE THORのレビューをしてきましたが、THE THORのこの使い勝手で、多くのブロガーがおすすめしているのはちょっと疑問です。

厳しい評価かもしれませんが、多くのブログでおすすめされている分、THE THORにはもっと頑張ってほしいです。

おそらく開発元はブロックエディター対応のワードプレステーマをリリースするでしょうが、ビジネス的に考えたら有償アップデート、もしくは別テーマでの新規販売だと思います。
(わたしならそうする!)

これからワードプレステーマを選ぶならSWELLがおすすめ

「書きやすさ」はブログを続けていくために非常に重要な要素だと思います。

収益性を高める機能やSEOに強いのは有難いのですが、「書くこと」自体が大変なのはいただけません。

その点、SWELLはふきだし機能に限らず、使い手のことをよく考えて開発されていると感じる場面が多いです。

わたしはSWELLで記事を書くようになってとにかくデザインするのが楽しくなりましたし、記事を書くスピードが断然速くなりました!

本当に買って良かったワードプレステーマです。

もしこの記事がお役に立ったのなら、下のバナーからSWELL公式サイトの訪問お願いできますか?

ブログ継続のやる気につながります。

もっと気軽に、楽しく記事を書こう。

【ふきだしブロックで比較】THE THORよりもSWELLが使いやすい!

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

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

satouのアバター satou 金融系Web広告担当

ブログ未経験でいきなりワードプレスからはじめました!金融業界で働くただのWeb広告担当者です。Web広告のことや生活を豊かにする情報をシェアしていきます。
最近はワードプレステーマ『SWELL』にどっぷりハマってます。しばらく『SWELL』についてばかり書くことになりそう。

この記事の目次