Blog

テーマCocoonで吹き出しを使う方法について徹底解説しました。

こんにちは、ほえるん(@Whalenlen)です。

 

ほえるん
ほえるん
ブログの執筆捗っていますか?

▼本記事は、以下の方におススメ▼

  • ボックス(囲い)以外のバリエーションを増やしたい。
  • 記事の内容が単調である。
  • 記事の内容に変化を求めたい。

 

上記のような、ボックス(囲い)のやり方については、以前記事にしたので参考にお使い下さい。

 

 

今日は、吹き出しの設定から、実際の使い方について解説していきます。

 

吹き出しとは?

 

 

ほえるん
ほえるん
吹き出しとは、今まさに使用しているこのデザインの事を指します。

 

 

上記の様に、人が話している風に見せることができるデザインのことですね。

 

一つの吹き出しを作って、読者に語り掛けるのもありですし、二つの吹き出しを作って、記事内で対話形式を用いて読者に伝える手法など、多種多様に応用できます。

 

 

有名ブロガーや検索上位のブロガーの方々にも良く使われている手法ですので、この機会に是非マスターしましょう。

 

ほえるん
ほえるん

次項で、写真を用いて解説していきます。

 

れっさー
れっさー
一緒に学んでいきましょう!(久々登場)

 

 

吹き出しの設定から使用方法まで

 

本章では、順序良く説明していきます。

 

  1. 吹き出しに使用する画像を用意する。
  2. Cocoon内での設定方法。
  3. 実際の投稿画面で使用する方法。

 

まずは、アイコンとなる画像を設定しましょう。

 

吹き出しに使用する画像を用意する。

 

上の写真が現在自分が、吹き出しに使用しているアイコンです。

 

自分の場合は、「ココナラ」というサイトからプロにお願いしたので有料です。

 

しかし、いきなり課金するのは厳しいかと思いますので、初心者の方は無料で始める事をおススメしております。

 

https://kokublog.com/blog-start-writing-skil/

 

参考記事内にある「いらすとや」で検索すると沢山あります。

 

大きさは160px~200px程度が良いので、気に入ったものをどんどん検索しましょう。

 

どうしても、こだわって作りたいって方は「ココナラ」の始め方に関する記事を参考にして下さい。

※500円OFFクーポンを付与してますので是非ご活用下さい。

 

https://kokublog.com/coconala-twitter-aikon-hedda/

 

Cocoon内での設定方法について

 

ダッシュボード内の「Cocoon設定」「吹き出し」をクリックします。

 

 

「吹き出し」をクリック後、上写真の様な画面になります。

 

次は、矢印で示している「新規追加」を押しましょう。

 

 

上写真の様な画面になったら、

 

  1. タイトル
  2. 名前
  3. アイコン画像
  4. 吹き出しスタイル
  5. 人物位置
  6. アイコンスタイル

 

各欄に記入していきましょう。

 

ちなみに、吹き出しスタイルは「LINE風」「考え事」など変化させることができますので、アレンジしたい方は是非活用してみて下さい。

 

 

アイコンスタイルも「四角」「丸」で変化できますので、オリジナルな吹き出しを作成したい方は必見ですね。

 

 

設定が完了したら、「保存」ボタンを押すことを忘れないようにしてください。

 

▼吹き出し作成後、一覧画面を開くと作成したスタイルが表示されていますので、確認して下さい▼

 

 

※ビジュアルエディターリストに表示を無効化することで、ビジュアルエディター上で表示されることがなくなります。

 

その為、普段から使用頻度が低い吹き出し(デフォルトから存在するもの)は、無効化にしておくと効率upが図れます。

 

実際の投稿画面で使用する方法

 

次に、実際の記事投稿画面にて吹き出しを使用する方法について解説します。

 

ほえるん
ほえるん
自分は当初ここが出来ずに、時間をかけて調べました。

 

 

 

デフォルトの設定だと、吹き出しを表示するボタンが隠れています。

 

矢印で示しているボタン「ツールバー切り替え」をクリックすると画面が変わります。

 

 

クリック後、上写真のような画面になります。

 

赤枠で示したところが、吹き出しになりますので、クリックすると設定した名前が表示されます。

 

名前をクリックすると、吹き出しが現れます。

 

ほえるん
ほえるん
以上が、吹き出しの設定から使用方法まで説明でした。

 

 

これで記事内がスッキリします。

 

本記事のまとめです。

 

  1. 吹き出しに使用する画像を用意する。
  2. Cocoon内での設定方法。
  3. 実際の投稿画面で使用する方法。

 

 

上記点について、画像を用いながら説明しました。

 

本記事をきっかけに、記事のバリエーションが増え、あなたの目標達成に近づく事を心より願っております。

 

では、また次の記事にお会いしましょう。