Cocoonを使っているけど、吹き出しの設定方法や使い方がわからない
本記事のテーマはまさに上の吹き出しに関する記事です。
吹き出しはあなたのブログを個性的に見せてくれますし、文字ばかりの記事より間違いなく読まれる記事にしてくれます。
- 吹き出し画像の準備
- 吹き出しの設定方法
- ブロックエディタ(Gutenberg)における吹き出しの使い方
これらを実際に私のブログ画像を確認しながら設定していきます。今回は峠のアイコンを実際に吹き出しにしていきます。簡単にあなた好みにカスタマイズできますよ。
では早速本題に入っていきましょう!
吹き出し用の画像の準備
まずは吹き出し用の画像を準備します。画像を選ぶポイントは正方形で160px~200pxくらいのものが丁度いいです。
で、画像準備の方法は下のような方法があげられます!
- 画像素材サイトから手に入れる
- ココナラでオリジナルアイコンを作成依頼する
- 自分で描く
画像素材サイトから手に入れる
画像素材サイトは有料だったり無料だったりといろいろと選択肢があります。
詳細については参考記事ブログの画像はどこから選べばいいのか?おすすめのフリー画像素材サイト8選をご覧ください。
一押しはシャッターストックですかね。
この猫のアイコンの素材もシャッターストックからダウンロードしました
ココナラでオリジナルアイコンを作成依頼する
ココナラっていうのは「知識・スキル・経験」など、みんなの得意を気軽に売り買いできるスキルマーケットのこと。
アイコンかきますよーって人がめっちゃたくさんいるんで、気に入った絵柄の人に依頼をかけます。
僕はプロフィール画像をココナラで作ってもらいました。どんな画像にしたいのかリクエストして、下絵もらってちょっと調整入れてすぐ納品。
1000円ほどで個性あふれる画像を描いてもらえます!大満足まちがいなし
登録は無料なので、とりあえず登録してどんなアイコンが作れるか見るだけでも価値はあると思いますよ。
自分で描く
僕は描けませんが、あなたに絵心があるのならば一番個性が出せて手っ取り早いのは自分で描くことです。
おしゃれでかわいくてかっこいいアイコンを描いてください!
吹き出しの設定方法
吹き出しに使いたい画像が決まったところで、その画像を設定していきましょう。
まずはワードプレスの管理画面からCocoon設定→吹き出しと進んでください。
そしたら新規追加をぽちっと
そうするとタイトルとか名前を入力するような画面が出ますのでそれぞれ設定して、最後に保存です。
保存が完了すると下の画像のような感じで「吹き出しを新規作成しました。」となります。
これで設定は完了です。
吹き出しの使い方(ブロックエディタ)
いよいよ使い方に入っていきます。吹き出しブロックの出し方は記事編集画面左上のブロックの追加(⊕)→Cocoonブロック→吹き出しです。
するとこんな吹き出しが出ます
そしたら適当にこの吹き出しブロックを選択してください。選択できていれば画面右側に吹き出しの編集画面が表示されます
そしたら、順番に吹き出しの詳細を決めていきましょう
これで終了です!そしたら吹き出しの名前(前項の設定で登録してたら記入されてます。別に未入力でもOK)とセリフを入力しましょう
あなたも吹き出しできましたか?
吹き出しでブログに個性を出そう
本記事では【Cocoon】吹き出しの基本的な使い方/右に変更など【初心者向け】
ということで吹き出しの基本を詳しくお伝えしてきました。吹き出しでやりたいことはだいたい網羅できたんではないかと思います。
やったぜ!
吹き出しは本文のアクセントに最適です。文字文字してると飽きちゃいますからね。
ただ、長セリフは読みづらいのであまりおすすめはしません。あくまでもセリフは本文のアクセントで、強調したり息抜き程度のイメージで使うといいですよ。
吹き出しで個性を出して、あなたらしい記事を作ってくださいね
Cocoonの「困った」を解決する記事
Cocoonの使い方
当ブログで一番読んでいただきたいのはCocoonの使い方の記事です。以下の点を参考書のように体系的にまとめているので、まずはここから読み始めるのをおすすめします。
記事の書き方
特に本記事のように、記事を書くときに使うものについては下の記事で取りまとめています。読めばあなたの記事の幅が広がることでしょう。
あわせて読みたい【Cocoon】記事の書き方!投稿画面の使い方を画像たっぷり丁寧に解説【初心者向け】
外観・デザインをカスタマイズ
特に本記事のようにブログの見た目をカスタマイズするのに使える記事は下記でまとめています。ブログをあなたらしくするためには必見です。
あわせて読みたい【Cocoon】デザインを整える簡単おすすめカスタマイズまとめ
コメント
[…] 【Cocoon】吹き出しの基本的な使い方/右に変更など【初心者向け】Cocoonを使… […]
とっても分かりやすくて、簡単に設定できました!
ありがとうございます^^
ブログを参考にしてくださりありがとうございました!