【Cocoon設定】吹き出しアイコンの画像サイズ・登録・挿入手順まとめ

【Cocoon設定】吹き出しアイコンの画像サイズ・登録・挿入手順まとめ
おしゃべり感覚♪

Cocoonでは、はじめから10種類の吹き出しが用意されていて、投稿画面からすぐに挿入できます。

既存の吹き出しを挿入する手順は目次3番でまとめています。

いくみ
いくみ

自分で用意したアイコンを使いたい!

そんな時の流れはこちら👇

画像の準備 → [吹き出し]オプションとして設定 → 投稿画面で挿入

この記事では、画像サイズの目安・設定の手順・投稿画面での使い方まで、初心者の方にもわかりやすく解説します!

画像の準備 ~ 160px以上の正方形

吹き出し用アイコンは「160px〜200pxの正方形」がおすすめです。
(参考:Cocoon公式より)

実際に私が使ってみたサイズはこちら👇。

いくみ 160
いくみ 160

160 x 160 pixcelです。
(公式推奨)

いくみ
いくみ

194 x 194 pixcelです。

いくみ
いくみ

201 x 201 pixcelです。

いくみ
いくみ

212 x 212 pixcelです。

いくみ
いくみ

230 x 230 pixcelです。

いくみ
いくみ

同じく230 x 230 pixcelです。

使えるので良かったです・・・!

200pxを少し超えても表示は安定していました。
無理にピッタリにしなくても、表示に支障はなさそうです♪。

小さなキャラを演出したいとき

例えば、カタツムリやアリ、子どもキャラなど、小ささを強調したいときはこうします。

アイコン画像自体は160×160のままで、キャラだけ小さく配置し、余白を広めに取る

これで、表示上「小さく見える」吹き出しが完成します♪。

娘

Mom!!! I’m a BIG girl now!

いくみ
いくみ

実際に娘アイコンを作ったとき、小さくしすぎて怒られました(笑)。

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

画像の準備ができたら、それを吹き出しアイコンとして登録します。

1.[Cocoon設定]>[吹き出し]をクリック。

Cocoon吹き出しアイコン設定手順

2.一番上の[新規追加]をクリック。

Cocoon吹き出しアイコン設定手順、新規追加

3.登録画面が表示されます。設定は7項目!

Cocoon吹き出しアイコン設定手順、設定項目の説明

タイトル:投稿画面で選ぶときに表示される名前(例:「いくみ 笑顔」など)。

タイトルを見て吹き出しを選ぶことになるので、分かりやすいキーワードをいれるといいと思います。
更に、複数の表情を用意した方は、よく使う順で番号をつけるのがおススメです。

Cocoon吹き出しアイコン設定手順、設定項目の説明、スタイル設定
登録済み吹き出し画像サンプル

名前:吹き出しの下に表示されるテキスト。自分のアイコンにはライター名を入力するといいですね。推奨は6文字以内。未入力のままでもOK。投稿画面でも簡単に編集できます。

いくみ
いくみ

どうも。いくみです。

武者小路さくら子
武者小路さくら子

武者小路さくら子です。

←名前が長くなると、2行で表示されます。

アイコン画像:[選択]をクリックして、準備した画像を選びます。

その下にある項目、吹き出しスタイル・人物位置・アイコンスタイルは、一番よく使いたいオプションを選んでおくと便利です。投稿画面でも自由に変更できますが、ここでの設定が初期設定になります。

吹き出しスタイルは4種類あります。

いくみ
いくみ

デフォルトです。

いくみ
いくみ

フラットです。

LINE風は、「人物位置」が「左」だと、「デフォルト」とほぼ同じになります。少し、線の太さが違いますね。

いくみ
いくみ

LINE風+左です。

いくみ
いくみ

LINE風+右です。

いくみ
いくみ

考え事です。

人物位置は「左」か「右」です。

いくみ
いくみ

デフォルトスタイルで、人物位置がです。

いくみ
いくみ

考え事スタイルで人物位置です。

アイコンスタイル:アイコン周りの枠の形と表示・非表示を選べます。

いくみ
いくみ

四角(枠線なし)です。

いくみ
いくみ

四角(枠線あり)です。

いくみ
いくみ

丸(枠線なし)です。

いくみ
いくみ

丸(枠線あり)です。

TinyMCE:投稿画面のリストに表示させるかどうかの設定。全然使わないアイコンは、非表示でもOKですね。(ドロップダウンリストに載らないだけで、また設定を変えれば使えます。)

4.一番下にある[保存]ボタンをクリック!

これを、必要回数繰り返します。

できたら、新しく投稿画面を開いて確認してみましょう。

投稿画面を「新しく開き直す」か、「新規投稿画面」で吹き出しアイコンが反映されます。

投稿画面でアイコンを挿入する手順

いくみ
いくみ

簡単です。投稿画面で「吹き出し」ブロックを選ぶだけ!

1.ブロックの右辺にプラスサインが表示されています。クリック。

以下のようになります。

WordPress ブロックメニューの選択

ここに、[吹き出し]メニューがリストされていたらクリック。無ければ、ブロックの検索ボックスに吹き出しと入力。メニューが表示されるのでクリック。

3.右サイドに吹き出しの[スタイル設定]が出ます。そこで、吹き出しやスタイルをお好みで選びます。

Cocoon吹き出しアイコン挿入手順、投稿画面でスタイル設定

4.中に文字を入力して完了です!

おわりに

吹き出しを使うと、“語りかける”ような記事が作れます。

自分の本音や感想を伝えやすく、人間味が出るのも良いところ。

アイコンと短文で、小休止的な効果もありますし、目立ちやすくもなるのもいいですね。

いいことだらけ!

いくみ
いくみ

Cocoonの名物機能、「吹き出し」の紹介でした!

アイキャッチ画像は

rawpixelによるPixabayからの画像

コメント

タイトルとURLをコピーしました