【Cocoon】吹き出しアイコンの設定方法｜画像サイズ・設定手順

こんにちは。
さばちゃんです。

ブログの見た目や設定を少しずつ作りこんでいきたいと思い、現在勉強中です！
WordPressのテーマは現在「Cocoon」を使用しています。
無料でお手軽に使用できる上に、機能性にもデザイン性にも優れているため、使っている方や興味のある方も多いのではないでしょうか。

今回は、ブログ内でよく見かける「吹き出しアイコン」を設定していきたいと思います。

Cocoonデフォルトの「吹き出し」アイコン

Cocoonでは、デフォルトで「吹き出し機能」が用意されており、プラグインを使用せずに簡単に吹き出しを設定することができます。

①テキスト入力：吹き出し内に表示したいテキストを入力します。
②画像選択：デフォルトの画像以外にも、オリジナルの画像も選択可能です。
③名前入力：空欄にすると名前部分を非表示にすることもできます。

「吹き出し」のブロックを選択＞「スタイル設定」で、吹き出しの見た目の詳細を設定することができます。

また、Cocoon設定で、テンプレート登録することも可能です。（「３．吹き出しアイコンの登録方法」を参照してください。）

アイコン画像を用意する

吹き出し用のアイコンに使用する画像の「推奨サイズ」は、160pxから200pxの正方形です。
画像のデータ形式は、画質が良く透過処理も可能なPNGが一般的かと思います。

今回わたしは自分で画像を作成しましたが、難しい場合は、「フリー素材サイト」やココナラなどのアイコンイラストの依頼を利用しましょう。（自作の画像を使用する場合以外は、商用利用や加工の許諾範囲について、利用規約をしっかり確認しましょう。）

色々な場面に合わせて使えるように、表情パターン3種類と、話し相手のねこちゃんのイラストを用意しました！

吹き出しアイコンの登録方法

準備した画像を使って、吹き出しアイコンのテンプレートを新規登録します。

１．ダッシュボードを開いて、「Cocoon設定」>「吹き出し」を選択します。

２．一番上の「新規追加」をクリックします。

３．設定項目を入力して、吹き出しアイコンを新規登録します。
①タイトル：投稿画面で「吹き出し」ブロックを挿入時に、「人物」リストに表示される名前です。
②名前：吹き出しの下に表示されるテキストです。未入力の場合は「非表示」となります。
③アイコン画像：準備した画像を選択します。
④吹き出しスタイル/人物位置/アイコンスタイル：吹き出しの見た目を選択します。
⑤TinyMCE：「吹き出し」ブロックを挿入時の「人物」リストの表示/非表示を切り替えます。

※②～④は、投稿画面でも個別に再編集が可能です。

４．設定画面の最下部「保存」をクリックして完了です！

吹き出しアイコンをブログ記事内に配置する

１．新規ブロックの右端のプラスサインをクリックします。

２．「すべて表示」を選択すると、画面左に「ブロックインサーター」が展開されます。
　COCOONブロックのグループにある「吹き出し」を選択します。

３．画面右端に表示される「スタイル設定」で、吹き出しの見た目を選択します！

４．吹き出し内にテキストを入力して完成です！