こんにちは、ゆんつです。
僕はブログのテーマにCocoonを使っています。
このCocoonの機能に「吹き出し」というアイコンに吹き出しをつけて、アイコンがしゃべっているように表現してくれる機能があります。
吹き出しを使うことで、アイコンから吹き出しが出てマンガのセリフのように表現することができ、上手に使えば説明などを会話形式で進めることができるので、文章で長々説明するよりも見る人を飽きさせず理解して貰いやすくなるという利点があります。
Cocoonにはあらかじめ吹き出し用のイラストが登録されているので、自分で画像を設定しなくてもすぐに使えます。
でも、せっかくなので自分が描いた絵をアイコンにしたいです。
ということで今日はCocoonを使って自分で作成したアイコンを登録し、吹き出しの機能を使ってみたいと思います。
アイコンの登録
こんな画像を自分で書きました。
推奨されている画像のサイズの160px～200pxの正方形なので200px×200pxとしました。
ファイルサイズは7.70KBなのですが、少しでも容量が小さいほうが見てくれる人に負担がかからないのでTinyPNGで圧縮しておきます。
圧縮によりファイルサイズが7.9KBが2.7KBになりました。
圧縮前 圧縮後 
約3分の1のサイズになりましたが、見た目はほとんど変わっていないと思います。
アイコンを登録します。
ダッシュボードから「Cocoon設定」→「吹き出し」
吹き出し画面で「新規追加」をクリック
すると設定画面に進むので、各項目を設定していきます。
タイトル
ビジュアルエディターで一覧から吹き出しのアイコンを選択する際タイトルにつけた五十音の順番で表示されます。
タイトルの頭文字を50音の後半にすると表示がずっと下の方になります。
ですので上の方に表示させたいなら[01]などの数字にしたりしてソートで上の方にくるようなタイトルをつける必要があります。
名前
吹き出しアイコンの下に表示される名前です
吹き出しスタイル
吹き出しの形が選べます。
デフォルト
フラット
セリフの背景に色が付きます
LINE風
デフォルトと同じように見えますが、こちらのほうがデフォルトに比べ線がすっきりしています。
考え事風
人物位置
アイコンを画面左に表示するか右に表示するかの選択です。
左
右
アイコンスタイル
アイコンの形を丸くするか四角くするか。
また、丸または四角にしたアイコンの周囲に枠線を付けるか付けないかを選択します。
TinyMCE
「ビジュアルエディターリストに表示」のチェックを外すとビジュアルエディターの吹き出し一覧に該当アイコンは表示されなくなります。
全ての項目の設定が完了したら「保存」をクリック。
すると登録したアイコンが画面上でどのように見えるかのデモを見ることが出来ます。
これで自分専用のアイコンを登録することが出来ました。
会話させてみよう
まずはビジュアルエディタで「吹き出し」クリックして一覧から使用したいアイコンを選択。
使用したいアイコンを選択すると、吹き出し付きのアイコンが出てくるので吹き出しの中を編集して自分の好きなセリフに変更します。
右側にはCocoonにデフォルトで登録されているうさぎのアイコンを設置し、こちらのセリフも変更します。
するとこんな感じでアイコン同士が会話をしているような感じになります。
こんな感じでアイコン同士を会話させれば文字だけで説明するよりも飽きないですし、読みやすく解りやすいです。
Q&A形式で文章を進めるとき等にピッタリですね。
これからは僕のブログでもちょくちょくこの吹き出しを使っていこうと思います。
それでは、またですー
コメント