SWELLのふきだし機能

SWELLのふきだしブロックーふきだしの使い方と注意点
URLをコピーする
URLをコピーしました!

ブログに吹き出しを入れて会話風にできな

kumi

SWELLのふきだし機能を使えば、あなたがしゃべっているようにふきだしを使って伝えることができますよ♪

こんな風に、ブログにふきだしで会話をするように表現すると、分かりやすくなります。

SWELLには、ふきだし機能があるので記事の中に会話を成立できます。

使い方や注意点など、詳しく紹介するので使いながら覚えていきましょう。

目次

SWELLのふきだしとは 

SWELLふきだしとは

当ブログ(935style)が使っているWordPressテーマ「SWELL」では、ふきだし機能が搭載されています。

SWELLのふきだし機能
  •  「ふきだしブロック」は、WordPressのSWELL専用ブロック
  •  「ふきだしセット」は、アイコン画像や形、色など好きなパターンをセット登録する

SWELLのふきだし機能の詳しい使い方をまとめましたので、参考にしてください。

WordPressテーマ「SWELL」については、こちらでご紹介しています。

SWELLのふきだしブロック

SWELLの「ふきだしブロック」は、投稿画面でSWELL専用ブロックで表示を確認しながら作ります。

SWELLふきだしブロック

ふきだしのアイコンや形などを一つずつ選びならが作るので、同じふきだしを使う場合でも一つずつ表示を確認しながら作る必要があります。 

SWELLのふきだしセット

SWELLのふきだし機能の2つめ「ふきだしセット」は、アイコン画像や形、色など好きなパターンをセットとして登録します。

SWELLふきだしセット

たとえば、自分のアバター画像のふきだしなど、よく使うふきだしセットを登録すれば簡単に呼び出せます。

「ふきだしブロック」でも「ふきだしセット」でも、表示される内容に違いがありません。

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

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

ふきだしセットは、「ふきだしセット一覧」から新規ふきだし追加を作っていきます。

STEP
「ふきだし」をクリック

WordPress管理画面の左側メニューから「ふきだし」をクリックします。

STEP
[新規ふきだし追加]をクリック

ふきだしのタイトル入力

ふきだしのタイトルは、「ふきだしセット一覧」画面で表示されます。

タイトル名は、すでに登録しているタイトル名と同じタイトルを登録することもできます。

ふきだしのアイコン

ふきだしのアイコン画像をを選びます。

SWELLふきだしのアイコン画像

①プレビュー画像をクリックします。

②「メディアの選択またはアップロード」から画像を選びます。

③[選択]をクリックします。

SWELLふきだしのアイコン画像のアップロード

SWELL公式サイトでは、アイコン画像の推奨サイズ指定はありませんが、『150~200px』の画像が良いでしょう。
理由は、画像サイズが小さすぎるとアイコンが粗くなり、大きすぎると表示スピードが遅くなる原因になります。

ふきだしのアイコン名

アイコン画像の下に表示されるアイコン名です。※空白でも登録できます。

SWELLふきだしのアイコン名の設定

ふきだしのアイコンの丸枠

アイコン画像を「枠なし」「枠あり」のどちらかのデザインで表示します。

SWELLふきだしのアイコンの丸枠設定

ふきだしの向き

ふきだしを左から出るようにするか、右から出るようにするか選びます。

SWELLふきだしの向き設定

ふきだしの形

ふきだしの形を「発言」「心の声」から選みます。

SWELLふきだしの形の設定

ふきだしの線

ふきだしの枠線を「なし」「あり」を選びます。

SWELLふきだしの線の設定

ふきだしの色

5色からふきだしの色を選びます。

SWELLふきだしの色の設定

ふきだしの色とふきだしの線は、SWELL設定の「エディター設定」から編集できます。

テキストとアイコンの並び

スマホでふきだしをどのような並びで表示するかの設定です。

SWELLふきだしのテキストとアイコンの並びの設定

SWELLのふきだしの編集方法

SWELLふきだしセットの編集方法

作成したふきだしセットを編集する方法です。

ふきだしの編集方法

作成したふきだしセットの内容を修正する場合の方法です。

STEP
修正するふきだしセットを選ぶ

ふきだしセット一覧から修正するふきだしセットをクリックします。

SWELLふきだしー修正するふきだしセットを選ぶ
STEP
内容を修正する
SWELLふきだしーふきだしセットの内容修正
STEP
[更新]をクリック
SWELLふきだしーふきだしセットの変編集後に[更新]ボタンをクリックします

ふきだしセット更新後の投稿画面での反映

ふきだしセットの内容をあとから変更すると、どのように投稿画面に反映するのか確認しました。

まずは、ふきだしセットの変更前と変更後の違いを確認してください。
変更点:ふきだしの向きを「左」⇒「右」に変更

【ふきだしセットの変更前の表示】

kumi

