ブログ

【Cocoon】わかりやすい吹き出し機能の使い方と設定方法

 

兼業ブロガーのしゅんセキです

私もはじめの頃、吹き出しの使い方がよく分からずメチャクチャ調べた経緯があります。

この記事では吹き出し機能の使い方をできる限り分かりやすくお伝えしていきたいと思います。

私の使っている以前使っていたワードプレステーマがCocoon(コクーン)ですのでコクーンでの解説になります。

吹き出し機能とは?

しゅんセキ
これが吹き出しになります
設定次第で反対に表示させたりもできますよ!
ピン子ちゃん

 

人物がしゃべっているように見えるこの枠が吹き出しです。

この吹き出し機能を使うと記事の内容がより伝わりやすくなるので自分でカスタマイズして使いたいですよね!

吹き出しのキャラクターをオリジナルにしたい方は

ココナラ」「SKIMA」などのサイトで作成して使ている方もいらっしゃいます!

 

吹き出しを設定しよう!

それではさっそく吹き出しを作ってみましょう!

まずは「Cocoon設定」「吹き出し」をクリックします。

Cocoon設定
Cocoon設定吹き出し

「新規追加」を選択し新しい吹き出しを追加します。

吹き出し一覧
吹き出し新規追加

するとこういった画面が表示されます

1つずつ解説していきましょう!

 

①タイトル

エディターにて表示される名前になります。

私の場合は「ネコ!マーク」といったように「登場人物」プラス「アクション」を名前に付けています。

そうすると吹き出しを使う時にわかりやすいです。

②名前

しゅんセキ
私の場合は「しゅんセキ」です

なお、名前を出したくない場合は未入力でオッケーです。

 

 

③アイコン画像

表示させるアイコンの画像を選択します。

「選択」のボタンをクリックすると下記の画像が出ます。

新しく画像を取り入れる時には「ファイルをアップロード」ファイルを選択」にて画像を選んでいきます。

ファイルアップロード
画像選択

今回はこのベロを出したネコちゃんの画像にしてみます。

画像を選択すると「メディアライブラリ」にアップロードされます。

画像を選択し右下にある「画像の選択」ボタンを押して完了です。

このボタンを押し忘れないようにしましょう!

アイコン画像選択

そうすると、下記のようにアイコン画像が選択された状態になります。

アイコン画像完了

④吹き出しスタイル

どういった吹き出しにするかを選択することができます。

  • デフォルト

  • フラット

  • LINE風

  • 考え事

のサンプルも一緒に張り付けておきます。

LINE風の場合のみ人物が右側の時だけ吹き出しスタイルが緑色になります※

吹き出しスタイル
吹き出しスタイルサンプル

⑤人物位置

アイコンの位置を左か右かを選ぶことができます。

これは設定した後でも実際使う時にブロック操作にて変更することが可能です

なお、「④吹き出しスタイル」「⑥アイコンスタイル」も同様に変更することが可能です。

⑥アイコンスタイル

アイコンの形や枠線をしていすることができます。

 

 

  • 四角(枠線なし)
  • 四角(枠線あり)
  • 丸(枠線なし)
  • 丸(枠線あり)

のサンプルも一緒に張り付けておきます。

アイコンスタイル
アイコンスタイルサンプル

最後に画面下にある「ビジュアルエディターのリストに表示」

チェックが入っているか確認して「保存」をクリックで吹き出しの登録は完了です。

エディターのリスト

実際に吹き出しを使ってみよう!

しゅんセキ
次は実際に記事内で使ってみましょう!
ピン子ちゃん
Gutenberg(グーテンベルグ)エディタークラシックエディターの両方で説明しましすね!

Gutenberg(グーテンベルグ)エディターの場合

「ブロックの追加」ボタンをクリックすると「吹き出し」のブロックが出るので選択します。

注意

もし、「吹き出し」の表示が見当たらない場合は「ブロックの検索」「吹き出し」と入力するか下にある「すべて表示」をクリックしてください。

すると、ブロック一覧が出るので「Cocoonブロック」内にある「吹き出し」を選択してください。

グーテンベルグエディター説明1
グーテンベルグエディター説明2

すると、下記のように吹き出しが入りました!

グーテンベルグエディター説明3

画面右の「ブロック」内にある「スタイル設定」「吹き出し色設定」

  • 「人物」
  • 「吹き出しスタイル」
  • 「人物位置」
  • 「アイコンスタイル」
  • 「背景色」
  • 「文字色」
  • 「ボーダー色」

を選択してその場で変更することができます!

この機能がとても便利なので私はグーテンベルグで吹き出し機能を使っていました。

 
グーテンベルグエディター説明4

クラシックエディターの場合

左下に「吹き出し」のボタンがある場合はそこを選択しましょう。

もし、「吹き出し」ボタンが見当たらない場合は右上にある「ツールバー切り替え」をクリックすれば現れると思います。

クラシックエディター説明1

「吹き出し」ボタンをクリックすると登録した吹き出しが一覧で表示されます。

今回は一番上にある「しゅんセキ(デフォルト)」を選択してみましょう。

クラシックエディター説明2

すると、下記のように吹き出しが入ります!

クラシックエディター説明3

しかし、、、

クラシックエディターではグーテンベルグエディターのようにその場で各種設定を変更することができないので注意が必要です!

Cocoon吹き出し機能 まとめ

吹き出し機能の設定から使い方までお伝えしてきましたがいかがでしょうか?

吹き出し機能はとても便利でブログの印象もガラッと変えてくれる優れものです!

みなさんのブログライフがより良いものになるよう願っております^^

 

 

あわせて読みたい
【Cocoon】ヘッダーのサイトタイトルを非表示にする方法

続きを見る

-ブログ
-, ,

© 2021 セキログ