当記事では
WordPressの無料テーマCocoonを利用した「吹き出し」の利用方法を画像を用いてわかりやすく説明していきます。
私はWordPressの無料テーマCocoonのユーザーです 。
Cocoonはたくさん機能があるけど、使いこなせてないな～
そんな方も多いと思います。Cocoonは無料なのにとっても多機能！
そんな便利な機能…使いきれていないのはもったいないですよね。
ー忙しい現代人。好きな情報だけをつまみ食いするようになった時代。
文章ばかりの記事だと大事な部分がわかりにくく、別のサイトへ逃げられてしまうことも。
吹き出しなどを効果的に使用して読みやすい記事にしていきましょう♪
吹き出しがあると感情が伝わりやすく共感を得やすい上、サイトの見栄えもグッと上がります！
わたしもブログ運営を始めたばかりの頃は、吹き出しに憧れていましたが作り方がわからず、吹き出しそのものの画像を作って貼り付けていました(笑)
そんなポンコツすぎる過去の自分でもわかるくらい丁寧に説明していきます！
時短のコツも含めてお話しします♪初めてでもしっかり使いこなせるようになりますよ！
Cocoonデフォルトの吹き出しの使用方法 4STEP
まずは、Cocoonにあらかじめ設定されている、デフォルト画像の吹き出しの利用方法を説明します。
こんな感じのふき出しだよ！
手順は大きく４つ。
- ブロックの追加
- 吹き出しの検索
- 吹き出しを呼び出す
- 吹き出しのカスタマイズ
１つずつ画像付きで解説していきます♪ぜひ別画面でワードプレスを立ち上げてやってみてください。
１．吹き出しを入れたいところで「＋（ブロック選択）」をクリック
２．選択画面が表示され検索窓に「吹き出し」と入力。
３．吹き出しマーク（下に吹き出し）が表示されたらクリック。
すると下記のようなイラストと吹き出しが現れます。
バージョンによりデフォルトのイラストが設定されていない場合は、下記Cocoonの公式ページからダウンロードしておきましょう。
４．画像や吹き出しを自分好みにカスタマイズします。
吹き出しのブロックを選択するとオプション変更画面が開きます。
下記の順序で設定しましょう。
①人物
プルダウンから設定（もとから8種類の画像が用意されています）
②吹き出しスタイル
デフォルト、フラット、LINE風、考え事の4種類から選択
③人物位置
左右の位置が選べます
④アイコンスタイル
四角（枠線あり・なし） 〇（枠線あり・なし）の4種類から選択
⑤背景色
吹き出しの背景色を選択
⑥文字色
吹き出し内の文字の色が選択できます
⑦ボーダー色
吹き出しの枠（外枠部分）の色が選択できます
吹き出しをクリックし好きな文字列を入力し、人物下に任意の名前を入力すれば完了です。
【吹き出しのオプション変更画面】
選ぶイラストや吹き出しのバリエーションでさまざまな吹き出しが作成できます！
人物：女性
吹き出しスタイル：デフォルト
人物位置：右
背景色：薄いピンク
人物：男性医師
吹き出しスタイル：考え事
人物位置：左
文字色：ネイビー
ボーダー色：ネイビー
人物：悩むおばさん
吹き出しスタイル：LINE風
人物位置：右
外部の無料イラストを使用したCocoonの吹き出し設定方法
こんな感じの吹き出しだよ
デフォルトの吹き出しではちょっと物足りない！という方には、フリーイラスト素材を使用する方法がおすすめ。
フリーイラストとは、ブログなどの画像素材として無料で利用できる画像のことです。
吹き出しに適した画像をダウンロードしておきましょう。
Cocoon製作者のわいひらさんのおすすめの画像サイズは縦横各160px〜200pxの正方形
ダウンロードした画像はパソコンのデスクトップまたは任意のフォルダに保存しておきます。
画像用のフォルダを作っておくと便利です。
フリー画像ってどこで探せば良いの？？
吹き出しにもおすすめのおしゃれなフリーイラストサイトを集めてるので、よければ読んでみてね▼▼▼
＼管理人のふくちもフリーイラストサイトを運営してます／
こんな感じの表情豊かな女の子のアイコンもあるので吹き出しにも便利♪よければ覗いてみてください。
フリーサイトからダウンロードした画像を吹き出しに利用する方法は、先ほどの手順で吹き出しが呼び出せればとっても簡単！
- 吹き出しブロックを呼び出して、画像をクリックします。
２．下記の画面が立ち上がります。
ファイルをアップロードをクリックし、ファイルを選択をクリックします。
３．設定したい画像を選択して開くを押します。
４．右の画面になります。
代替テキストは必ず入れましょう。
５．右下の選択をクリックすると人物の画像が選択したものに変わります。
【代替テキストの必要性】
何らかの理由で画像が見られない場合に表示されるテキストです。なるべく多くの人が見やすいサイトを作るために非常に重要ですので必ず設定しましょう。
この点もGoogleに評価され、検索順位にも影響を及ぼすことがあります。
よく使用するイラストは吹き出しのテンプレートを設定をしておけば簡単に利用できるようになります。
方法は次後ほど「吹き出しテンプレートの設定方法」で解説します。覚えておくとめちゃくちゃ効率が上がりますよ！
オリジナルのイラストを使用したCocoonの吹き出し設定方法
より自分自身の色を出したブログにするためには、「オリジナルのイラスト」を使用するのもおすすめ。
方法としては、「自分で描く」「外注する」があります。
手始めに自分で描く場合はアイビスペイントがおすすめです。
スマホがあれば無料で利用できますよ！
＼即日作成可能！無料で作るオリジナルアイコン／
さらにクオリティーにこだわるのであれば「ココナラ 
」を利用してみましょう。
吹き出しに使えるアイコンイラストのサービスは1,000円〜利用することができます。
ココナラは新規登録の場合、紹介用のURLを利用すればココナラ内で利用できる1000ポイントがもらえます！
わたしの紹介用URLもご準備したので、よければ下記のボタンから登録してお得に吹き出し用の画像を依頼してくださいね♪
＼登録無料！1,000ポイントゲット／
＼おすすめのアイコンサービスはこちら／
【超時短！】Cocoon 吹き出しテンプレートの設定方法
最後にCocoonの吹き出しのテンプレート設定方法を解説します。
フリーイラストやオリジナルイラストの吹き出しをテンプレート化しておけば作業がグッと早くなります。
吹き出しテンプレートの作成方法
１．WordPressの編集画面で「Cocoon設定→吹き出し」を選択
２．新規追加をクリック
３．各項目を入力
①タイトル
ブログには表示されないため自分がわかりやすいもので可
②名前
画像の下に表示される名前。
キャラクターの名前を入力
③アイコン画像
選択をクリックし、ファイルをアップロードから画像を選択
④吹き出しスタイル
4つのスタイルから好きなものを選択
⑤人物位置 右か左を選択
⑥アイコンスタイル 4種類から好きなものを選択
⑦エディターのリストに表示
デフォルトでチェックが入っています。ここにチェックがあると記事の作成画面で選択が出来るようになるのでこのままでOKです。
最後に保存をクリックしましょう。
画面上部に下記のようなデモ画面が出て来ますので確認します。
記事の作成画面で吹き出しのテンプレートを呼び出す方法
登録した吹き出しのテンプレートの使い方を説明します。
記事の編集画面で吹き出しのブロックを選択します。
１．吹き出しを入れたいところで「＋」をクリック
２．選択画面が表示され検索窓に「吹き出し」と入れます。
３．吹き出しを選択。
４．吹き出しのスタイル設定画面の人物のプルダウンに先ほど追加した「ふくち」が入っていますので、これをクリックします。
よく使うものはこのようにテンプレートで設定しておくと作業が早くなりますよ♪
WordPressテーマ「Cocoon」吹き出しの使い方はとっても簡単！
本日はWordpressの無料テーマ「Cocoon」の吹き出しの使用方法を解説しました。
吹き出しの利用はたったの4STEP！
- ブロックの追加
- 吹き出しの検索
- 吹き出しを呼び出す
- 吹き出しのカスタマイズ
テンプレート化しておけばさらに効率がUPします！
使いこなしてユーザーの共感度や利便性を向上させましょう。
＼ブログの見た目をよりみやすく！／