ふきだしセットを変更する前に呼び出した「ふきだしセット」です。

【ふきだしセットの変更後の表示】

kumi

ふきだしセットを変更した後に表示される「ふきだしセット」です。

ここから、次の2パターンのときの投稿画面でどのように反映するか確認してください。

パターン1:ふきだしセットから呼び出したまま使ってた場合⇒更新内容が反映されます。

kumi

ふきだしセットを変更した後に表示される「ふきだしセット」です。

パターン2:ふきだしセットから呼び出した後に個別修正(ふきだしの線を「あり」)した場合  
⇒個別設定した以外の内容が反映されます。

kumi

ふきだしセットを変更した後に表示される「ふきだしセット」です。

パターン1とパターン2の違いから、個別設定した以外の内容が反映されます。

ふきだしセットのショートコードの表示

[/]をクリックすると、ショートコードが表示されます。元に戻すには、[×]をクリックします。

SWELLふきだしーショートコードの表示

投稿画面にショートコードを入力してもふきだしを呼び出せます。

ふきだしセットの複製登録

ふきだしの複製を登録することができます。

STEP
[複製]をクリック

[複製]をクリックふきだしセット一覧から複製したいふきだしの[複製]をクリックします。

SWELLふきだしーふきだしセットの[複製]ボタンをクリックします
STEP
[OK]をクリック

[OK]をクリック本当に複製しますか?メッセージで[OK]をクリックします。

SWELLふきだしセットー本当に複製しますか?の[OK]ボタンをクリックします
STEP
複製が完成

タイトルに「〇〇〇_copy」が表示タイトルに「〇〇〇_copy」となる複製が登録されます。

SWELLふきだしセットー複製

ふきだしの削除方法

ふきだしセットを削除する方法です。

STEP
[×]をクリック

[×]をクリック削除するふきだしプレビューの[×]をクリックします。

SWELLふきだしセットー削除する[×]ボタンをクリック
STEP
[OK]をクリック

[OK]をクリック本当に削除してもいいですか?メッセージで[OK]をクリックします。

ふきだしセット削除後の反映

投稿画面で使っているふきだしセットを削除した場合、投稿画面を開き直すと次のようなエラー表示になります。

投稿画面でエラー発生 ふきだしセットのデータは破損しています。とエラー表示されます。

SWELLふきだしセットの削除後のエラー表示

削除したふきだしセットの復旧方法

削除したふきだしセットを復旧すれば、投稿画面も元のふきだしが表示されます。

STEP
[データ復旧用のふきだしセットを作成する]をクリック
SWELLふきだしセットの削除後のエラー表示ーデータ復旧用のふきだしセットを作成する
STEP
「ふきだしセット管理ページ」リンクをクリック
SWELLふきだしセットの削除後のエラー表示ーふきだしセット管理ページをクリックします
STEP
ふきだしセットを作り直す
SWELLふきだしセットの内容を編集します

元の状態には戻りませんので、手動で元のふきだしを選び直します。

STEP
[更新]をクリック
SWELLふきだしセットの[更新]ボタンをクリックします

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

ふきだしセットを一覧から並び替えをします。

STEP
並べ替えするふきだしセットを選ぶ

並べ替えしたいプレビューにマウスポインタを重ねて選びます。

SWELLふきだしセット一覧の並び替え
STEP
移動する

左右に表示される[<]・[>]をクリック 1つずつしか移動できないため、移動したい場所に行くまでクリックします。

SWELLふきだしセット一覧の並び替え

ふきだしセット一覧の左上から右下の順序で、投稿画面に表示されます。
よく使うふきだしセットは、左上付近まで移動することをおすすめします。

SWELLふきだしの使い方

SWELLふきだしの使い方

SWELLを使ってふきだしを投稿画面に呼び出すには、「ふきだしセット」と「ふきだしブロック」の2種類があります。

ひとつずつ使い方を確認しましょう。

「ふきだしセット」編

STEP
[+]をクリック

ブロックを追加の[+]をクリックします。

SWELLふきだしセットの入力ー[+](ブロックの追加)をクリックします
STEP
「ふきだし」をクリック
SWELLふきだしセットの入力ーSWELLブロックのふきだしをクリックします
STEP
ふきだしセットから選ぶ

設定(左側)欄のふきだしセットから選びます。

STEP
テキストを入力
SWELLふきだしセットのテキスト入力します

ふきだしの詳細設定を個別変更する方法

その投稿画面のふきだしセットのみを変更したい場合は、左側ー設定欄から変更できます。

SWELLふきだしセットの詳細設定を個別変更する方法

ふきだしセットの内容は更新されません。

複数のふきだしをグループ化して装飾もできる

STEP
グループ化したい項目を選ぶ
SWELLふきだしセットのグループ化設定
STEP
[オプション]をクリック
SWELLふきだしセットのグループ化ーオプションをクリックします
STEP
「グループ化」をクリック
SWELLふきだしセットのグループ化
STEP
左側ーブロックから装飾を選ぶ
SWELLふきだしセットのグループ化ーブロックの装飾を選びます

