[Cocoon] 吹き出し画像サイズと設定・挿入手順

45-[Cocoon] 吹き出し画像サイズと設定・挿入手順
アイキャッチ画像は

rawpixelによるPixabayからの画像

Cocoonでは、すでに10種類の吹き出しが用意されています。

投稿画面から挿入して、すぐに利用できるようになっています。挿入手順は、目次の3番にあります。

いくみ
いくみ

自分で用意したアイコンを使いたいときの流れは以下のようになります。

順番に見ていきましょう!

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

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

「160px以上」の範囲ですが、わいひらさんのサイトで『160px~200pxぐらいの正方形のものがちょうど良いかと思います』とありましたので、その範囲内で準備すると良いですね。

画像サイズが違っても見た目は変わらないみたいです。以下で実験しました。

いくみ 160
いくみ 160

160 x 160 pixcelです。

いくみ
いくみ

194 x 194 pixcelです。

ちなみに私は、200を超えてしまっていたのが4つ程ありました。
一応、以下のサイズは支障なく使えています。

いくみ
いくみ

201 x 201 pixcelです。

いくみ
いくみ

212 x 212 pixcelです。

いくみ
いくみ

230 x 230 pixcelです。

いくみ
いくみ

同じく230 x 230 pixcelです。

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

アイコンは、私はパワーポイントで作りました。注文しても良いと思いますし、本当に多くの「フリー素材アイコン」もあるので、色々とみてみましょう!

小さいキャラを登場させたいとき

例えば、カタツムリ・ねずみ・アリなど、「小さい」というイメージを強調したいこともあるかと思います。

子どものアイコンなども、小さいほうが雰囲気が出ますね。

ものすご~く委縮しているのを表現したいときも効果的かと思います。

そういう時は、160 x 160 pixcelの画像内でアイコンを小さくして、余白部分を増やせばOKです。

娘

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

いくみ
いくみ

もうちょっと大きくするね。これはテストだからね。

娘がよく言うセリフです。チョット、小さくしすぎました★。

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

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

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

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

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

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

3.設定項目が7つありますね。

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

タイトル:ここにつけたタイトルが、投稿画面のドロップダウンリストに表示されます。

このタイトルを見て吹き出しを選ぶことになるので、笑顔の吹き出しは「笑顔」、怒っている吹き出しは「怒り」など、分かりやすいキーワードをいれるといいと思います。

更に、複数の表情を用意した方は、よく使う順で番号をつけるのがおススメです。

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

名前:吹き出しの下に表示される名前です。自分のアイコンにはライター名を入力しておくと良いでしょう(ライター名を覚えてもらうのは大切だと思います)。推奨は6文字以内です。自分以外のキャラは、未入力のままでも良いと思います。投稿画面で編集できるので、文脈に合わせて変更できます。

いくみ
いくみ

どうも。いくみです。

武者小路ゆりか
武者小路ゆりか

武者小路ゆりかです。

←名前が7文字以上になると、2行で表示されます。

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

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

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

いくみ
いくみ

デフォルトです。

いくみ
いくみ

フラットです。

LINE風は、「人物位置」が「左」だと、「デフォルト」と同じになります。

いくみ
いくみ

LINE風+左です。

いくみ
いくみ

LINE風+右です。

いくみ
いくみ

考え事です。

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

いくみ
いくみ

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

いくみ
いくみ

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

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

いくみ
いくみ

四角(枠線なし)です。

いくみ
いくみ

四角(枠線あり)です。

いくみ
いくみ

丸(枠線なし)です。

いくみ
いくみ

丸(枠線あり)です。

TinyMCE:ドロップダウンリストに表示させるかどうかの設定です。吹き出しの数が多くないならそのままで良いかと思います。全然使わないアイコンは、チェックを外して非表示にすると便利です。(ドロップダウンリストに載らないだけで、また設定を変えれば使えます。)

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

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

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

登録作業中に開いてあった投稿画面だと、吹き出しアイコン設定の結果が反映されないことがあります。吹き出しアイコンの設定結果を確認するときは、「新規投稿画面」か、開いてあった投稿画面を一度閉じてから、またそれを「新しく」開いて確認しましょう。

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

投稿画面を開きます。

1.新しいブロックで+アイコンをクリック。スクロールバーを下げて[Cocoonブロック]をクリック。

Cocoon吹き出しアイコン挿入手順

2.[吹き出し]を選択。

Cocoon吹き出しアイコン挿入手順、Cocoonブロック、吹き出し

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

以下のようになります。

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

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

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

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

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

おわりに

吹き出しを使うと、「おしゃべり」の実演ができますね。

自分の本音とか、率直な感想を書きたいときも、吹き出しにすると人間味が出て良いと思います。

読者の方に「語りかける」感じが普通文より増しますし、目立ちやすくもなります。

いいことだらけ!

いくみ
いくみ

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

コメント

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