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