【Cocoon】吹き出しの基本的な使い方/右に変更など【設定方法】

Cocoon吹き出しの使い方 Cocoon

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

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

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

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

これらを実際に私のブログ画像を確認しながら設定していきます。今回は峠のアイコンを実際に吹き出しにしていきます。簡単にあなた好みにカスタマイズできますよ。

▼峠のアイコン▼
峠アイコン

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

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

吹き出し用の画像の準備

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ココナラをチェック

自分で描く

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

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

吹き出しの設定方法

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

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

Cocoon設定→吹き出し

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

新規追加

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

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

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

吹き出し設定

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

吹き出しを新規作成しました

これで設定は完了です。

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

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

吹き出しブロック

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

サンプルの人が出ると思います
吹き出しサンプル1

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

サイドバーに吹き出し編集画面

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

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

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

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

名前とセリフを入力
とうげ
とうげ

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

チェックポイント

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

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

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

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

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

やったぜ!

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

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

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

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

Cocoonの「困った」を解決する記事

Cocoonの使い方

当ブログで一番読んでいただきたいのはCocoonの使い方の記事です。以下の点を参考書のように体系的にまとめているので、まずはここから読み始めるのをおすすめします。

  • WordPressの初期設定
  • Cocoonのダウンロードとインストール
  • Cocoonの初期設定
  • 記事の書き方
  • カテゴリー・タグ・固定ページの作成
  • 外観・デザインの整え方
  • 収益化

記事の書き方

特に本記事のように、記事を書くときに使うものについては下の記事で取りまとめています。読めばあなたの記事の幅が広がることでしょう。
あわせて読みたい【Cocoon】記事の書き方!投稿画面の使い方を画像たっぷり丁寧に解説【初心者向け】

上記記事でまとめています

  • 記事作成の一連の流れ
  • 具体的な記事の書き方
  • リスト(箇条書き)の使い方
  • 吹き出しの使い方
  • ブログカードの使い方
  • テーブル(表)の使い方
  • 各種ボタンの使い方
  • ショートコードの使い方
  • しっておきたい投稿画面でよく使う機能

外観・デザインをカスタマイズ

特に本記事のようにブログの見た目をカスタマイズするのに使える記事は下記でまとめています。ブログをあなたらしくするためには必見です
あわせて読みたい【Cocoon】デザインを整える簡単おすすめカスタマイズまとめ

上記記事でまとめています

  • 吹き出し
  • フォント・文字サイズ
  • サイドバー
  • ファビコン(サイトアイコン)
  • ヘッダー
  • グローバルナビメニュー(ヘッダーメニュー)
  • Twitterシェア時に表示する画像の設定
  • 本文の幅・サイドバーの幅
  • トップページの表示形式
  • パンくずリスト
  • 行間と段落の間隔
  • 表(テーブル)
  • 目次
  • SNSシェアボタン・フォローボタン
  • Twitterの設置・連携
  • アイキャッチ画像
  • ブログカード
  • ヘッダー周りのアピール設定
  • フッター
  • モバイル(スマホ)表示メニュー
  • ボックスメニュー
  • 見出し
  • オリジナル画像の設定

コメント

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

  2. とっても分かりやすくて、簡単に設定できました!
    ありがとうございます^^

    • ブログを参考にしてくださりありがとうございました!