11月29日18時まで、エックスサーバーで「独自ドメインプレゼントキャンペーン」!更新料金も無料!サーバー新規開設が条件です。

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

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

rawpixelによるPixabayからの画像

初期設定で、すでに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ブロック、吹き出し

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

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

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

おわりに

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

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

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

いいことだらけ!

いくみ
いくみ

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

コメント

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