【Cocoon】簡単!吹き出しの設定方法を丁寧に解説│カスタマイズ可能!

ブログ

ブログでよく見る吹き出しをやってみたい!

そんな人に向けて書いた記事です。

ブログを始めたばかりの頃、吹き出しにめっちゃ憧れますよね。私も憧れた人なのでとてもわかります。でも、導入したいけど…..吹き出しって難しそう(´・ω・`)そう思っている人もいるはず。

大丈夫!案外思っている以上に簡単にできちゃうよ!

しかも、吹き出しを設置するだけで、記事の質もアップして、めちゃくちゃ見やすくなるので導入しない選択肢はないですね!では、やっていきましょう!

 

設定方法

こんにちは

これをやっていきます!

 

Step1 アイコン画像を選ぼう!

まずは、アイコン画像を選びます

今回は、このクマをアイコンに使用して作っていきます。

 

 

Step2 吹き出しを編集しよう

準備できましたか?そしてら、自分のブログを開いてください。

今いるダッシュボードからCocoon設定 吹き出しをクリックします。

 

吹き出しをクリックしたらこの画面が出てきたと思います。

では、最初から設定されているテンプレートを変更していきます。オレンジの枠で囲ってある編集をクリックしてください!

 

Step3 タイトルをつけよう

編集をクリックしたらこの画面が出たと思います。

そしてら、他の吹き出しと混ざらないように「タイトル」をつけます。

あとあと設定できたけどどれだっけ?とならないために、自分が他の吹き出しと区別できるような名前をつけましょう。なんでも好きなタイトルをつけて大丈夫ですよ!

今回は、例で紹介しているので「例」とつけます。

 

Step4 アイコンを設定しよう

さっきつけたタイトルから少しスクロールしてみてください。そしたらアイコン画像と書いてある大きな画像を発見できるはずです。そしたら、アイコン画像の選択をクリックします。

 

そしたら上記の画像のような画面が表示されたと思います。

そしたら、真ん中にあるメディアライブラリからファイルをアップロードをクリックします。

アイコン画像にする画像をWordpressにアップロードします。

 

画像のアップロードが完了したら、アイコンにする画像を選択して画像の選択をクリックします。

クリックすると、アイコン画像に自分の選択した画像に変更されましたね!確認出来たら次に進みます。

 

一番下までスクロールして、保存をクリックします。吹き出しの細々した設定はここでおしまいです。ついに、記事の中に吹き出しを入れていきます。

 

Step5 記事に吹き出しを設定しよう

今いるCocoon設定から投稿 新規追加をクリックします。

 

吹き出しに入れたい言葉を入力してみてください。今回は、クマに「こんにちは」としゃべらせたいので「こんにちは」と入力します。入力できたら、入力した言葉を選択します。

 

選択したら、左端にある「吹き出し」をクリックして、自分がつけたタイトル名を選択します。

今回説明しているクマの吹き出しは「例」なので例を選択します。

こんにちは

吹き出しができました!完成です!お疲れさまでした。

 

カスタマイズ設定方法

吹き出しのカスタマイズを紹介します!是非自分のブログに合う吹き出しを作りましょう!

 

カスタマイズの設定は、まず「Cocoon設定 吹き出し」をクリックしてください。

 

そしたら、吹き出し一覧が表示されます。その中から、自分がカスタマイズしたい吹き出しを選んで編集をクリックしてください。

 

下にスクロールすると、画像のような選択画面が出てくると思います。カスタマイズは、ココの吹き出しスタイルや人物位置、アイコンスタイルを変更して「保存」するとできます。

吹き出しスタイル・人物位置・アイコンスタイルのカスタマイズのサンプルは下記で記してあるので、よかったら参考に見てください。

 

吹き出しスタイル

吹き出しのスタイルをカスタマイズできます

デフォルト

LINE風

フラット

考え事

人物位置

吹き出しの表示される位置を変更できます

に表示されるよ

に表示されるよ

アイコンスタイル

アイコンの周りをカスタマイズできます

 

まとめ

吹き出しを設定する方法を説明しました!

吹き出しは、見やすさと分かりやすさを格段にあげることが簡単にできます。

是非、ブログで活用してみてください!

ブログ
スポンサーリンク
miqreco
タイトルとURLをコピーしました