【Cocoon】吹き出しの使い方・設定方法とカスタマイズ

こんにちは、yuji（@yuji_invest）です。
このブログでは、WordPressとアフィリエイトのノウハウを解説しています。

ブログ初心者なりに、ブログ記事内で使える吹き出しをおしゃれにデザインしたいです。

以上のような、ブログデザインについての要望にお答えします。

このブログではWordPressテーマのCocoonを使っていますが、吹き出しは以下のようなデザインにしています。

吹き出しのサンプル①

吹き出しのサンプル②

このように吹き出しをカスタマイズして使い分けることで、記事の導入や話の展開をスムーズにすることができます。

この記事では、以上のようなCocoonの吹き出しを簡単に再現できる方法を解説したので、参考にしていただけたらと思います。

※ブログ収益化を目指している方には、WordPress有料テーマの利用をおすすめしています。詳しくは以下の記事をご覧ください。
》おすすめWordPressテーマ15選

【2022年】おすすめWordPressテーマ15選【初心者向けランキング】

目次をチェック

吹き出しの設定方法
- 吹き出し設定
- スタイルシートにコードをコピペする
「カスタマイズが上手くいかない…」と感じる方へ
- 多くの人に読まれる記事を書こう
- アフィリエイト神ツールを使いこなそう

吹き出しの設定方法

Cocoon/ホワイトラーメンのデフォルトでは、このようなシンプルなデザインになっています。

また、Cocoonの全体的な基本設定がまだの方は以下の記事をご覧ください。
》Cocoonの使い方とおすすめ初期設定

吹き出し設定

１．WordPressメニューの「Cocoon設定」から「吹き出し」を開きます。

２．吹き出し編集ページの上部にある「新規作成」に進みます。

３．設定内容はこちら。

吹き出し編集

タイトル
：自分が区別するための名前を付けます。（例：質問する人）
名前
：入力した内容が記事内で表示されます。空欄がおすすめです。
アイコン画像
：選択からアップロード画像を選びます。160px以上の正方形画像が推奨です。

※吹き出しに使うアイコンは自作するのがおすすめです。詳しくは下記をご覧ください。
》ブログアイコンの作成方法

吹き出し編集

吹き出しスタイル
：デフォルト
人物位置
：左
アイコンスタイル
：四角（枠線なし）
TinyMCE
：エディターのリストに表示

上記のように設定できたら「保存」をクリックします。

４．「吹き出しを新規作成しました。」と表示されるので、そのまま次の吹き出しの作成に移ります。

５．ここからは、上と同じ設定を繰り返します。

吹き出し編集

タイトル
：自分が区別するための名前を付けます。（例：ペンギン）

吹き出し編集

吹き出しスタイル
：考え事

このように、吹き出しスタイルのみ「考え事」を選択して、設定できたら「保存」をクリックします。

６．これで「デフォルト」と「考え事」の2つの吹き出しができました。

スタイルシートにコードをコピペする

１．「外観」から「テーマエディター」に進み「style.css」を開きます。

２．スタイルシートに以下のコードをコピペしてください。

スタイルシートに入力するときの注意点

編集前に必ずスタイルシートのバックアップを取る
編集するテーマが「CocoonChild」になっていることを確かめる
「@charset “UTF-8”;」から始まる部分（最初から入力されている内容）は消さずに下に追記していく

/************************************
**　吹き出し
************************************/
.sbp-l .speech-person {
width: 16%;
min-width: 16%;
min-width:5em;
min-height:5em;
margin-right:1em;
margin-left:2em;
}
.sbp-r .speech-person {
width: 16%;
min-width: 16%;
min-width:5em;
min-height:5em;
margin-right:2em;
margin-left:1em;
}
.speech-icon-image {
box-shadow:none!important;
}
div.speech-balloon {
background:#edfcf3;
border: 3px solid #edfcf3;
border-radius: 10px;
padding:1em;
}
div.speech-balloon::before {
border-right: 14px solid #edfcf3;
}
div.speech-balloon::after {
border-right: 14px solid #edfcf3;
}
.sbp-r .speech-balloon::before {
border-left: 14px solid #edfcf3;
}
.sbp-r .speech-balloon::after {
border-left: 14px solid #edfcf3;
}
div.sbs-think .speech-balloon::before {
border: 1px solid #e6f5ec!important;
background:#edfcf3;
width: 15px;
height: 15px;
}
div.sbs-think .speech-balloon::after {
background:#edfcf3;
border: 1px solid #e6f5ec!important;
width:8px;
height: 8px;
}
@media screen and (max-width: 480px){
.speech-person {
margin-right:0!important;
margin-left:0!important;
}}

３．コピペができたら「ファイルを更新」をクリックします。