こんにちは！ふくちでございます。
私はWordPressの無料テーマCocoonのユーザーです
WordPressはたくさん機能があるけど、使いこなせてないな～
機能がしっかり使いこなせれば、ブログの表現の幅もアップしますよね。
そこで本日は、
WordPressの無料テーマCocoonを利用した「吹き出し」の作り方を画像を用いてわかりやすく説明していきます！
吹き出しがあると親しみもわいて、サイトの見栄えががグッと上がりますよね！
ブログ運営を始めたばかりの頃は、わたしも吹き出しの作り方がわからず、自分で吹き出しの画像を作って貼り付けていました(笑)
そんな過去の自分でもわかるくらい丁寧に説明していきますので、是非最後まで見ていって下さいね♪
初心者の方でもあっという間に使えるようになるよ！
どんどん使っちゃおう～！
それでは、早速解説に入っていきましょう！
Cocoonの吹き出しの使い方
Cocoonにあらかじめ設定されているデフォルト画像での吹き出しの利用方法です。
こんな感じのふき出しだよ！
この吹き出しの利用方法を説明します。
今回はブロックエディタでの利用方法ですが、ブログ初心者のCocoonユーザーの方はほとんどブロックエディタを利用していると思いますので、気にせず進んでください。
【手順】
１．吹き出しを入れたいところで「＋（ブロック選択）」をクリック
２．選択画面が表示され検索窓に「吹き出し」と入れます。
３．吹き出しマーク（下に吹き出し）が表示されたらクリックします
すると下記のようなイラストと吹き出しが現れます。
４．画像や吹き出しを自分好みにカスタマイズします。
画面右上の「設定（歯車マーク）」をクリックし、ブロックを選択
吹き出しのオプション変更画面が開きます。
下記の順序で設定しましょう。
①人物 → プルダウンから設定（もとから8種類の画像が用意されています）
②吹き出しスタイル → デフォルト、フラット、LINE風、考え事の4種類から選択
③人物位置 → 左右の位置が選べます
④アイコンスタイル → 四角（枠線あり・なし） 〇（枠線あり・なし）の4種類から選択
⑤背景色 →吹き出しの背景色が選択できます
⑥文字色 →吹き出し内の文字の色が選択できます
⑦ボーダー色 → 吹き出しの枠（外枠部分）の色が選択できます
吹き出しをクリックし好きな文字列を入力し、人物下に任意の名前を入力すれば完了です。
【吹き出しのオプション変更画面】
選ぶイラストや吹き出しのバリエーションでこんな違いが出せます↓
人物：女性
吹き出しスタイル：デフォルト
人物位置：右
背景色：薄いピンク
人物：男性
吹き出しスタイル：フラット
人物位置：左
人物：悩むおばさん
吹き出しスタイル：LINE風
人物位置：右
人物：男性医師
吹き出しスタイル：考え事
人物位置：左
文字色：ネイビー
ボーダー色：ネイビー
バージョンによりデフォルトのイラストが設定されていない場合は、下記Cocoonの公式ページからダウンロードが可能です。
外部の無料イラストを使用したCocoonの吹き出し設定方法
デフォルトの吹き出しではちょっと物足りない！という方には、フリーイラスト素材を使用する方法をお教えします。
フリーイラストとは、ブログなどの画像素材として、無料で利用できる画像のことです。
まずはフリーイラスト素材をダウンロードするのにオススメのサイトを2つご紹介します。
オススメのフリー素材サイト
どなたでも親しみやすい、フリーイラストのサイトです。
イラストACは多くのイラストレーターさんがイラストを投稿しているため、様々な雰囲気のイラストをダウンロードすることが出来ます。
１．いらすとや（かわいいフリー素材集 いらすとや (irasutoya.com)）
言わずと知れた「いらすとや」さんです。
多くのサイトやテレビ等でも利用されているので皆さんもご覧になった事があるでしょう。
シンプルで親しみやすいイラストでグッズ展開などもされています。
イラストがカテゴリごとに分けられており使いやすいですが、人気なだけに他のサイトとかぶってしまうのが唯一難点でしょうか。
２．イラストAC（無料イラストなら「イラストAC」 (ac-illust.com)）
こちらは色々なイラストレーターの方がイラストを提供しているので、様々なテイストのイラストが見つかります。
かわいらしいものからシンプルでおしゃれなものまで広くカバーされています。
ダウンロードには会員登録が必要です。
そのほか、一味違ったおしゃれでかわいいイラストで個性を出したい方は、是非こちらの記事も読んでみてください♪
ダウンロードした画像の設置方法
フリーサイトからダウンロードした画像を吹き出しに設置する方法をおしえます♪初めてでも2分あれば出来ますよ！
- フリー素材をパソコンのデスクトップまたは任意のフォルダに保存しておきます。
画像用のフォルダを作っておくと便利です。 - 吹き出しブロックを出して、画像をクリックします。
３．下記の画面が立ち上がります。
ファイルをアップロードをクリックし、ファイルを選択をクリックします。
４．設定したい画像を選択して開くを押します。
５．右の画面になります。
代替テキストは必ず入れましょう。
６．右下の選択をクリックすると人物の画像が選択したものに変わります。
【代替テキストの必要性】
何らかの理由で画像が見られない場合に表示されるテキストです。なるべく多くの人が見やすいサイトを作るために非常に重要ですので必ず設定しましょう。
この点もGoogleに評価され、検索順位にも影響を及ぼすことがあります。
よく使用するイラストは吹き出しのテンプレートを設定をしておけば簡単に利用できるようになります。
方法は次の「オリジナルのイラストを使用した吹き出しの設置方法」で解説します。
オリジナルのイラストを使用したCocoonの吹き出し設定方法
より自分自身の色を出したブログにするために、
「オリジナルのキャラクターイラストを吹き出しに使用したい！」
と思う方も多いと思います。
ちなみにふくちは自分でイラストを描いてるよーん！
オリジナルイラストの制作方法
イラストは自分で描いても良いですが、クオリティーにこだわるのであれば「ココナラ 
」を利用してみましょう。
ハイクオリティーかつ自分の要望も反映されたイラストが手ごろに手に入りますよ♪
会員登録は無料ですので、自分好みのイラストのアイコンやさんがあるか見るだけでも楽しいです。
自分でイラストを作ってみたい！という方は下記の記事をご覧ください♪
吹き出し用の画像のオススメサイズは180×180pxでの作成です。（正方形で作成し、余白を残しておくと切れずに枠内に収まります）
Cocoon 吹き出しテンプレートの設定方法
最後にCocoonの吹き出しのテンプレート設定方法を解説します。
良く使うキャラクターの吹き出しをテンプレートを設定しておけば作業がグッと早くなります。
１．Cocoon設定→吹き出しを選択
２．新規追加をクリック
３．各項目を入力
①タイトル
ブログには表示されないため自分がわかりやすいもので可
②名前
画像の下に表示される名前。
キャラクターの名前を入力
③アイコン画像
選択をクリックし、ファイルをアップロードから画像を選択
④吹き出しスタイル
4つのスタイルから好きなものを選択
⑤人物位置 右か左を選択
⑥アイコンスタイル 4種類から好きなものを選択
⑦エディターのリストに表示
デフォルトでチェックが入っています。ここにチェックがあると記事の作成画面で選択が出来るようになるのでこのままでOKです。
最後に保存をクリックしましょう。
すると画面上部に下記のようなデモ画面が出て来ますので確認しましょう。
登録した吹き出しのテンプレートの使い方を説明します。
記事の編集画面で吹き出しのブロックを選択します。
１．吹き出しを入れたいところで「＋」をクリック
２．選択画面が表示され検索窓に「吹き出し」と入れます。
３．吹き出しを選択します。
４．吹き出しのスタイル設定画面の人物のプルダウンに先ほど追加した「ふくち」が入っていますので、これをクリックします。
５．すると下記の吹き出しが出来ました！
よく使うものはこのようにテンプレートで設定しておくと作業が早くなりますよ♪
WordPressテーマ「Cocoon」吹き出しの使い方まとめ
本日はWordpressの無料テーマ「Cocoon」の吹き出しの使用方法を解説しました。
大切なポイントは下記の通り。
- Cocoonのデフォルト（最初から入っている）吹き出しの使い方
- 外部の無料イラストを使用した吹き出しの設定方法
- オリジナルのイラストを使用した吹き出しの設定方法
（吹き出しのテンプレートの設定方法）
吹き出しを利用してブログをもっと充実させてみてね♪
最後までお読みいただきありがとうございました。