記事内での複製も簡単

投稿画面から複製を作成すると、ふきだしのテキストもあわせて複製します。

STEP
[オプション]をクリック

ふきだしのブロックの[オプション]をクリックします。

SWELLふきだしセットの複製ーオプションをクリックします
STEP
「複製」をクリック
SWELLふきだしセットの複製
STEP
テキストを入力
SWELLふきだしセットの複製-テキストを入力します

「ふきだしブロック」編

SWELLのふきだしは、SWELL専用ブロックからひとつずつ選ぶ「ふきだしブロック」という方法でも入力できます。

STEP
[+]をクリック

ブロックの追加[+]をクリックします。

STEP
「ふきだし」をクリック
STEP
テキストを入力

ふきだし文章を入力します。

SWELLふきだしセットのテキストを入力します
STEP
ふきだし設定をする

左側ーブロック設定からふきだし設定を選びます。

SWELLふきだしセットのふきだし設定

ふきだしの有効的な使い方ーみんなはどうやって使っているの?-

SWELLふきだしの有効的な使い方ーみんなはどうやって使っているの?

SWELLのふきだし機能を使えるようになったはずですが、どうやってふきだしを使っているのか知りたくないですか。

みんながSWELLふきだしをどのようにして使っているのか、実例を調べてみました。

読者さんの悩みを伝える

読者さんの悩みや気持ちを代弁して表現するときに使います。

Aさんはどんなことに悩んでいるのか。

WordPressテーマの「SWELL」って初心者向けなのかな?

Bさんはどんなことに困っているのか。

SWELLのふきだしをどうやって使ったら効率的なのか分からないの…

など、人それぞれ思っていることが違うことを分かりやすく表現するのに使います。

自分の考えや気持ちを伝える

読者さんの悩みのふきだしに対して、ブログ運営をしているあなたがそれに回答する形式でふきだしを使って表現するのに使います。

kumi

質問に対しする回答やポイントなど、あなたが会話して伝えてる感を演出するのに使っています。

読者さんと自分の会話形式で伝える

上記の2つを組み合わせて、会話形式で表現するときにつかいます。

WordPressテーマの「SWELL」を使ってみて、使いやすいですか?

kumi

HTMLやCSSの知識ゼロでもSWELLを使って、簡単な操作で当ブログを作っているので安心してください。

ブログは記事を読んでもらうため、読者さんとあなたが直接会話しません。

でも、ふきだしの会話形式にすることで、親近感をもってもらえることがあります。

ふきだしを使うときの注意点

SWELLふきだしを使うときの注意点

ふきだしの使い方によっては、あよっては、あ見にくくなることがあるので、注意している点をいくつかまとめました。

ふきだしの内容文は長くしない  

ふきだし内の文章を長くしてしまうと、読みにくくなります。

kumi

WordPressテーマ「SWELL」のふきだし機能は簡単に呼び出すことができます。ふきだしセットに登録しておけば、ふきだし内のテキストを入力するだけ、時短にもなり簡単に使いこなすことができます。
よく使うふきだしをいくつか登録しておくことで、簡単に呼び出せちゃいます。
しかも、ふきだしセットを呼び出したあと、個別に修正することもできます。
セットを作る方法も、投稿画面で使う方法もとっても簡単なので、初心者さんでもすぐに使いこなせますよ。

kumi

WordPressテーマ「SWELL」のふきだしセットは便利な機能です!

長文だと、読む気になりませんよね・・・(苦)

さらに、スマホでは1行の文字数がさらぬ少なくなるので、ふきだし内の文章は長くならないようにしましょう。

ふきだしを多く使わない 

ふきだしを使った会話形式で記事を書いたり、記事の文章よりもふきだしが目立ってしまうと、読みにくくなります。

ふきだしは、ここぞ!という時に使うのが効果的です。 

ふきだしアイコンは綺麗な画像を使う

ふきだしの画像サイズでも紹介しましたが、画像サイズが小さいとアイコンが粗く見えます。

適切な画像サイズを使うことで、きれいなアイコン画像にしましょう。

SWELLのふきだしのまとめ

WordPressテーマ「SWELL」

最後に、SWELLのふきだしについておさらいしておきましょう。

SWELLのふきだしには、「ふきだしブロック」と「ふきだしセット」があります。

基本的なふきだしセットをいくつかパターンとして登録しておくことで、簡単にふきだしを表示できちゃいます。

SWELLのふきだしは、他のテーマよりも簡単に入力ができ、見た目もオシャレなので使い過ぎに注意しましょう。

まだ、SWELLを使ったことがないけど、使ってみたいと思った人は、ぜひを使ってみてくださいね。

参考になったらシェアしてね!
URLをコピーする
URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次
目次
閉じる