文章の読みやすさ向上のために
ワードプレス初心者だった頃。
ひたすら文章ばかり打っていて、
文章の読みやすさは二の次になっていました。
![少し前の自分](https://farmingfamily.blog/wp-content/themes/cocoon-master/images/b-woman.png)
見やすさを改善するために
吹き出しを付けてみたい!
と思っても、やり方が分かりません。
![沼の主](https://farmingfamily.blog/wp-content/uploads/2021/07/沼の主-e1626597904348.jpg)
ブログを運営している友達もいないので、
教えてくれる人もいません。
ブログの作り方サイトを読みあさっては、
あっという間に時間が過ぎていく…
そんな毎日を過ごしていました。
このブログでは当時の私がつまづいたことを中心に、
1つずつ解説記事を載せています。
慣れてしまえば
数秒でサクッとこなせるようになります。
同じ悩みを抱えている方の
お役に立てたら嬉しいです。
![沼の主](https://farmingfamily.blog/wp-content/uploads/2021/07/沼の主-e1626597904348.jpg)
今回はこんな吹き出しの作り方を解説しています!
では、早速作っていきましょう!
吹き出しブロックとは
最初の設定では、このような男性の顔で作ることができます。
![](https://farmingfamily.blog/wp-content/themes/cocoon-master/images/man.png)
はじめまして!
文章の途中に織り交ぜて使うことで、
気持ちを表現するときに使えます。
吹き出しを作ることで、
ブログの表情が一気に豊かになり、
読みやすくなりますね。
この男性の顔の部分を変えることで、
嬉しいこと、悲しいこと、ダークな一面など
様々な感情を表現することができます。
吹き出しはテンプレート化することで
使いやすくすることができます。
一度設定するだけで
次回からは簡単に呼び出すことができるので
とても便利です!
Cocoon(コクーン)での設定
こちらのブログは
Cocoon(コクーン)を使って製作しています。
WordPressテーマによって
作成方法が多少異なるかもしれません。
Cocoonを利用中の方は参考にしてみてください。
![沼の主](https://farmingfamily.blog/wp-content/uploads/2021/07/沼の主-e1626597904348.jpg)
Cocoonは無料&初心者向けで使いやすいです。
初めてのブログ作りにオススメのテーマです!
吹き出しをブログに付ける方法
いつも通り文章を入力します。
改行した時に右側に出てくる
黒い四角の+マークをクリックします。
「吹き出し」を選んでクリックします。
(すぐ出てこない場合は「すべて表示」をクリックして
下にスクロールしてみましょう。
使ったことがない場合は、結構下にあるかもしれません)
![ここに名前が入ります](https://farmingfamily.blog/wp-content/themes/cocoon-master/images/man.png)
ここに文字を入力します
吹き出しの中に言葉を入力します。
必要に応じて、吹き出しの名前を入れましょう。
![沼の主](https://farmingfamily.blog/wp-content/uploads/2021/07/沼の主-e1626597904348.jpg)
未入力でもOKです
あとは改行して、普通に文章を書いていけばOKです!
![沼の主](https://farmingfamily.blog/wp-content/uploads/2021/07/沼の主-e1626597904348.jpg)
文章を書き終わったら
関係ない他の行をクリックすれば
吹き出しから抜け出せます。
これで基本の吹き出しが作れるようになります!
吹き出しの表情を変更する方法
初期設定では上のように男性の画像が出てきます。
Cocoonでは性別や表情を
いくつかの選択肢から
選ぶことができます。
![](https://farmingfamily.blog/wp-content/themes/cocoon-master/images/man.png)
表情の変更方法を見てみましょう。
改行の状態で黒い四角の+マークを押し、
「吹き出し」を選択して空欄の吹き出しを作ります。
画面の右側に「投稿」「ブロック」などの
選択肢が出てきます。
出ていなければ
「下書き保存」「プレビュー」「公開」の隣にある
「設定」という歯車のマークをクリックすると
出てくるはずです。
「ブロック」を選択します。
変更したい吹き出しを選択した状態で
「ブロック」を見てみましょう。
上部が「吹き出し」となっており、
下にスクロールすることで
吹き出しの内容を細かく変更することができます。
「スタイル設定」の一番上が
「人物」となっており、
右の↓で選択することができます。
【選択肢】
「男性」「女性」「ビジネスマン」「ビジネスウーマン」「悩むおじさん」「悩むおばさん」「男性医師」「女性医師」「どや顔男性」「どや顔女性」
下に進むと「吹き出しスタイル」があります。
「デフォルト」が基本の形です。
![](https://farmingfamily.blog/wp-content/themes/cocoon-master/images/b-man.png)
こちらがデフォルト
(ビジネスマン)
![](https://farmingfamily.blog/wp-content/themes/cocoon-master/images/ojisan.png)
こちらがフラット
(悩むおじさん)
![](https://farmingfamily.blog/wp-content/themes/cocoon-master/images/doctor.png)
こちらがLINE風
(男性医師)
アイコンスタイルを「四角(枠線あり)」にしています
![](https://farmingfamily.blog/wp-content/themes/cocoon-master/images/doya-man.png)
こちらが考え事
(どや顔男性)
(どや顔男性、
たくらんでそうな悪い顔してますね…(笑))
会話を表現する時は
登場人物ごとに右、左と動きがあると
会話にテンポが生まれます。
![沼の主](https://farmingfamily.blog/wp-content/uploads/2021/07/沼の主-e1626597904348.jpg)
画面のバランスを考えながら
上手に使いましょう。
「アイコンスタイル」で
「丸」と「四角」、
「枠線あり」と「枠線なし」が選べます。
下にスクロールを進めると、
吹き出しの背景色や文字の色も選べます。
好きな色を自由に選んでみてください。
![沼の主](https://farmingfamily.blog/wp-content/uploads/2021/07/沼の主-e1626597904348.jpg)
次に、オリジナルキャラクターを
吹き出しに設定してみましょう!
オリジナルキャラクターを吹き出しに設定する方法
オリジナルキャラクターをお持ちの方は、
吹き出しの画像を変更してみましょう。
私はイラストは苦手なので
ココナラ![](https://www17.a8.net/0.gif?a8mat=3N1ULI+247I7M+2PEO+NTJWY)
でお願いして作ってもらいました!(1000円~)
![](https://www19.a8.net/0.gif?a8mat=3N1ULI+247I7M+2PEO+O720X)
オリジナルキャラを作ると愛着が湧き、
ブログのやる気もUPしますよ!
作り方
ワードプレスにログインします。
右の「Cocoon設定」から
「吹き出し」をクリックします。
上部の「新規追加」をクリックします。
「タイトル」「名前」を入力します。
「タイトル」:管理用のタイトルなので、自分で判断できればOK
「名前」:アイコンの下に表示されることになる名前
(このサイトでは「沼の主」と表示されている部分)
「アイコン選択」の隣の
「選択」ボタンをクリック。
該当するオリジナル画像を指定します。
![沼の主](https://farmingfamily.blog/wp-content/uploads/2021/07/沼の主-e1626597904348.jpg)
丸の中に入れなければならないので、
160px以上の正方形画像を選びましょう。
「吹き出しスタイル」
「人物位置」
「アイコンスタイル」は
必要があれば変更してください。
(詳しくは1つ前の章
「吹き出しの表情を変更する方法」で説明しています)
最後に一番下の
青い「保存」ボタンを押せば完了です!
あとは、ブログ作成時に
空白の行にマウスを持っていく
→右の黒い四角の+マークが出たらクリック
→「吹き出し」
→右の「人物」からオリジナルキャラクターを選択
という流れで
オリジナルの吹き出しを呼び出すことができます。
![沼の主](https://farmingfamily.blog/wp-content/uploads/2021/07/沼の主-e1626597904348.jpg)
これで吹き出しを
数秒で出せるようになります!
私もまだまだブログ初心者です。
オリジナルキャラクターはあるものの、
まだ1つの表情しかありません。
ゆくゆくは、オリジナルキャラクターに
喜怒哀楽の表情を持たせたり、
新しいキャラクターを増やしても
楽しいだろうな~と、妄想しています♪
少しずつWordPressの使い方を学んで、
色々なことができるように
これからも一緒に頑張っていきましょう!
関連記事
![](https://farmingfamily.blog/wp-content/uploads/2021/09/リンクのつけ方-1-160x90.png)
![](https://farmingfamily.blog/wp-content/uploads/2021/09/サイトアイコンファビコン-1-160x90.png)
オリジナルイラストはココナラで作ってもらいました。
![](https://www18.a8.net/0.gif?a8mat=3N1ULI+247I7M+2PEO+O3MKH)
コメント