【Cocoon】吹き出しの基本的な使い方/右に変更など【初心者向け】

Cocoon吹き出しの使い方Cocoon

Cocoonを使っているけど、吹き出しの設定方法や使い方がわからない

本記事のテーマはまさに上の吹き出しに関する記事です。

吹き出しはあなたのブログを個性的に見せてくれますし、文字ばかりの記事より間違いなく読まれる記事にしてくれます。

  • 吹き出し画像の準備
  • 吹き出しの設定方法
  • ブロックエディタGutenbergグーテンベルクにおける吹き出しの使い方

これらを実際に私のブログ画像を確認しながら設定していきます。今回は峠のアイコンを実際に吹き出しにしていきます。

▼峠のアイコン▼

では早速本題に入っていきましょう!

▼Cocoonにはまだあなたの知らないブロックがある▼

吹き出し用の画像の準備

既に使いたい画像が決まっている方は読み飛ばしていただいて構いません。

まずは吹き出し用の画像を準備します。画像を選ぶポイントは正方形で160px~200pxくらいのものが丁度いいです。

で、画像準備の方法は下のような方法があげられます!

  • 画像素材サイトから手に入れる
  • ココナラでオリジナルアイコンを作成依頼する
  • 自分で描く

画像素材サイトから手に入れる

画像素材サイトは有料だったり無料だったりといろいろと選択肢があります。

▼僕が紹介しているサイト▼

詳細については参考記事ブログの画像はどこから選べばいいのか?おすすめのフリー画像素材サイト7選をご覧ください。

一押しはシャッターストックですかね。

この猫のアイコンの素材もシャッターストックからダウンロードしました

ココナラでオリジナルアイコンを作成依頼する

ココナラっていうのは「知識・スキル・経験」など、みんなの得意を気軽に売り買いできるスキルマーケットのこと。

アイコンかきますよーって人がめっちゃたくさんいるんで、気に入った絵柄の人に依頼をかけます。

僕はプロフィール画像をココナラで作ってもらいました。どんな画像にしたいのかリクエストして、下絵もらってちょっと調整入れてすぐ納品。

1000円ほどで個性あふれる画像を描いてもらえます!大満足まちがいなし

登録は無料なので、とりあえず登録してどんなアイコンが作れるか見るだけでも価値はあると思いますよ。

ココナラをチェック

自分で描く

僕は描けませんが、あなたに絵心えごころがあるのならば一番個性が出せて手っ取り早いのは自分で描くことです。

おしゃれでかわいくてかっこいいアイコンを描いてください!

吹き出しの設定方法

吹き出しに使いたい画像が決まったところで、その画像を設定していきましょう。

まずはワードプレスの管理画面からCocoon設定吹き出しと進んでください。

そしたら新規追加をぽちっと

そうするとタイトルとか名前を入力するような画面が出ますのでそれぞれ設定して、最後に保存です。

最後の項目のTinyMCEのエディターのリストに表示って奴だけ必ずチェックしましょう。

ほかの項目についてはあとで記事編集画面で変更できるので、深く悩む必要はありません。

保存が完了すると下の画像のような感じで「吹き出しを新規作成しました。」となります。

これで設定は完了です。

吹き出しの使い方(ブロックエディタ)

いよいよ使い方に入っていきます。吹き出しブロックの出し方は記事編集画面左上のブロックの追加(⊕)Cocoonブロック吹き出しです。

するとこんな吹き出しが出ます

サンプルの人が出ると思います

そしたら適当にこの吹き出しブロックを選択してください。選択できていれば画面右側に吹き出しの編集画面が表示されます

右側の表示がない!って人は編集画面右上の公開するボタンの右となり、歯車(⚙)ボタンを押してみてください

そしたら、順番に吹き出しの詳細を決めていきましょう

まずは人物をさっき作った「とうげ」にします
吹き出しスタイルはデフォルト
人物位置は左
アイコンスタイルは丸(枠線あり)
吹き出し色設定は背景・文字・ボーダー変更なし

これで終了です!そしたら吹き出しの名前(前項の設定で登録してたら記入されてます。別に未入力でもOK)とセリフを入力しましょう

