【Cocoon】吹き出しの背景と枠の色を最初から指定する方法【ワードプレス】

吹き出しの色を最初から指定して無駄を省く。

『Cocoon』の吹き出し機能は便利ですよね。

しろちゃん
しろちゃん

しろちゃんが喋ってるこの吹き出しのことだね。

Cocoonの吹き出し機能では背景や枠の色を指定することができます。

でも、吹き出し機能を使う度に色を変更するのは面倒ですよね。
実は、CSSを使うことで、最初から色が付いた状態で吹き出しを使うことができます

CSSがよくわからなくてもできるので、安心してくださいね。

この記事を読めば、『Cocoon』の吹き出しの色を最初から指定する方法がわかります。

この記事を書いた人
いなご

・YouTubeを3ヶ月で挫折
・ブログは6ヶ月連続収益0円
→月間1万PV、収益9,000円達成!
・脳科学、生物学、心理学を勉強中
・独自の「継続理論」で「ブログ・YouTubeの続け方」を発信しています
プロフィール詳細
いなごのTwitterアカウント

いなごをフォローする

Cocoonの吹き出しの色を最初から指定する①吹き出しの「id」を確認する

管理人
管理人

色を指定したい吹き出しの「id」を確認するよ。

しろちゃん
しろちゃん

いきなりよくわからない。

Cocoonの吹き出しには「id」が割り当てられています
例えば、最初からある「男性」の吹き出しは「id-1」、「女性」の吹き出しは「id-2」のように決まっています。

まずは、色を指定したい吹き出しの「id」を確認します。

吹き出しの「id」の確認方法

左の上「投稿」→すぐ下の「新規追加」の順にクリックして、記事の下書きを作成します。

「+」マーク→「吹き出し」の順でクリックし、吹き出しを出します。

右の「人物」から色を指定したい吹き出しを選びます

「︙」(点が縦に3つ並んでいる)マーク→「HTMLとして編集」の順にクリックします。

(※吹き出しを使うたびに色を変えたいなら、画面の右下のカラーパレットで色を選択できます。「吹き出しの色の付け方」だけならこれでOK。)

なんかよくわからない画面が出てきます。目を凝らして「sb-id-O」という部分を探してください。

⑥「sb-id-O」の数字の部分が吹き出しの『id』です。
下の例では「sb-id-1」なので、「1」をメモしておきます。

Cocoonの吹き出しの色を最初から指定する②吹き出しの仕組み

管理人
管理人

吹き出しの仕組みを知っておくと、色の指定が理解しやすいよ。

しろちゃん
しろちゃん

仕組みってどんなこと?

Cocoonの吹き出しは、三角部分と四角部分が組み合わさって出来ています
また、三角部分と四角部分のそれぞれで、枠の色と背景色が分かれています

図にするとこんな感じ。

実際の吹き出しも見てみましょう。

吹き出しを出して「吹き出しスタイル」をクリックすると、吹き出しの見た目を選ぶことができます。

「吹き出しスタイル」のうち、『考え事』だけは三角部分の形が他とは違うため、今回紹介する方法では上手く行きません

Cocoonの吹き出しの色を最初から指定する③CSSコードを編集する

管理人
管理人

CSSを編集するよ。

しろちゃん
しろちゃん

難しそう。

CSSについてはわからなくてもOK。下の枠の中の赤字の部分を変更するだけです。

まずは枠の中の文字を全て選択してメモ帳などにコピペしてください。
CSSでは改行が大事なので、改行を崩さないように注意しましょう。

/*吹き出しの色の初期設定 */
.sb-id- .speech-balloon {
background-color: #○○○○○○; /* 吹き出しメイン部分の背景色 */
border: 2px solid #○○○○○○; /* 吹き出しメイン部分の枠 */
color: #333; /* セリフの文字色 */
}
.sb-id- .speech-balloon::before {
border-right: 12px solid #○○○○○○; /* 三角部分の枠色 */
}
.sb-id- .speech-balloon::after {
border-right: 12px solid #○○○○○○; /* 三角部分の背景色 */
}
@media screen and (max-width: 480px){
.sb-id- .speech-balloon::before { border-right: 7px solid #○○○○○○; /* スマホでの三角部分の枠色 */
}
.sb-id- .speech-balloon::after { border-right: 7px solid #○○○○○○; /* スマホでの三角部分の背景色 */
}
}

色を変える吹き出しの指定

「.sb-id-」・・・全部で5箇所あります。「」の部分を、最初に確認した「idの数字」に置き換えます。

管理人の例では「id=1」だったので、全て「.sb-id-1」に置き換えます。

枠と背景の色の指定

#○○○○○○」・・・全部で6箇所あります。「○○○○○○」の部分を、「カラーコード」と呼ばれる色を表す文字列に置き換えます。

どの部分の色かは、「#○○○○○○」の右側にある日本語を参考にしてください。

例えば、この緑色は「3db370」、この青色は「0295d9」と決まっています。
#○○○○○○」を、「#3db370」や「#0295d9」に変更すればOKです。

どの色がどの文字列なのかはカラーコード一覧表を見て確認しましょう。(別のサイトが開きます)

吹き出しを右と左のどちらで使うか指定

吹き出しの色を最初から指定する場合、その吹き出しを表示させる位置は右側だけ、あるいは左側だけにします。

どちらか一方だけにしないと、三角部分の表示がおかしくなってしまうからです。

三角部分の位置を指定するのが「boeder-right」の部分。全体で4箇所あります。

色を指定する吹き出しを左側だけに表示させて使う場合、「border-right」のまま。
吹き出しを右側だけに表示させて使う場合、「border-right」を「border-left」へ変更します。

