【30秒で完了】Cocoonの吹き出しを表示する方法【自作して差別化しよう】

Cocoon

 

「Cocoonを使ってるけど吹き出しを付けたい!」

「自分のアイコンを使いたい」

「自作でアイコン作るってどうやるの?」

 

こんな悩みを解決します。

 

この記事を書く僕は、ブロガー兼WEBライターとして稼ぐ大学生。

Twitter(kan_blogger)も運営中。

 

ブログでよく見かけるこんな感じの吹き出しをCocoonでもサクッと作りたいですよね

 

そこで今回は、Cocoonにオリジナルアイコンを表示させる方法と競合と差別化できるオリジナルアイコンの作り方を紹介します。

 

記事の内容
  • 「吹き出し」にオリジナルアイコンを入れる方法
  • 「吹き出し」の使い方
  • 【競合と差別化】オリジナルアイコンを作る方法

 

この記事を読み終わると、他には無いオリジナルアイコンで吹き出しを作れるようになります。

 

Cocoonの「吹き出し」にオリジナルアイコンを入れる方法

画像に alt 属性が指定されていません。ファイル名: undraw_Portfolio_update_re_jqnp-1024x659.png

 

「吹き出し」にオリジナルアイコンを入れる手順はこちら

  1. Cocoon設定
  2. 吹き出し
  3. 新規追加

 

Cocoon設定→吹き出し→新規追加

画像に alt 属性が指定されていません。ファイル名: d1bcb6aa76f10629ef1465d260be6052-1024x576.png

 

ここまで出来たら後は上から埋めていくだけです!

1つずつ何ができるか解説します

 

「吹き出し」の新規追加でできること

画像に alt 属性が指定されていません。ファイル名: 323734c953c9057dd06484da37ed2fb3-1024x576.png

タイトル

自分が使うときに分かる名前にしましょう。

(記事には反映されません。)

名前

アイコンの下に表示される名前です。

(何も書かなくても問題ありません。)

アイコン画像

「選択」から好きな画像を選びましょう。

オリジナルアイコンの作り方は後半で紹介。

吹き出しスタイル

デフォルト画像に alt 属性が指定されていません。ファイル名: 2020-08-28-8.png

フラット画像に alt 属性が指定されていません。ファイル名: 2020-08-28-9.png

LINE風画像に alt 属性が指定されていません。ファイル名: 2020-08-28-10.png

考え事画像に alt 属性が指定されていません。ファイル名: 2020-08-28-11.png

人物位置

右から話すか左から話すか。好みでOK

アイコンスタイル

四角(枠線なし)画像に alt 属性が指定されていません。ファイル名: 2020-08-28-12.png

四角(枠線あり)画像に alt 属性が指定されていません。ファイル名: 2020-08-28-15.png

丸(枠線なし)画像に alt 属性が指定されていません。ファイル名: 2020-08-28-13.png

丸(枠線あり)画像に alt 属性が指定されていません。ファイル名: 2020-08-28-8.png

TinyMCEにチェックを付ける(*TinyMCEプラグインを入れている場合)
「保存」を押して完了

 

簡単ですね!次は使い方を紹介します!

 

Cocoonの「吹き出し」の使い方

 

「吹き出し」の使い方はこちら

  • 「その1」
    1. 投稿画面に適当な文字を書く
    2. 選択してCocoonブロックの「吹き出し」から先ほど作成したタイトルを選択
  • 「その2」
    1. 吹き出しを作りたい場所をクリックしてCocoonブロックの「吹き出し」から作成したタイトルを選択
    2. すでに書かれている「内容を入力してください。」を消して自由に書き込む

 

「吹き出し」の使い方その1

画像に alt 属性が指定されていません。ファイル名: 2020-08-28-17-1024x512.png

  1. 投稿画面に適当な文字を書く
  2. 選択してCocoonブロックの「吹き出し」から先ほど作成したタイトルを選択

 

「吹き出し」の使い方その2

画像に alt 属性が指定されていません。ファイル名: 2020-08-28-19-1024x443.png

 

  1. 吹き出しを作りたい場所をクリックしてCocoonブロックの「吹き出し」から作成したタイトルを選択
  2. すでに書かれている「内容を入力してください。」を消して自由に書き込む

 

記事を書いているうちに自分が慣れた方でOKです!

【競合と差別化】オリジナルアイコンを作る方法

画像に alt 属性が指定されていません。ファイル名: undraw_Design_thinking_re_644h.png

オリジナルアイコンを自作する方法はこちら

いらすとや

ココナラ

 

それぞれ何ができるのか、おすすめの使い分ける方法も含めて紹介します。

 

いらすとや

いらすとやとは、無料で使えるフリー素材サイトです。

人間・動物・棒人間など多くのパターンがあります。

 

フリー素材サイトの中でも人気が高いので安心です!

 

おすすめの使い方

いらすとやは、非常に人気が高いため自分のアイコンにする事はおすすめしません。

そこで読者を想定した時に使う事をおすすめします。

 

例えば

オリジナルアイコンって何で作るの?

いらすとやって何?

なるほど!そういう事か!

 

場面によって使い分けると記事が見やすくなりますよね。

 

ココナラ

ココナラ とは、知識やスキルを売買できる日本最大級のスキルマーケットです。

業界のプロによって作成される作品は一級品です。

 

無料登録できるので登録を終わらせておくと、自分が気になる案件をさがすこともできます!

 

おすすめの使い方

ココナラは、その道のプロ達が作ってくれるので、品質の高い自分のアイコンなどを作ってもらう事をおすすめします。

なぜなら品質の高いアイコンを使う事でフリー素材だけのブログとは見栄えが変わり、差別化できる事で読者も集まる可能性が高まるからです。

 

 

まとめ:Cocoonの吹き出しを活用して競合サイトと差別化しよう!

画像に alt 属性が指定されていません。ファイル名: screenshot-9.jpg

今回は、Cocoonの吹き出しにオリジナルアイコンを表示させる方法について紹介しました。

 

まとめると

「Cocooon設定」→「吹き出し」

読者アイコンは「いらすとや

オリジナルアイコンを作るなら「ココナラ

 

吹き出しは読者から見やすくなり直帰率の減少にも役立つので活用しましょう!

 

人気記事

未成年でも登録出来るアフィリエイトASPと確定申告の注意点
「未成年でもできるアフィリエイト(ASP)を教えて!」「ついでにおすすめも教えて!」「アフィリエイト(ASP)の選び方は?」こんな悩みを解決します。今回は未成年でもできるアフィリエイトを6選紹介します。
Cocoon
スポンサーリンク
シェアする
カンをフォローする
KanBlog

コメント

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