「SWELL」ふきだしは「ふきだしセット」と「ふきだしブロック」で超簡単!

2020.03.19
テーマ「SWELL」ver.2.0.2のバージョンアップに伴い、「ふきだしセット」の編集画面が改良されたので、一部リライトしました。

こんにちは、なおです!

当ブログが使用しているWordPressのテーマ「SWELL」には、ふきだし機能が搭載されています。

好きなパターンを登録しておける「ふきだしセット」と、ブロックエディター用のSWELL専用ブロック「ふきだしブロック」を使用すれば、実際の表示を確認しながらとても簡単にふきだしを設置することができます。

今回は、SWELLの「ふきだし機能」について、ブロックエディターでの使い方をまとめました。


WordPressテーマ「SWELL」についてはこちらでご紹介しています。よろしければあわせてご覧ください。

目次

ふきだし機能について

SWELLのふきだし機能

ブログでよく見かける「ふきだし機能」。

会話や心の声を表現したり、内容を端的にまとめて読者にポイントを伝えたりなど、とても重宝する機能です。

なおのアイコン画像なお

わかりやすく伝えることができて便利^^

WordPressテーマ「SWELL」にも、ふきだし機能が標準で搭載されています。
別途プラグインなどを用意しなくても使用することが可能です。

SWELLのふきだし機能では、

  • ふきだしセット パターンをあらかじめ登録しておく
  • ふきだしブロック 実際の表示を見ながら設置

が用意されており、これらを組み合わせて使用することで記事を書くときにスムーズにふきだしを設置することができます。

ふきだしセットとは

ひと言で言うと、ふきだしパターンの倉庫です。

アイコン画像、名前、ふきだしの向きや色などのデザインをセットとして、あらかじめ登録しておくことができます。

ふきだしセット

ふきだしセット」に一度設定しておけば、後述の「ふきだしブロック」で好きなパターンを数クリックで設置できます。
いちいち細かい設定をする必要はありません。

いろいろなキャラクターを登録しておくだけでなく、同じキャラクターでも、ふきだしの向きや種類など違うパターンを別々に登録しておいて使い分けることもできます。

ふきだしブロック

SWELLには、ブロックエディター用にSWELL専用ブロック「ふきだしブロック」が用意されています。

ふきだしブロック」では、実際に表示される様子を確認しながらふきだしを設置することができるので、プレビューを見てからイメージと違ったということもありません。

ふきだしブロックの様子

基本の使い方は、「ふきだしブロック」を配置、文字を入力して、使いたいふきだしセットを選ぶだけ!

これが本当に簡単でわかりやすくておすすめです。

ふきだしのデザインいろいろ

SWELLの「ふきだし機能」では、

  • アイコン画像
  • 名前(アイコンの下に表示)
  • アイコンの丸枠(なし、あり)
  • ふきだしの形(発言、心の声)
  • ふきだしの向き(左、右)
  • ふきだしの線(ふきだしの枠線なし、あり)
  • ふきだしの色(グレー、グリーン、ブルー、レッド)

と細かくを設定することができます。

これらを組み合わせることで様々な表現ができますので、記事の内容などで使い分けて使用することができます。

なおのアイコン画像なお

アイコンの枠線あり
ふきだしは左から、グリーン、枠線なし

おくさんのアイコン画像おくさん

アイコンの枠線なし
ふきだしは右から、レッド、枠線あり

なおのアイコン画像なお

アイコンの枠線あり
ふきだしは心の声で左から、
ブルー、枠線なし

ふきだし機能の使い方

実際にSWELLのふきだし機能の使い方をご紹介します。

ふきだしセットにパターンを登録する

まずは「ふきだしセット」に、お好きなふきだしのパターンを登録しましょう。

一度登録しておけば、後述のふきだしブロックで何度でも使用することが可能です。

ふきだしに使用するアイコン用の画像は、

  • あらかじめメディアにアップロードしておく
  • ふきだしセットの登録時にその都度アップロードする

のどちらでも可能です。お好きな方法でご使用ください。