しろちゃん
しろちゃん

しろちゃんは右側だけで使うから「border-left」だよ。

しろちゃん
しろちゃん

左側で使うと、こんな風に三角部分の表示がおかしくなるよ。

Cocoonの吹き出しの色を最初から指定する④吹き出しの色を指定する

管理人
管理人

メモ帳で編集したCSSコードを使って吹き出しの色を指定するよ。

しろちゃん
しろちゃん

一番大事な所だね。

この作業を行う前には必ずサイトのバックアップを行ってください。

CSSを触る前には必ずサイトのバックアップを取る

メモ帳で編集したCSSコードを使い、Cocoonの吹き出しの色を指定します。

左の「外観」→左下「テーマエディター」の順でクリック
ここにCSSコードを入力することで、Cocoonの吹き出しの色や形を指定することができます。

上の方に「Cocoon Child:スタイルシート(style.css)」と書いてあることを確認(※「Child」の文字があることを必ず確認)します。

③下の方にスクロールし、メモ帳で編集したCSSコードを全て選択してコピー→一番最後の行にペーストします。

④下にある「ファイルを更新」をクリックします。

これで、Cocoonの吹き出しの色の指定は終わりです。

元に戻す場合は、貼り付けたCSSコードを全て削除し、「ファイルを更新」をクリックします。

Cocoonの吹き出しの色を最初から指定する⑤吹き出しの表示の確認

管理人
管理人

吹き出しの色を指定したら確認を行います。

しろちゃん
しろちゃん

まだ何かするの?

吹き出しの色の指定が終わったら、Cocoonの吹き出しが思ったように表示されるか確認します。

確認は3つの方法で行います

吹き出しの確認①吹き出しを作成して確認

下書きなどを作成し、実際に吹き出し機能を使ってみます。
以下の2点を確認しましょう。

①吹き出しに思った通りの色が付いている
②吹き出しの枠の形が正しく表示されている

吹き出しの確認②過去記事の吹き出しをパソコンから確認

過去に投稿した吹き出しにも影響があります。

パソコンから、過去記事の吹き出しの背景と、枠の色が正しく表示されていることを確認します。

吹き出しの確認③過去記事の吹き出しをスマホから確認

パソコンとスマホで吹き出しの表示が違う場合があります。

スマホでも、過去記事の吹き出しの背景と、枠の色が正しく表示されていることを確認します。

Cocoonの吹き出しの色を最初から指定する:まとめ

この記事では、『Cocoon』の吹き出しの色を最初から指定する方法をお話しました。

吹き出しの色を最初から指定する方法
  • 吹き出しの「id」を確認する
    →吹き出しを表示して「HTMLで表示」
    →「sb-id-O」の数字が「id」
  • 吹き出しの仕組み
    →三角部分と四角部分に分かれている
    →それぞれで枠と背景の色を指定する
  • CSSコードを編集する
    →吹き出しの「id」を指定
    →好きなカラーコードを指定
    →「right」か「left」を選択
  • 吹き出しの色を指定する
    →Style.cssにコピペして更新
  • 吹き出しの表示の確認
    →新規吹き出し、パソコン、スマホから確認
しろちゃん
しろちゃん

CSSよくわからなかったけど、とりあえず出来た。

管理人
管理人

それが『Cocoon』の強みだね。

『Cocoon』はプログラミングの知識がなくても、ネットで調べたCSSコードをコピペするだけで何とかなるのが魅力です。

ただ、理解しなくてもできてしまうのは危険なことでもあります。

CSSを編集する前には必ずバックアップを取り、便利な『Cocoon』を有効に活用しましょう。

コメント

  1. 寺田 より:

    月収100万円
    月間PV20万

    とか書かれてなくて、
    収益0円と正直に書いているとろが好きでした。

    cocoonの吹き出し記事参考にさせていただきました。
    頑張って下さい😊

    • いなごいなご より:

      寺田さん
      コメントありがとうございます!

      オーバーな実績って逆に胡散臭いですよね。
      かっこ悪くても、正直でいるように努めています😊

      Cocoonのカスタマイズが上手く行ったら幸いです
      お互いブログ頑張りましょう!

  2. おっちょ より:

    吹き出しのカスタマイズをするにあたり大変参考になりました。
    もし可能でしたら教えていただきたいのですが、吹き出しの「アイコン」の枠線の色を変える方法はありますでしょうか?
    もし変えられるコードがあれば教えていただきたいのですが・・・

    • いなごいなご より:

      おっちょさん
      コメントありがとうございます。

      「吹き出しアイコンの枠色」は以下のコードで指定しています。
      ───────────────────────────
      /*吹き出しアイコンの枠色を変更*/
      .sb-id-〇 .speech-icon img,.sb-id-〇  .speech-icon amp-img{
      border:2px solid #カラーコード;
      }
      .sb-id-〇 .speech-icon img,.sb-id-〇  .speech-icon amp-img{
      border:2px solid #カラーコード;
      }
      ───────────────────────────
      ・1つのコードで1種類の吹き出しの枠色を指定(上記サンプルはコード2つ分)
      ・「〇」の部分を「吹き出しのidの数字」に変更(1つのコードで2箇所変更)
      ・「カラーコード」の部分を「カラーコードの文字列」に変更(1つのコードで1箇所変更)
      ・記事本文と同じように、「テーマエディター」→「Cocoon Child:スタイルシート(style.css)」に貼り付けて更新

      これで「吹き出しアイコンの枠色」が変更できると思います。

タイトルとURLをコピーしました