【Cocoon(コクーン)】吹き出しの使い方を超分かりやすく解説するよ!

Cocoon
出典:『寝ログ』より
スポンサーリンク

副業ブロガー、まるをです

この記事を見ているということは、あなたはブログ初心者であり吹き出しの使い方がよく分からない方だと思います

何故なら僕も吹き出しの使い方が分からず、超調べたからです

そこで今回は吹き出しの使い方について画像テンコ盛りで超絶分かりやすく説明していきたいと思います!

『100人いたら100人が分かる』を目指すのでもしかしたら説明がくどくなるかもしれませんが、ご容赦ください

なお筆者はCocoon(コクーン)ユーザーでありそれしか使ったことがないので、コクーンでの方法についての解説になります

それでは早速いってみましょー

スポンサーリンク

そもそも吹き出しって?

吹き出しというのはキャラクターを喋っているように見せる枠のことです

まるを
まるを

オッス!オラまるを!

こーゆーやつですね。まるを君が喋っています

吹き出しを使うことで記事が一気に見やすくなるし、オリジナリティを出すことができます

ちなみに僕の分身であるまるを君ココナラというサイトで作成してもらいました

低料金ながら高クオリティのアイコンを作成してもらえるので個人的に超おすすめ

別記事にて登録方法や使い方について解説しているので、気になる方は参考にしてみて下さい

スポンサーリンク

吹き出しを作ってみよう

それでは実際に吹き出しを作成してみましょう

まず最初に『Cocoon設定』から『吹き出し』を選択して下さい

すると吹き出し一覧のページになるので、『新規作成』をクリック

すると吹き出しの新規作成ページに飛びます

全部で7つの設定項目がありますが、設定すべきは『タイトル』『名前』『アイコン画像』の3つ

他はデフォルトのままで大丈夫(いじりたければどうぞ)

ちなみに僕の設定がこちら

ここでの注意点は、タイトルはビジュアルエディター使用時に五十音順で並べ替えが行われ、表示されます

自分の作成した吹き出しを一番最初に表示したい場合は、僕のタイトルのように頭に[01]と付けるなどして下さい(よく意味が分からなければ01って入れとけばOK)

名前については任意ですが、入れないとアイコンの下に名前が表示されません。表示させたいなら入れましょう

アイコンは160px~200pxぐらいの正方形のものを用意しましょう(ココナラなどで作成可)


上記の設定が終わったらスクロールし、左下にある『保存』を押しましょう

ここまで終われば下準備は完了!

次は記事内に吹き出しを表示させたいと思います

記事内に吹き出しを表示する方法

記事内に吹き出しを表示するには、ビジュアルエディタを使用する必要があります

では順番に見ていきましょう

まず初めに『ブロックの追加』をクリックします

『ブロックの追加』は文章を入力する所の左側の【 ⊕ 】のマークです

もしくはカーソルを中心の辺りに持っていくと上か下に現れます

これをクリックすると

こんな感じのものが出てきます

拡大して見ていきます

この『ブロックの追加』では記事を見やすくするための様々な機能が備えられています

『吹き出し』を使うには『クラシック』というものを選択します

僕はクラシックを頻繁に使うので【よく使うもの】の候補の中に出てきていますが

ここにない場合は上の【ブロックの検索】の窓からクラシックと入力する、

もしくは少し下に【フォーマット】というのがあるので、そこを押すと出てきます

このクラシックを押すと

こんな感じのものが出てきます

ビジュアルエディタですね

ここに文章を打ちます

で、①打った文章を選択し

②【吹き出し】という部分をクリックします。すると

吹き出しの候補がいっぱい出てきます

先ほど作った[01まるを]もちゃんと一番上に来てますね

この[01まるを]を押してみると…

できた!まるを君が現れ喋っています!

プレビューで確認してみましょう

ちゃんと喋ってる!完璧!

同じ要領で作っていけば会話しているようにもすることができます

これで自由に吹き出しを使うことができますね

応用編 もっとに簡単に作る方法

実はもっと簡単に吹き出しを作ることもできます

ぶっちゃけ僕はこっちを推奨です

まず先ほどと同じように【ブロックの追加】を開きます

で、今度はブロックの検索から【吹き出し】と検索する、もしくはスクロールして【Cocoonブロック】というものを押します

すると吹き出しがあるのでそれをクリック。すると

まるを、爆誕

あとは吹き出しの中に文字を打ち込めばいいだけ。めちゃ簡単!

何故こっちのがおすすめかと言うと、この方法で作ると後から編集できるからです

どういうことかと言うと、以下の画像を見ると分かります

右側に吹き出しの設定メニューがありますね

ここをいじれば吹き出しを自由にカスタマイズすることができます(クラシックで作るとこれができない)


まるを
まるを

例えば吹き出しスタイルを変えてフラットにして見たり

まるを
まるを

考え事してる風にしたり

まるを
まるを

LINEっぽくしてみたり

まるを
まるを

アイコンスタイルから形を変えたり

まるを
まるを

右側にだって行ける

細かくカスタマイズできて超便利なので是非やってみて下さい

楕円になっちゃう謎

実はよく見るとまるを君デフォルトの男性とでは丸の形が違うんですよね

僕の方、ちょっと楕円になってる…?

これクラシックからだと直せないんですが、【応用編】のやり方で作ると直すことができます

やり方は楕円の画像をクリックして、もう一度同じ画像を選択するだけ。すると

まるを
まるを

何故か丸くなる

とりあえずこれで直るので楕円になっちゃう人は試してみて下さい(楕円にならない方法知ってたら誰か教えてプリーズ)

まとめ

吹き出しの作り方について紹介しましたが、いかがでしたでしょうか

吹き出しはめちゃくちゃ利便性が高いので、今は使ってなくても覚えておいて損はないです

使いこなしてブログライフを楽しみましょう!

以上、まるをでした

それではっ

コメント

  1. […] 【Cocoon(コクーン)】吹き出しの使い方を超分かりやすく解説するよ!副業ブロガー、まるをですこの記事を見ているということは、あなたはブログ初心者であり吹き出しの使い方がよく […]

  2. カツヤ より:

    同じ様にやってもできませんでした
    cocoonブロックの吹き出しを押しても、アイコンの画像しかでてきません
    どうしたら吹き出しも同時にだせますか?

    • まるを まるを より:

      よくアイコン画像が表示されないという話は聞きますが、アイコン画像しか出ないというのは初めて聞きました。
      パッと思いつくところだと、フラグインが邪魔をしていたり設定しているテーマの問題などでしょうか。
      なので不要なプラグインを消してみる、テーマを変更して試してみる。などをしてみてはどうでしょう。
      それでもダメなら公式に問い合わせた方が良いかもしれません。

  3. […] 【Cocoon(コクーン)】吹き出しの使い方を超分かりやすく解説するよ!副業ブロガー、まるをですこの記事を見ているということは、あなたはブログ初心者であり吹き出しの使い方がよく […]

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