【通知】ピンタレストを誰でも月間閲覧者数10万人まで伸ばせる方法

【Cocoon】吹き出しのカスタマイズと使いかたを解説

BLOG
悩んでいる人
悩んでいる人

ブログで吹き出しを使いたいけど、使い方がわからない。
Cocoonでの吹き出しのカスタマイズ方法とか教えてほしい。

ケント
ケント

そんな悩みを解決します!

当記事がおすすめな人

  • Cocoonで吹き出しを使いたい
  • Cocoonの吹き出しをカスタマイズしたい
  • ブログを読みやすくしたい

記事の信頼性

この記事を書いている僕はブログ歴2年目です。月間PVは3.5万。
当ブログだけでも150記事以上書いており、2つのブログを運営。
アフィリエイトで月5桁を稼いでいます。

吹き出しを使って、会話しているような感じのブログが増えてますよね。

僕もやってみたいなと思って、2〜3日かけてコードを書いたことがありますw

ただ、Cocoonを使い始めたときに、ボタン1つで吹き出しを作れて衝撃を受けました…。

ケント
ケント

正直、無料のブログテーマでこの機能があるのはすごい…。

なので今回は、Cocoonでの「吹き出しの使い方」と「カスタマイズ」について解説していきます!

スポンサーリンク

Cocoonの吹き出しの基本的な使い方

まずは吹き出しの使い方を確認しておきましょう!

→「投稿」を選択

→「新規追加」を選択

ここがちょいわかりにくいんですが、デフォルトだと吹き出しのボタンが出ていないんですよね。

ケント
ケント

僕もここで少しの間、吹き出し無いやん…となっていましたw

→以下の画像にあるPCのキーボードみたいなボタン「ツールバー切り替え」を押してください

すると、いろいろボタンが増えます。

→「吹き出し」を選択

ズラッと出てくると思いますが、これが吹き出しの種類。

このあたりは後述する吹き出しのカスタマイズで変更できます。

→どれか選択

以下のように吹き出しが出てくると思います。

→「内容を入力してください。」のところに文字を入れればOK

 吹き出しの使い方パターン2

吹き出しに文字を入れるやり方ですが、もう一つあります。

先に文字を書いて吹き出しにするパターンです。

→吹き出しにしたい文字を選択

→さっきと同じように、「吹き出し」を開いてどれか選択

選択した文字が吹き出しになりましたね。多分、こっちのほうが楽。

ケント
ケント

僕はこのパターンですね。先に文章をすべて仕上げて、あとから吹き出しをつけていってます。

これが基本的な吹き出しの使い方です!簡単ですね。

Cocoonの吹き出しをカスタマイズする方法

それでは、吹き出しのアイコンや形、背景色の変え方なんかを解説していきたいと思います。

アイコン、形、名前をカスタマイズする方法

→「Cocoon設定」>「吹き出し」を選択

画像のように「吹き出し一覧」が表示されるので、使わなそうなやつは全部削除していって大丈夫です。

→「新規追加」を選択

画像のような画面になるので、項目を埋めていきましょう。

Cocoonの標準機能で変更できるのはここに表示されている項目のみ。

ケント
ケント

背景色の変更は後述しますね。

各項目の説明は、iマークで書かれているのでわかるはず。

「吹き出しスタイル」は4種類あるので、どんな感じかは以下の画像を参考にしてください。デフォルトとLINE風はほぼ、同じ見た目ですね。

吹き出しの設定を埋めていくと以下ような感じになります。

→「保存」ボタンを押してください

保存を押すと、デモが表示されます。どんな感じかわかるのでいいですね。

投稿画面で確認してみましょう。

ちゃんとできてますね。

吹き出しの背景色をカスタマイズする方法

さて、吹き出しの背景色を変えたいという人もいると思います。

しかし、Cocoonの機能だけではここを変えられず、CSSを使う必要があるんですね。

CSSはプログラミングみたいなものです。皆さんのブログやホームページの装飾はすべてCSSでできています。

悩んでいる人
悩んでいる人

なんか難しそう…。

ケント
ケント

コピペするだけで大丈夫なので、簡単ですよ!

→「外観」>「カスタマイズ」を選択

→「追加CSS」を開きます

白い枠が出てくると思うので、そこにCSSを書いていく感じですね。

吹き出しのスタイルによってCSSを書く場所が違うので、それぞれ解説していきます。

吹き出しスタイルが「LINE風」と「デフォルト」の場合

以下のコードをコピペしてください。

div.speech-balloon {
background-color: #98fb98;
border: 2px solid #ccc;
}

div.speech-balloon::after {
border-right: 12px solid #98fb98;
}

div.sbp-r .speech-balloon::after {
border-left: 12px solid #98fb98;
}

コピペしたら左上の青いボタン「公開」を押してください。

背景色の変更の仕方について

悩んでいる人
悩んでいる人

背景色はどうやって変えるの?

ケント
ケント

コードに#98fb98という部分があると思います。ここの数字で色を指定しているので、ここを変えればOK

この数字はカラーコードと言われるんですが、他の色にしたい場合は以下のサイトを参考にしてみてください。

吹き出しスタイルが「考え事」の場合

以下のコードをコピペしてください。

div.speech-balloon { 
background: #98fb98; 
} 

div.sbs-think .speech-balloon::before ,div.sbs-think .speech-balloon::after { border: 2px solid #ccc; 
background: #98fb98; 
}

コピペしたら左上の青いボタン「公開」を押してください。

吹き出しスタイルが「フラット」の場合

以下のコードをコピペしてください。

.sbs-flat .speech-balloon {
background: #98fb98;
border-color: #98fb98;
}

.sbs-flat .speech-balloon::before, .sbs-flat .speech-balloon::after {
border-right-color: #98fb98;
border-left-color: #98fb98;
}

コピペしたら左上の青いボタン「公開」を押してください。

まとめ:Cocoonの吹き出しを使って読みやすさUP!

最近だと、文字を読む人が少なくなっているので、読みやすさを意識しなければいけません。

吹き出しを使うと読みやすさを格段にあげてくれます。

なぜなら漫画っぽくなるからですね。

以下の記事も読みやすさを上げるために役立つはずなので、ぜひ😌

ランキング参加中!
スポンサーリンク
スポンサーリンク
BLOG
スポンサーリンク
Kentoをフォローする
KenTo Blog
タイトルとURLをコピーしました