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