【WordPress】Cocoonでオリジナル吹き出しを作ろう

オンラインサロン「リトルシアターユニオン」さんのサイトをご紹介させていただきました。

このサイトを作る際に使った方法を順番にご紹介していきたいと思います。

1回目は、吹き出しについてです。

contents

Cocoonのデフォルトの吹き出し
オリジナルの吹き出しを追加しよう
まとめ

Cocoonのデフォルトの吹き出し

Cocoonにはデフォルトの吹き出しが10種類用意されています。

イラストの形・種類、吹き出しの形・色、吹き出しとイラストの位置など、

バリエーション豊かに用意されています。

とてもありがたいですね。

オリジナルの吹き出しを追加しよう

オリジナルの吹き出しを追加するには大きく以下4つの対応が必要となります。

イラストを用意する
吹き出しのスタイルを設定する
色など詳細設定をする
投稿画面で利用時の設定をする

順番にご説明します。

イラストを用意しよう

イラストの用意の仕方は様々です。

自作する
イラストメーカーを使う
無料/有料のイラストをダウンロードする

自作する

illustratorやフォトショップ、

以前ご紹介したInkscapeなど、様々なツールを使って作ることができます。

イラストメーカーを使う

Web上には様々なイラストメーカーがあります。

にゃこを作成のは「CHARAT」さんです。

「CHARAT」さんには、猫のイラストの他、

犬や熊などの動物をはじめ、

男女のイラストを作るメーカーが用意されています。

リトルシアターユニオンさんの吹き出しを作るのに使ったメーカーも、「CHARAT」さんです。

女の子を作りたいならCHARAT ROUGE、

男の子を作りたいならCHARAT BLANCなどがあります。

他にもたくさん用意されているので、ぜひ見てみてください★

無料/有料のイラストをダウンロードする

その他、作成されているイラストをそのまま使うこともできますね。

有名な無料イラストのサイトと言えば、

「いらすとや」さんですね。

ご自身の作るサイトの雰囲気に合わせて、選んでみてください。

吹き出しのスタイルを設定しよう

Cocoonの設定画面から設定をしていきます。

スタイル設定手順

①Cocoon設定＞吹き出しをクリックする。

②「新規追加」をクリックする。

③以下設定をする。

項目	内容
タイトル	編集画面から呼び出す名前
名前	アイコン下に表示される名前
アイコン画像	表示するアイコンを選択する
吹き出しスタイル	吹き出しのスタイルを設定するデフォルト/フラット/LINE風/考え事
人物位置	アイコン画像を表示する位置を設定する左/右
アイコンスタイル	アイコンの形や枠線を設定する四角（枠線あり/なし）/丸（枠線あり/なし）
TinyMCE	ビジュアルエディター（投稿編集画面）への追加有無を設定する

④「保存」ボタンをクリックする。

⑤「吹き出しを新規作成しました。」が表示される。
「一覧ページへ」をクリックする。

⑥一覧の最初に追加した吹き出しが追加される。
吹き出しのタイトル部分をマウスオーバーし、画面下部に表示されるIDを確認する。

詳細設定をしよう（アイコン：左）

作成した吹き出しの、吹き出し（会話部分）の設定は、CSSでしていきます。

この際、先ほどの手順⑥で確認したIDが必要となります。

詳細設定手順（左）

①外観＞テーマエディターをクリックする。

②Cocoon Child: スタイルシート (style.css)で、
以下文言の下部にコードを追加する。

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

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

.sb-id-11 .speech-balloon {
  background-color: #F4EDE6; /* 吹き出しメイン部分の背景色 */
  border: 2px ridge #361600; /* 吹き出しメイン部分のボーダー */
  color: #470e00; /* セリフの文字色 */
}

.sb-id-11 .speech-balloon::before {
  border-right: 12px ridge #361600; /* 三角部分の外側（ボーダー）の太さ・形状・色 */
}

.sb-id-11 .speech-balloon::after {
  border-right: 12px solid #F4EDE6; /* 三角部分の内側（背景）の色 */
}

@media screen and (max-width: 480px){
  .sb-id-11 .speech-balloon::before {
    border-right: 7px ridge #361600; /* スマホでの三角部分の外側 */
  }
  .sb-id-11 .speech-balloon::after {
    border-right: 7px solid #F4EDE6; /* スマホでの三角部分の内側 */
  }
}

「sb-id-11」の数字部分は、確認したIDに変更してください。

※上記コード例で作成した吹き出しは以下のような色/形になります。

詳細設定をしよう（アイコン：右）

アイコンが右側だった場合、

CSSに記載するコードが少し異なりますので、
こちらも参考に記載します。

詳細設定手順（右）

①外観＞テーマエディターをクリックする。

②Cocoon Child: スタイルシート (style.css)で、
以下文言の下部にコードを追加する。

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

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

「sb-id-12」の数字部分は、確認したIDに変更してください。

※上記コード例で作成した吹き出しは以下のような色/形になります。

投稿画面で利用しよう

では、設定した吹き出しを呼び出し、

使うための最後の設定をしたいと思います。

吹き出し利用手順

①記事作成画面（投稿/固定ページ）を開く。

②ビジュアルエディタで、吹き出しのプルダウンをクリックし、追加した吹き出しのタイトルをクリックする。

③本文編集画面に追加された吹き出しで、
「内容を入力してください。」部分を変更する。

④その他必要な記事を記載し、「公開」や「更新」ボタンをクリックする。

まとめ

いかがでしたでしょうか？

デフォルトで用意されている10種類の吹き出しを使うだけでもいいですが、

オリジナルの吹き出しを作ると、もっとそのサイト「らしさ」を出せますよね。

ぜひいろいろと試してみてください✨