【Cocoon】吹き出しのカスタマイズ＆設定方法

WordPressテーマ「Cocoon」のカスタマイズ備忘録です。今回は吹き出しのカスタマイズ方法をご紹介します。

こんな感じで好きな色に変えたり、アイコンの大きさを調整したりできます。

POINT

吹き出しは人物のセリフ的な使い方以外に、工夫次第でこういう強調するための使い方もできますね。

ではさっそくやっていきましょう〜！

吹き出しの設定方法

念のため吹き出しの設定方法から紹介したいと思います。管理画面のメニューから「Cocoon設定＞吹き出し」を開き、「新規追加」で新しい吹き出しを登録できます↓

• タイトル：利用時に分かりやすいように好きな文字で
• 名前：未入力だとアイコンの下に文字が表示されない
• アイコン画像：好きな画像でOK
• 吹き出しスタイル：カスタマイズするなら「デフォルト」か「考え事」を選択
• 人物位置：お好みでOK
• アイコンスタイル：お好みでOK
• TinyMCE：普通はビジュアルエディターで使うのでチェックを入れる

アイコンに使う画像は素材サイトからダウンロードしたり、似顔絵アプリなどで作っても良いと思います。

無料で似顔絵やアバターを作れるサイト・アプリもたくさんあります。こちらの記事を参考にしてみてください↓

【保存版】無料の似顔絵メーカー、アイコン作成アプリ54選

SNS用のアイコンやブログのプロフィール画像として使える似顔絵やアバターを、無料で作成できるスマホアプリ、PCサイトを厳選してまとめました。いろんなテイストの似顔絵やキャラクターが作成できるのでお気に入りを見つけてみてください。

web-ashibi.net

2016.02.22

カスタマイズ前の注意点

カスタマイズはCSSを追加するだけですが、少し注意点があります。吹き出しの場合は個別にCSSを反映させるために「id」を使います。

idの確認方法

吹き出し一覧画面を開いて、カスタマイズしたい吹き出しのタイトルにマウスを持っていきましょう。するとウィンドウ下部にURLが表示されるので、末尾の数字で「吹き出し固有のid」を確認できます↓

もしくは吹き出しのタイトルをクリックして編集画面を開き、ブラウザのアドレスバーのURLで確認してもオッケーです。

CSSで吹き出しをカスタマイズ

idの確認ができたら、あとはCSSを追加するだけです。部分的に紹介していきます。

アイコンのサイズを変える

まずはアイコンのサイズを変えるだけのコードです。初期設定だとPC表示が12%、スマホ表示が16%になっていると思います。

これはメインカラム（記事本文の横幅）に対しての割合を%で指定していますが、%の値を増やしても良いですし、pxで指定してもオッケーです↓

.sb-id-25 .speech-person {
  width: 130px;
  min-width: 130px;
}
@media screen and (max-width: 480px){
  .sb-id-25 .speech-person {
    width: 70px;
    min-width: 70px;
  }
}

「@media screen and (max-width: 480px)」以下の部分がスマホ表示でのサイズ指定ですね。

アイコンの背景色やボーダー色を変える

アイコンの背景がPNG画像などで透過になっていれば、CSSで背景色を変えることもできます。

.sb-id-25 .speech-icon img, .sb-id-25 .speech-icon amp-img {
  border: 2px solid #f4b3c2; /* ボーダーの太さ・形状・色 */
  background: #fdeff5; /* 背景色 */
}

カラーコードは以下のサイトなどを参考にお好みで変更してください↓

HTMLカラーコード

HTMLカラーコードでは、ウェブサイトで使用するHTML のカラーを探すためのツールを無料で提供しています。HTMLカラーチャートとHTMLカラーピッカーは、色探しの作業を手軽にしてくれる素晴らしいツールです。

html-color-codes.info

スタイル「デフォルト」のカスタマイズ

次に吹き出し部分です。デフォルト・フラット・LINE風は、以下のコードでカスタマイズできます。

.sb-id-25 .speech-balloon {
  background-color: #fdeff5; /* 吹き出しメイン部分の背景色 */
  border: 2px solid #f4b3c2; /* 吹き出しメイン部分のボーダー */
  color: #333; /* セリフの文字色 */
}
.sb-id-25 .speech-balloon::before {
  border-right: 12px solid #f4b3c2; /* 三角部分の外側（ボーダー）の太さ・形状・色 */
}
.sb-id-25 .speech-balloon::after {
  border-right: 12px solid #fdeff5; /* 三角部分の内側（背景）の色 */
}
@media screen and (max-width: 480px){
  .sb-id-25 .speech-balloon::before { border-right: 7px solid #f4b3c2; /* スマホでの三角部分の外側 */
  }
  .sb-id-25 .speech-balloon::after { border-right: 7px solid #fdeff5; /* スマホでの三角部分の内側 */
  }
}

スタイル「考え事」のカスタマイズ

「考え事」の場合は少しコードが変わります。

.sb-id-27 .speech-balloon {
  background: #ddebfd; /* 吹き出しメイン部分の背景色 */
  border: 2px dashed #7aa7df; /* 吹き出しメイン部分のボーダー */
  color: #186bb2; /* セリフの文字色 */
}
div.sb-id-27 .speech-balloon::before { /* 丸パーツ(大)の指定 */
  border: 2px dashed #7aa7df;
  background: #ddebfd;
}
div.sb-id-27 .speech-balloon::after { /* 丸パーツ(小)の指定 */
  border: 2px dashed #7aa7df;
  background: #ddebfd;
}

上記コードでこのようになります。ボーダーの値を「dashed」で指定することで破線にすることができます。

ボーダーの値は以下のようにたくさん種類があります。

色々な種類の線やカラーで吹き出しを作ってみると、オリジナリティも出て面白いと思います。皆さんも試してみてくださいね！