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

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

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

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

Cocoonの吹き出しブロックでは吹き出しの色を自由に指定できますが、毎回設定するのが面倒なので、CSSで事前によく使う色を次のように指定しています。

吹き出しのサンプル①

吹き出しのサンプル②

また、下記のように後から色を上書きすることも可能です。

記事編集画面で、自由に色を変更できます。

記事編集画面で、自由に色を変更できます。

よく使う吹き出しを設定しておけば、小さな時短の積み重ねで作業効率が上がるので、ぜひ参考にしていただけたらと思います。

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

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

目次をチェック

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

吹き出しの設定方法

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

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

吹き出し設定

まずは吹き出しの「フラット」と「考え事」を作成します。

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

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

３．設定内容はこちら。

吹き出し編集

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

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

吹き出し編集

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

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

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

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

吹き出し編集

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

吹き出し編集

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

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

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

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

１．「外観」から「テーマファイルエディター」に進み「Cocoon Child: スタイルシート (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;
}
.sbs-flat .speech-balloon {
background-color: #edfcf3;/*吹き出しの色の変更はこちら*/
border-color: #edfcf3;/*吹き出しの色の変更はこちら*/
border-radius: 10px;
padding:1em;
}
.sbs-flat .speech-balloon::before, .sbs-flat .speech-balloon::after{
border-right-color: #edfcf3;/*吹き出しの色の変更はこちら*/
border-left-color: #edfcf3;/*吹き出しの色の変更はこちら*/
}
.sbs-think .speech-balloon {
background-color: #edfcf3;/*吹き出しの色の変更はこちら*/
border: 3px solid #edfcf3;/*吹き出しの色の変更はこちら*/
border-radius: 10px;
padding:1em;
}
.sbs-think .speech-balloon::before {
border: 0px !important;
background:#edfcf3;/*吹き出しの色の変更はこちら*/
width: 15px;
height: 15px;
}
.sbs-think .speech-balloon::after {
background:#edfcf3;/*吹き出しの色の変更はこちら*/
border: 0px !important;
width:10px;
height:10px;
}
@media screen and (max-width: 480px){
.speech-person {
margin-right:0!important;
margin-left:0!important;
}}

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