とうげ
とうげ

あなたも吹き出しできましたか?

チェックポイント

オプション設定では吹き出しの画像自体を反転させることはできません。つまり、左を向いているとうげは右を向かすということはできないです。

とうげを右に向かせたいときは、画像のデータを左右反転して右向きの画像を作ってから、右向きの画像を吹き出しの設定で新規追加する必要があります。

吹き出しでブログに個性を出そう

本記事では【Cocoon】吹き出しの基本的な使い方/右に変更など【初心者向け】

ということで吹き出しの基本を詳しくお伝えしてきました。吹き出しでやりたいことはだいたい網羅もうらできたんではないかと思います。

やったぜ!

吹き出しは本文のアクセントに最適です。文字文字してるときちゃいますからね。

ただ、長セリフは読みづらいのであまりおすすめはしません。あくまでもセリフは本文のアクセントで、強調したり息抜き程度のイメージで使うといいですよ。

吹き出しで個性を出して、あなたらしい記事を作ってくださいね

僕の吹き出しはほめてもらいました!
▼Cocoonにはまだあなたの知らないブロックがある▼

Cocoon関連記事

本記事以外にもCocoonに関する記事を書いています。そちらもどうぞご覧になってください。

Cocoon歴1ヶ月くらいの人向け

【Cocoon】ボタンの使い方が余裕でわかるようになる【ブロックエディタ】
【Cocoon】スライドショーを設定する方法まとめ
【Cocoon】アイキャッチ画像サイズを統一して揃える設定方法
【Cocoon】アフィリエイト広告の貼り方を始めから丁寧に【解説】
【Cocoon】アドセンス広告の貼り方を始めから丁寧に【解説】
Cocoonスキン一覧まとめ!カスタマイズなしでもおしゃれに決まる
【Cocoonスキン】おすすめ4選!とにかくブログをいい感じにしたい
【Cocoon】固定ページを一覧表示させる方法【ヘッダー/フッターほか】
【Cocoon】記事の書き方!投稿画面の使い方を画像たっぷり丁寧に解説【初心者向け】
【Cocoon】パンくずリストを投稿/カテゴリー/固定の各ページに設置する方法
Cocoonブロック一覧!全機能まとめ【初心者向け】
【Cocoon】お問い合わせフォームの設置方法を初心者向けに画像たっぷりで説明する
【Cocoon】目次が表示されない⁉作り方完全解説
【Cocoon】投稿画面ツールバー機能一覧|文字色・ルビほか【初心者向け】
【Cocoon】サイドバーの基本的な使い方【初心者向け】
【Cocoon】吹き出しの基本的な使い方/右に変更など【初心者向け】

Cocoon歴半年くらいの人向け

【Cocoon】ショートコードの使い方!便利さをマジで知ってもらいたい
【Cocoon】Twitter(ツイッター)埋め込みは秒でできる
【Cocoon】テーブル/表を作成する方法を丁寧に解説(ブロックエディタ)
【Cocoon】行間と段落の間隔を調整する方法【初心者向け】細部にこだわろう
【Cocoon】トップページがボタン1つでサイト型にできるようになった【衝撃】
【Cocoon】カスタマイズまとめ!初心者でもわかりやすく解説
【Cocoon】リスト(箇条書き)をボックスに入れる超簡単な方法【カスタマイズ不要】
【Cocoon】ブログカードの基本的な使い方【初心者向け】
【Cocoon】サイドバーで目次をスクロール追従させる方法【初心者向け】

Cocoon歴がもっと長い人向け

【Cocoon】サイドバーカスタマイズ!カテゴリーのボックスメニューは意外と難しくない
【Cocoon】ブログカードカスタマイズ「続きを読む」を入れる/タイトルのみにする!
【Cocoon】目次カスタマイズ‼見やすくシンプルおしゃれにしよう【CSSコピペでOK】
【Cocoon】スマホ表示簡単カスタマイズ‼ハンバーガーメニューを固定追従させる

コメント

  1. […] 【Cocoon】吹き出しの基本的な使い方/右に変更など【初心者向け】Cocoonを使… […]

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