WordPressにて吹き出しの作り方・編集の仕方を解説します

セミリタイアを目指して娘と奮闘中のまやえです。

今回は、WordPressでの吹き出しの作り方・編集の仕方を解説していきます。

まず初めに、「吹き出し」とはこのような機能になりますが、すべてのテーマに実装されているわけではありません。吹き出しが使いたい人は、吹き出し機能が実装されてあるテーマを選んでください。ちなみに自分はCocoonを使っています。Cocoonには吹き出し機能が実装されていますよ。

ブログの記事を執筆してると、些細なことで行き詰まることがありますよね。どうやって導入を進めよう、出だをがいつも考えるのが面倒だ…そんなときは、「吹き出し」で会話形式を作るのをオススメします。

皆がみんなそうではないと思いますが、専門書みたいに文字が羅列されてあるだけだとなんとなく読む気が失せてしまいませんか？自分なんかは、本でもない限りすぐに注意が散漫になってしまいます。

そこで、長文になってしまう出だしなどを会話形式にしてみましょう。読みやすくなり、内容も頭に入ってきやすくなります。

吹き出しの新規作成

まずは新規作成から解説していきます。

WordPressのダッシュボードを開き、「Cocoon設定」→「吹き出し」を選択し、画面の上のほうにある「新規作成」をクリックすると上の画像のような画面になります。

「タイトル」は、作った吹き出しを実際に選択する際に表示される文言です。

記事執筆中の画像です。行の右にある＋ボタンをクリックして「吹き出し」を選択すると、記事内に吹き出しが設置できます。

吹き出しを設置すると、「ブロック」で吹き出しの選択やカスタマイズができます。「人物」で自分が作成した吹き出しが選択でき、そこに表示される文言がタイトルというわけです。

「名前」は、吹き出しに設定した画像の下に表示されます。

キャラクターの名前を設定すると良いでしょう。

「アイコン画像」では、吹き出しにするキャラクターの画像を選択します。吹き出しに使用するので、サイズ・容量共に小さめのもので大丈夫です。

「吹き出しスタイル」では、デフォルトの吹き出しデザインを決められます。

おそらくデフォルトで使う人が多いと思うので、デフォルトを選択しておくと良いです。

「人物位置」は、上の通りキャラクターを左右どちらに配置するかを決められます。会話形式でも、全員一緒の位置の人もいれば会話相手は自分とは反対の位置に設定している人もいます。しかし共通して言えることは、左配置のほうが読みやすいので配置をすべて一緒にする人は左固定をオススメします。

「アイコンスタイル」とは、アイコン画像の形を決められます。

好みで選択しましょう。

「TinyMCE」の「エディターのリストに表示」では、その吹き出しを選択欄に表示させるか否かを選べます。表示したい場合はチェックを入れ、非表示にしたい場合はチェックを外してください。ちなみに自分は、元から入っていた吹き出しキャラクターはすべて非表示にしています。

すべて入力・選択し終えたら、最後に「保存」をクリックします。

既存の吹き出しの編集

既に作成済の吹き出しを編集する方法を解説します。

WordPressのダッシュボードを開き、「Cocoon設定」→「吹き出し」を選択し、編集したい吹き出しの「編集」をクリックします。

あとは、新規作成の説明を参考にしてください。

まとめ

いかがでしたでしょうか。

会話形式は本当に便利で、自分でオリジナルキャラクターを作るとよりデザイン性も良くなり楽しくなります。

しかし複数のキャラクターを用意しないといけないという点で、自分も未だ会話形式はできていません。

キャラクターも、複数の表情を用意しておくとユーザーが感情移入してくれやすくなるため、最低でも喜怒哀楽や疑問・驚きあたりの表情は欲しいところですね。

絵を描くのが苦手な人はフリー素材を使ったり外注で依頼したりするのも良いかもしれません。Cocoonでもいくつかフリーで使えるキャラクターが吹き出しにあるので、自分のキャラクターができあがるまではそちらを使用しても良いと思います。

ブロトピ：ブログ更新通知をどうぞ！ブロトピ：今日のブログ更新ブロトピ：ブログ更新しました！ブロトピ：ブログを更新しました！ブロトピ：こんな記事書きました！