また、私の場合は500×500ピクセルで用意しています。

STEP
ふきだしセットの登録画面を表示する

WordPress管理画面の左側のメニューより、ふきだし>新規追加をクリックします。

ふきだしセットの登録1
STEP
各種入力と設定

新規登録画面が表示されたら、ふきだしセットの内容を入力、設定します。

ふきだしセットの登録2
  1. ふきだしセットの名前
  2. アイコン画像名前
  3. その他詳細設定

(1)ふきだしセットの名前を入力します。
この名前が、ふきだしセットの一覧や、ふきだしブロックでふきだしセットを選ぶときに表示される名前になります。

(2)アイコン画像の選択は、「画像を選択」ボタンをクリックします。
画像を選択画面が表示されたら、使用したいアイコン用の画像を選択します。

名前は、ふきだしのアイコンの下に表示される名前です。

(3)その他のふきだしの設定については以下のとおりです。

アイコンの丸枠

アイコンのまわりに丸い枠を表示するかどうか

ふきだしの形

発言 しゃべっているような通常のふきだし
心の声 もわもわとした心の声を表現するようなふきだし

ふきだしの向き

 左側からふきだしが出ている
 右側からふきだしが出ている

ふきだしの線

なし ふきだしの塗りつぶしのみ
あり ふきだしを線で縁取る

ふきだしの色

グレー、グリーン、ブルー、レッドの4色が用意されています

ふきだしセットの登録3
「かえる左」を登録してみる
STEP
ふきだしセットを登録する

公開」ボタンをクリックして保存します。
保存が完了したら、設定した内容で「ふきだしプレビュー」にプレビューが表示されます。

ふきだしセットの登録4
「かえる左」が登録完了

また、一度登録した後は「更新」ボタンに変わるので、変更した場合には「更新」ボタンをクリックして保存します。

ふきだしセットの一覧表示を確認すると、今登録したふきだしセット「かえる左」が登録できているのが確認できます。

ふきだしセットの登録5

左から順に

  • ふきだしセットの名前
  • 呼び出しコード(クラシックエディターなどで使用するショートコード)
  • プレビュー

と表示されます。

ふきだしセットの名前をクリックすると、登録画面が表示されますので登録内容を修正することが可能です。


私の場合は「なお」用だけで次の4種類を登録して、すぐに選べるようにしています。

ふきだし一覧

また、1つのキャラクター用に1種類だけ登録しておいて、後述の「ふきだしブロック」でそのつど細かな調整を行うことも可能です。

どちらでも可能ですので、使いやすい方法をご使用ください。

ふきだしブロックの使い方

記事を書く時に「ふきだしブロック」を使ってふきだしを設置する方法をご紹介します。

ふきだしを追加する

ふきだしブロックを使ってふきだしを追加するには、基本的に次の3ステップだけ

  1. ふきだしブロックを追加する
  2. 文章を修正する
  3. ふきだしセットを呼び出す

慣れればあっという間にふきだしを追加することができます。

STEP
ふきだしブロックを追加する

ブロック追加ボタンをクリックして、「SWELLブロック」にある「ふきだし」をクリックします。

ふきだしブロックの追加1

すると、ふきだしブロックが追加されます。

STEP
文章を修正する

初期状態ではグレーのふきだしになっており、ふきだしの内容が「ここにテキストを入力」となっていますので、直接修正して文章を入力します。

ふきだしブロックの追加2
STEP
ふきだしセットを呼び出す

右側のサイドバーにある「ふきだし設定」欄に「ふきだしセット」というリストボックスがあります。

こちらには、ふきだしセットで登録したセットが表示されていますので、使用したいふきだしセットを選択します
(ここでは先程登録した「かえる左」を選んでいます)

ふきだしブロックの追加3

すると、すぐに登録した内容にふきだしが変更されます。

ふきだしブロックの追加4

他に細かく変更する必要がなければ、これでふきだしの設置は完了です。

プレビューを見てみると、そのまま表示されているのがわかります。

ふきだしブロックの追加5
なおのアイコン画像なお

