こんにちは、さこっしーです。
この記事を見ているということは、吹き出しの使い方がよく分からない方だと思います。
なぜなら、僕も吹き出しの使い方が分からず、めちゃくちゃ調べたからです。
そこで今回は、吹き出しの基本的な使い方についてご紹介していきたいと思います。
僕は、Cocoonユーザーで、Cocoonしか使ったことがないので、Cocoonでの方法についての解説になります。
吹き出し用の画像の準備
まずは吹き出し用のアイコン画像を準備します。
画像を選ぶポイントは正方形で160px~200pxくらいのものがいいです。
画像準備の方法は、下記のような方法があります。
- 画像素材サイトから手に入れる
- ココナラでオリジナルアイコンを作成依頼する
画像素材サイトから手に入れる
画像素材サイトは、無料と有料さまざまな選択肢があります。
ココナラでオリジナルアイコンを作成依頼
ココナラというのは「知識・スキル・経験」など、みんなそれぞれの得意を気軽に売り買いできるスキルマーケットです。
アイコンかきますよーという人がたくさんいるので、気に入った絵柄の人に依頼をします。
ちなみに、僕のキャラ『さこっしー』は『ココナラ』というサイトで作成してもらいました。
どんな画像にしたいのかリクエストして、下絵をもらってちょっと調整入れてすぐ納品。
低料金でクオリティの高いアイコンを作成してもらえるので、個人的に超オススメです。
吹き出し作成
それでは、実際に吹き出しを作成してみましょう。
まず、WordPress管理画面左メニューの『Cocoon設定』→『吹き出し』をクリックします。
![](https://sakossy.com/wp-content/uploads/2021/05/1312c588bb90636f4a76a65ee9b6242e.png)
吹き出し一覧のページになるので『新規作成』をクリックします。
![](https://sakossy.com/wp-content/uploads/2021/05/c7d2332b106f5835342ccb3926682716.png)
吹き出しの新規作成ページに移動するので、タイトルやアイコンなどを入力します。
![](https://sakossy.com/wp-content/uploads/2021/05/f83517ff0ead0957b5c29803fa307e8e.png)
設定する項目は『タイトル』『名前』『アイコン画像』の3つで、他の項目は、デフォルトのままでOKです。
![](https://sakossy.com/wp-content/uploads/2021/05/0dd91761d53ba1060bb1b8de6311df5d.png)
設定が終わったら下にスクロールして、『保存』をクリックしましょう。
![](https://sakossy.com/wp-content/uploads/2021/05/14774726202a3fb38fbcc29da5da39ee.png)
保存が完了すると、下記のように「吹き出しを新規作成しました。」と表示されるので、これで設定は完了です。
![](https://sakossy.com/wp-content/uploads/2021/05/28588c46171f0b611860db6adbe06395.png)
吹き出しの使い方
それでは、使い方に入っていきます。
吹き出しブロックの出し方は、記事編集画面左上、もしくは右下の『ブロックの追加(⊕)』→『Cocoonブロック』→『吹き出し』の順にクリックしましょう。
![](https://sakossy.com/wp-content/uploads/2021/05/65f39f3c19f0f3672a202af06b0cd8cb.png)
すると、下記のような吹き出しが出てきます。
![](https://sakossy.com/wp-content/uploads/2021/05/a0232b6f8f6b6a7bc89b91b2d733f908.png)
つぎに、この吹き出しブロックを選択しましょう。
選択できていれば、画面右側に吹き出しのスタイル設定画面が表示されます。
![](https://sakossy.com/wp-content/uploads/2021/05/e0452830297d3e3cc071c282699dccb0.png)
それでは、順番に吹き出しを設定していきましょう。
まず『人物』を、さきほど作成した『さこっしー01』を選択します。
![](https://sakossy.com/wp-content/uploads/2021/05/406a2b44928a2c85b25948075ddeb6fe.png)
『吹き出しスタイル』は、『デフォルト』でOKです。
![](https://sakossy.com/wp-content/uploads/2021/05/cebacf6d171bd97a0eee3ccf09b18901.png)
『人物位置』は、『左』でOKです。
![](https://sakossy.com/wp-content/uploads/2021/05/f3447f52727d23be95c53914bc3ef71c.png)
『アイコンスタイル』は、『丸(枠線あり)』で。
![](https://sakossy.com/wp-content/uploads/2021/05/c479f1bc55d5ffb4907689f58326512f.png)
『吹き出し色設定』は、『背景色』『文字色』『ボーダー色』そのままでOKです。
![](https://sakossy.com/wp-content/uploads/2021/05/ae5a4dab28b1a11c7aaa6977eb19cc77.png)
これで、設定完了です。
吹き出しの名前とセリフを入力してみましょう。
![](https://sakossy.com/wp-content/uploads/2021/05/b13be0f73b1b9bc5a437de07143e696e.png)
![](https://sakossy.com/wp-content/uploads/2021/05/IMG_0841.png)
思ったより、カンタンだったね!!
まとめ
今回は【Cocoon】吹き出しの基本的な使い方【初心者向け】をご紹介しました。
ということで吹き出しの基本を詳しくお伝えしてきました。
吹き出しでやりたい基本的なことは、理解できたんではないかと思います。
![姉ちゃん](https://sakossy.com/wp-content/uploads/2021/05/IMG_0846.png)
わかった〜。
ありがとう!!
吹き出しは、使い勝手がいいので、今は使ってなくても覚えておいて損はないです。
吹き出しを使いこなして、ブログを楽しんでいきましょう。
![さこっしー](https://sakossy.com/wp-content/uploads/2021/05/IMG_0842.png)
よっしゃ〜
これから使いまくるぜ!!
ということで、今回は以上となります。
最後まで読んでいただき、ありがとうございました。
コメント