ROAD

【初心者必見】”絶対できる”Cocoonで吹き出しを使う方法とカスタマイズ

Cocoonで吹き出しを使う方法と吹き出しのカスタマイズ

ブログを書いているときに、

知りたい人
言葉の掛け合いみたいな、会話風にしたいんだけどなあ。

悩むひと

吹き出しつかってみたけど、テキストの背景とか変えたいな。
アイコンとかカスタマイズできないのかな?
CSSコードってどこに入力するの?

そんな風に悩んだことはありませんか?
本記事では、そのまま真似すれば絶対につかえるようになる、Cocoonでの吹き出しの使い方と、簡単なカスタマイズ方法について紹介します。
吹き出しのカスタマイズは、この記事にあるCSSコードをそのままコピーして使えます!

記事の信頼性

パソコンが苦手な初心者の私が、できるようになった方法をそのまま紹介します。
CSSコードってどこに入力したらいいんだろう。。
そのレベルの私でもできた方法です!

吹き出しとは?

悩むひと
こんな感じのものです。
反対側にすることで、会話してる風になります。

文書を強調して言いたいときや、疑問を投げかけるときなどに使用します。

Cocoonで吹き出しの使い方(設定方法)

吹き出しの設定方法

 

step
1
Cocoon 設定の吹き出しをクリック

Cocoon 設定画面の写真

step
2
新規追加をクリック

Cocoon 設定画面で吹き出しの追加説明写真

step
3
自分の好きな設定に変更する

Cocoon 吹き出し詳細設定画面

Cocoon 吹き出し設定で作成したアイコンと入力個所の説明

step
4
デモ画面で作成した吹き出しのプレビューを確認

作成した吹き出しの確認画面

 

記事に吹き出しを挿入する方法

旧エディタの場合

 

step
1
旧エディタの【吹き出し】から、使いたい吹き出しのタイトルを選択

旧エディタで吹き出しを使用する方法

step
2
選択した吹き出しが表示されたらOK

旧エディタで吹き出しを使用した結果

 

ブロックエディタのクラシックからの場合

 

step
1
⊕からブロックの追加をし、クラシックのアイコンをクリック

ブロックエディタでクラシックから吹き出しを追加する方法について

 

step
2
旧エディタが表示され【吹き出し】から、使いたい吹き出しのタイトルを選択

ブロックエディタでクラシックから吹き出しを追加した結果

 

ブロックエディタの吹き出しからの場合

 

step
1
⊕からブロックの追加をし、吹き出しのアイコンをクリック

ブロックエディタで吹き出しから吹き出しを追加する方法の説明

step
2
WordPressオリジナルの吹き出しが追加されるため、
自分の好きなデザインにその場で変更

ブロックエディタで吹き出しから吹き出しを追加した結果

ココに注意

この場合、前もって吹き出しの設定が必要ないため、いちばん早く吹き出しを使うことができます。
しかし、吹き出しのカスタムをしたい場合には、CSSコードからすることになります。
デフォルトでも大丈夫!という方にはオススメです。

 

吹き出しのカスタマイズ

CSSコードから変更する方法

step
1
記事の編集の一番下にあるカスタムCSSに追加したいコードを貼りつける

CSSコードを貼りつける場所の説明

ココがポイント

記事ごとにCSSコード入力枠があり、それぞれ設定できます。

step
2
追加したいカスタムCSSコードを貼りつける

テキストの背景を緑にするCSSコード

ココがポイント

黄色い背景のsb-id-13の数字は吹き出しのid番号

※id番号の確認方法

吹き出しのid確認方法

step
3
プレビュー画面で、ちゃんと表示されたか確認する

CSSコード入力前と入力後の比較写真

使えるおすすめコード

おすすめコード①

●テキストの背景の色を変えるコード
(〇〇は吹き出しid、△△は色のコード)

CSSコードでテキストの背景変更後と変更前の画像

.sb-id-〇〇 .speech-balloon{
background:#△△;/*コメントの“背景色”*/
border-color:#△△;/*コメントの“枠の色”*/
}
.sb-id-〇〇 .speech-balloon::before,.sb-id-〇〇 .speech-balloon::after{
background:none;
border-right-color:#△△;/*コメントの“”の部分の色*/
}

おすすめコード②

●アイコンの大きさを変更するコード
(〇〇は吹き出しid、◇◇は大きさ(例:200px))

CSSコードでアイコンのサイズ変更後と変更前の画像

.sb-id-〇〇 .speech-person{
width:◇◇px;/*80以上を入力してください*/
}

※さまざまな色のカラーコード検索サイト

Cocoon 吹き出しの設定から変更する方法

step
1
各項目から好きなデザインを選択する

Cocoonでの吹き出しの詳細設定説明

※それぞれの設定での表示例吹き出し設定表示例

まとめ

いかがだったでしょうか?
吹き出しを使えいるようになるだけで、記事のクオリティも上がり、より読者の目線にちかい内容で記事が書けるようになります。
私自身、はじめて吹き出しが使えるようになった日は、それだけですごく満足して、とても嬉しかったです(*^-^*)
どんどん吹き出しを使って、記事のクオリティをあげましょう!!

 

もっと詳しく

Cocoonを始めようとしてる初心者が、絶対につかえるようになる方法、
初心者にありがちなトラブル解決方法について解説!

  • この記事を書いた人

いなさら

田舎系副業ブロガー|九州の田舎でサラリーマンをしながら発信しています! Enaka Blogでは、『ブログの情報やポケットWi-Fiのこと、アウトドアを中心に発信しています。』 少しでもみなさんのお役に立てれば幸いです!! よろしくお願いします(≧◇≦)

-ROAD

© 2021 Enaka Blog Powered by AFFINGER5