めっちゃ簡単です^^

こまかな調整も可能

右側のサイドバーにある「ふきだし設定」欄には、ふきだしセットでも設定した各設定内容が用意されています。

ふきだし設定

ふきだしセットを適用したうえで、こちらで細かくふきだしを調整することも可能です。
(ふきだしセットを使用しないで、そのつど設定することも可能です)

試しに「ふきだし設定」の中にある「ふきだしの色」から「グリーン」を選択してみます。

するとすぐにふきだしの色がグリーンに変わります。

ふきだしの細かな設定

このようにふきだしブロックでは、実際の表示の様子を確認しながら設定することができるのでとてもわかりやすいです。

このサイドバーで設定した内容は、ふきだしセットの内容より優先度が高くなっています。

ふきだしセットの更新

すでに記事に設置済みのふきだしセットを修正した場合は、設置したそのふきだしセットすべてが修正した内容に変更されます

例:ふきだしセット「かえる左」のふきだしの向きを変えてみる

ふきだしセット一覧から「かえる左」をクリックして、編集画面を表示します。

ふきだしの向き」が「」になっていますが、「」に変更します。

ふきだしセットの修正1

」をクリックすると、上の「ふきだしプレビュー」でもすぐにアイコンが右側に変わり、実際の様子を見ながら編集できます。

ふきだしセットの修正2

テーマ「SWELL」ver.2.0.2で、ふきだしセットの編集画面が改良され、保存しなくてもすぐに変更が「ふきだしプレビュー」に適用され、編集しながら確認できるようになりました。

最後に「更新」ボタンをクリックして保存します。

先程の投稿に戻ってみると、先程はかえるのアイコンが左側だったのが右側に変わっています。

ふきだしセットで変更した内容が適用されているのがわかります。

ふきだしセットの修正3

ふきだしブロックのサイドバーで設定した内容は、ふきだしセットの設定より優先度が高く、そちらが優先されます。

ここの例では、先程個別にふきだしの色をグリーンに変えた設定が優先されています

注意すること

ふきだしセット登録時の注意

ふきだしセットに新規に登録するときには、設定ができたら公開」ボタンをクリックして保存しましょう

間違って「下書きとして保存」をクリックすると下書き保存されてしまいます。

注意1

もし間違って「下書き保存」してしまった場合、ふきだしセットの一覧では「下書き」として保存されているのがわかります。
これではちゃんとした登録にはなっていません。

注意2

下書き保存のままだと、投稿画面のふきだしブロックではちゃんと表示されますが、プレビュー公開後の記事では正しく表示されません

注意3
投稿画面ではちゃんと表示される
注意4
プレビューや公開後の記事では表示されない
なおのアイコン画像なお

そそっかしい私は、一度これでハマったことがありました・・・

ふきだしセットの登録では、公開」ボタンをクリックして正しく保存しましょう

設置済みのふきだしセットの削除

設置済みのふきだしセットを変更すると、そのふきだしセットを選んでいるふきだしがすべて変更されることはご紹介しました。

設置済みのふきだしセットを削除すると、それを選んでいるふきだしが正しく表示されなくなってしまいます

設置済みのふきだしセットは、変更は行っても、削除はできるだけしない方が良いでしょう

注意5
投稿画面ではエラーとなってしまう
注意6
プレビューや公開後の記事では正しく表示されなくなる

まとめ

今回はWordPressテーマ「SWELL」の「ふきだし機能」をご紹介しました。

ふきだし機能は、会話や思いを伝えたり、記事のポイントを伝えたりでき、また長い文章の間に挟んであげると読みやすくなったりと、とても便利な機能です。

なおのアイコン画像なお

私も、もう必需品になっています^^

SWELLのふきだし機能(ふきだしセットふきだしブロック)を使うと、実際の見た目で確認しながら簡単に設置できるので、記事を書くときにもストレスなく進めることができます。

ブロックエディターでどんどん記事を書いていけるSWELLとふきだし機能はおすすめです^^

コメント

コメントする

目次
閉じる