【ver2.5.7対応】SWELL ふきだしブロックを丁寧に解説

【ver2.5.7対応】SWELL ふきだしブロック解説

SWELL ver. 2.5.7のアップデートで、ふきだしセットの管理画面がリニューアルされています。

アップデート内容

  • ふきだしセットの表示順序の入れ替えができるようになった
  • 表示レイアウトの変更
  • ショートコードの表示の仕方が変更
  • 複製・削除操作の変更

【SWELL – ver. 2.5.7 アップデート情報】

【公式】SWELLのふきだしブロックの使い方

※公式サイトのマニュアルページの更新が追いついていないのでご注意ください

この記事の目次

ふきだしブロックの利用手順

SWELLのふきだしブロックの使い方は大きく2つの手順に分かれています。

STEP
ふきだしセットの作成
STEP
ふきだしブロックの設置

管理画面であらかじめテンプレートとなるふきだしを作成しておいて、エディターで作成したふきだしセットを呼び出すイメージです。

ふきだしセットの作成

WordPress管理画面から「管理メニュー」→「ふきだし」で「ふきだしセット」一覧が表示されます。

ふきだしの新規作成→左上の「新規ふきだし追加」ボタンから作成
ふきだしの編集→プレビューされた「ふきだしセット」をクリック

SWELL ふきだしセット一覧 ver2.5.7

ふきだしセットの新規登録

設定項目一つひとつ解説します。

SWELL ふきだしセットを新規登録 ver2.5.7

ふきだしセットのタイトル

タイトルは「ふきだしセット」一覧のプレビューカードに表示されます。

SWELL ふきだしセット タイトル ver2.5.7

アイコン画像

アイコン画像はプレビューのアイコン画像をクリックすると変更できます。

SWELL ふきだしセット アイコン画像 ver2.5.7

アイコン名

アイコン名はプレビューのアイコン画像下にあるアイコン名をクリックすると編集できます。

SWELL ふきだしセット アイコン名 ver2.5.7

アイコンの丸枠

「枠なし」「枠あり」でアイコンのデザインを変更できます。

SWELL ふきだしセット アイコンの丸枠 ver2.5.7
SWELL ふきだしセット アイコンのマル枠 プレビュー ver2.5.7

ふきだしの向き

ふきだしの出る方向を設定できます。

SWELL ふきだしセット ふきだしの向き ver2.5.7
SWELL ふきだしセット ふきだしの向き プレビュー ver2.5.7

ふきだしの形

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

SWELL ふきだしセット ふきだしの形 ver2.5.7
SWELL ふきだしセット ふきだしの形 プレビュー ver2.5.7

ふきだしの線

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

SWELL ふきだしセット ふきだしの線 ver2.5.7
SWELL ふきだしセット ふきだしの線 プレビュー ver2.5.7

ふきだしの色

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

SWELL ふきだしセット ふきだしの色 ver2.5.7
SWELL ふきだし ふきだしの色 プレビュー

ふきだしの色の変更

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

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

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

SWELL ふきだしカラー設定

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

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

SWELLエディターでは編集内容がリアルタイムでプレビューされます。
その場で変更イメージが確認できるのでとても便利です。

ふきだしセットの編集

作成したふきだしを編集したい場合は、プレビューされた「ふきだしセット」をクリックしてください。

SWELL ふきだしセット一覧 編集 ver2.5.7

ショートコードの表示

ふきだしセットのショートコードは「ふきだしセット一覧」から表示できます。

プレビューカードの右上にショートコードを表示するボタンをクリックします。

SWELL ふきだしセット ショートコード ver2.5.7

プレビューカードが暗転してショートコードが表示されます。

表示をやめる場合はもう一度同じボタンをクリックします。

SWELL ふきだしセット ショートコードの表示場所 ver2.5.7

ふきだしセットの複製・削除

ふきだしセットの複製と削除は「ふきだしセット一覧」とふきだしセットの編集画面で行います。

SWELL ふきだしセット一覧 複製&削除ボタン ver2.5.7
SWELL ふきだしセット 複製&削除ボタン ver2.5.7

ふきだしセットの並べ替え

ver2.5.7から作成したふきだしセットの並べ替えができるようになりました。

SWELL ふきだしセット 表示順序 ver2.5.7
プレビューカード一枚ずつ移動できます。

ふきだしブロック編集時に表示されるふきだしセット表示順序と連動しています。

SWELL エディター ふきだしセット 表示順序 ver2.5.7

実際にふきだしブロックを使ってみよう!

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

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

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

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

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

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

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

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

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

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

コメント部分は直接編集

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

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

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

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

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

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

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

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

ゲストなパンダ

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

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

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

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

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

SWELL ボックススタイル一覧

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

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

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

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

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

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

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

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

まとめ SWELLのふきだしブロックはココが凄い!

ふきだしの作成がかんたん!

ここまでの解説を読んでいただければお判りいただけるかと思いますが、SWELLのふきだしブロックは作成・複製・削除がとても簡単です。

あらかじめ作成したふきだしセットをエディター上で個別にカスタマイズできるところとか本当に気が利いているなと思います。

SWELLのふきだし機能は他のWordPressテーマと比べても圧倒的に優れています。

過去にTHE THORとSWELLでふきだし機能を比べたことがあるのですが、THE THORのふきだしはSWELLと比べると直感的にふきだしを設置することができず、ふきだしの作成に非常に時間がかかりました。

作成したふきだしセットの管理がしやすい!

「ふきだしセット一覧」で作成したふきだしを一括管理できるので編集管理がとても楽です。

標準のデザインが使いやすい!

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

SWELLのデフォルトデザインは落ち着いたトーンのものが多いのでそのままでも十分使えます。「色のセンスがない!」という方にこそ使ってほしいです!

気になったところ・・・表示順序の入れ替えが1つずつしかできない

ver2.5.7から実装されたふきだしセットの表示順序の入れ替えですが、プレビューカード1枚ずつしか入れ替えできません。例えば一番後ろのふきだしセットを一番前に持ってこようとすると、「←」のボタンを何度もポチポチする必要があります。

ゲストなパンダ

ドラッグ&ドロップで入れ替えできた方がいいかもしれないけど・・・。

ゲストな筆者

でもドラッグ&ドロップって思ったところに挿入できなかったりするから結構イライラするかも。。

まあ、たくさんふきだし作るケースは少ないと思うので、些末な問題です。

SWELLは自信をもっておすすめできるWordPressテーマ

今回はSWELLの「ふきだしブロック」にフォーカスして解説しましたが、SWELLはブログを書くことを手助けするオリジナル機能がたくさん用意されています。

そして、SWELLの何よりの強みは買い切りでブロックエディタ(Gutenberg)完全対応のWordPressテーマということです。

ブロックエディタ(Gutenberg)はWordPress5.0から標準搭載となったエディターですが、有料WordPressテーマも含めて、まだまだ完全対応できているテーマは少ない状況であることに鑑みると買い切りでブロックエディタ(Gutenberg)完全対応というだけで十分選ぶ理由になると思います。

ブログは継続することで成果がでるもの。

そのブログを書く作業が「わからない」「面倒」と感じることが多いときっと続かないと思います。

なので、これからWordPressでブログをはじめるなら、ブロックエディタ(Gutenberg)完全対応のテーマで書く方が絶対続けやすいです。

WordPressテーマを選ぶ際は、『ブロックエディタ(Gutenberg)完全対応』を合言葉に探すようにしましょう。

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

【ver2.5.7対応】SWELL ふきだしブロック解説

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

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

この記事を書いた人

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

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

この記事の目次