おかぴー
今回は、無料テーマの「Cocoon」にデフォルトで備わっている吹き出しのカスタマイズをしてみました。
デフォルトではサンプル画像が入っていて、自分の画像に差し替えることでオリジナリティを出せるのですが、
もう少し表現を増やしていきたいと思います。
なぜなら、吹き出しは喜怒哀楽を表現できる重要なアイテムになるからです。
たとえば、笑った表情でこんな風に叫んでいてもなんか変ですよね↓
おかぴー他にも、悲しいときに笑顔で吹き出しを使っても違和感が半端ないですね（笑）
吹き出しにはブログでの表現を高める効果があるので、言葉と合わない画像を使うと、読者の方が違和感を感じて記事に集中できないなんてことも。
人間の集中力はそんな強くないのです。
ちょっとしたことですが、せっかく頑張って作った記事コンテンツだと思うので、
きちんと感情に従って画像を使い分けることで、読者の方に記事の内容をもっともっと伝えられるようになると思いますよ！
それでは、さっそくご覧ください。
今回のカスタマイズ一覧
こちらが今回行ったカスタマイズです。
【パソコンで見た場合↓】
（スマホで記事を見ている場合、大きく見えないのでパソコンでご覧ください^^）
【スマホで見た場合↓】
Cocoonの吹き出し設定
まず吹き出しの設定画面の場所を確認します。
ワードプレスの管理画面から、「Cocoon設定＞吹き出し」の中にある10パターンの中から好きなものを選んで記事内に入れていくことができますね。
１、アイコンの背景色を変える
と、アイコンの背景色のカスタマイズに関して先にお伝えすることがあります。
それは、今回は画像を「JPEG」ではなく「PNG」を使用します。
ですので、元々アイコン画像に背景色を設定してJPEGで作っている場合は、アイコン背景色のカスタマイズはできません。
アイコン画像の背景色変更は、PNGデータ（背景が透過（透明に）している）＋CSSで背景色の変更をしているので、背景色がある場合はCSSが効かないからです。
JPEGはデータの性質上、背景を透過させることはできないので、
画像を作る場合は色をあらかじめ決めて作る必要があります。
もし今後、「色を少し変えたいな〜」と思ったときに、
PNGデータで作っていればCSSコードで簡単に色の調整をすることができるので、カスタマイズ性にも優れていたりします。
今回は、この方法でやっていきたいと思います。
.sb-id-2 .speech-icon img,.sb-id-2 .speech-icon amp-img{
background:pink;/*色はここで指定します*/
}
.sb-id-2 .speech-icon img,.sb-id-2 .speech-icon amp-img{
background:yellow;
}
.sb-id-2 .speech-icon img,.sb-id-2 .speech-icon amp-img{
background:skyblue;
}
追加CSSにコピペすると、アイコン背景の色が変わります。
さて、コードを見ていただくと、「sb-id-2」と書いてあると思いますが、これは吹き出しのデフォルト設定の番号を表しています。
デフォルトは下から順にidが、1〜10まで割り振られていて、今回は下から２番目の吹き出し（[SAMPLE 002]女性（右））の背景の指定をしています。
よって、もし他の吹き出しのアイコン画像の背景を変えたい場合は、
「sb-id-2」を、「sb-id-3」、「sb-id-10」などに変更してください。
お使いの吹き出しの番号は、設定の赤枠内で確認できます↓
この画像で言うと、一番上は「sb-id-10」と指定します。
また、色の指定ですが、
「pink」や「yellow」ではなくもっと細かく指定が可能です。
その場合は、カラーコードを活用しましょう。
グーグル検索で、「カラーコード 黄色」とか調べると、
「#F7FE2E」といった感じで、色がCSSのコードで指定できるサイトが出てきますので、
これで変えてあげる場合は、以下のように「background:」の後ろにカラーコードをコピペします↓
.sb-id-10 .speech-icon img,.sb-id-10 .speech-icon amp-img{
background:#F7FE2E;/*黄色*/
}
これで、細かな色合いを指定できます。
色のカラーコードが簡単に見つかるわかりやすいサイトがありますので、一つ例として載せておきますね^^
２、コメントの背景色を変える
今度は、コメント部分の背景色を変えてみます。
まずは、[SAMPLE 003]ビジネスマン（左）を使用した場合（sb-id-3）
上の２つですね。
.sb-id-3 .speech-balloon{
background:#85e249;/*コメント部分の「背景色」*/
border-color:#85e249;/*コメント部分の「枠の色」*/
}
.sb-id-3 .speech-balloon::before,.sb-id-3 .speech-balloon::after{
background:none;
border-right-color:#85e249;/*コメントの「三角形の部分の色」*/
}
.sb-id-3 .speech-balloon{
background:#4C5CB0;
border-color:#4C5CB0;
}
.sb-id-3 .speech-balloon::before,.sb-id-3 .speech-balloon::after{
background:none;
border-right-color:#4C5CB0;
}
.sb-id-3 .speech-balloon p{
color:#fff;/*文字を白に変更*/
}
次にストライプ風です。
コメントは、[SAMPLE 005]悩むおじさん（左）の場合（sb-id-5）を使用。
一番下のコメントです。
.sb-id-5 .speech-balloon{
border:none;/*コメント枠を削除*/
-webkit-background-size: 15px 15px;
-moz-background-size: 15px 15px;
background-size: 15px 15px;
background-color: #fff;
background-image: -webkit-gradient(linear, 0 0, 100% 100%,
color-stop(.25, #e6e6fa), color-stop(.25, transparent),
color-stop(.5, transparent), color-stop(.5, #e6e6fa),
color-stop(.75, #e6e6fa), color-stop(.75, transparent),
to(transparent));
background-image: -webkit-linear-gradient(-45deg, #e6e6fa 25%, transparent 25%,
transparent 50%, #e6e6fa 50%, #e6e6fa 75%,
transparent 75%, transparent);
background-image: -moz-linear-gradient(-45deg, #e6e6fa 25%, transparent 25%,
transparent 50%, #e6e6fa 50%, #e6e6fa 75%,
transparent 75%, transparent);
background-image: -ms-linear-gradient(-45deg, #e6e6fa 25%, transparent 25%,
transparent 50%, #e6e6fa 50%, #e6e6fa 75%,
transparent 75%, transparent);
background-image: -o-linear-gradient(-45deg, #e6e6fa 25%, transparent 25%,
transparent 50%, #e6e6fa 50%, #e6e6fa 75%,
transparent 75%, transparent);
background-image: linear-gradient(-45deg, #e6e6fa 25%, transparent 25%,
transparent 50%, #e6e6fa 50%, #e6e6fa 75%,
transparent 75%, transparent);
/*コメント欄・ストライプ背景*/
}
.sb-id-5 .speech-balloon::after{
border-right:none;/*吹き出し一部削除*/
}
ちょっとコードが多いので、どれがどの部分か解説します。
①LINE風に関して。
「background:」の後に、LINEでおなじみの緑色のカラーコードを指定しています。
「background」は、背景を指定するCSSのコード。
「border-color」は、ボーダー＝線のこと。
つまり、枠線の色を指定するCSSのコードとなります。
この２つを同じLINEの緑色を指定してあげることで、LINEでのやりとりのような色が出せます。
そして、人物からコメントまで伸びる三角形の部分にも色を指定してあげます。
「border-right-color」がその指定する部分ですが、
今回使った左からコメントするものはこれでOKです。
逆に、右からコメントするようなものであれば、
この部分を「border-left-color」という感じで、「right→left」に書き換えてください。
具体的には、画像の上から３つ目のコメント、
これは[SAMPLE 004]ビジネスウーマン（右）がそうです。
このコメントは元々、LINE風にコーディングされたコメントで、
background:none;
border-left-color:#85e249;
}
と指定されているので、右からのコメント部分がうまく色指定されています。
こちらも、コメントの種類を変える場合は、「sb-id」の番号を変えて、
追加CSSにコピペしてみてください^^
②Facebook風に関して
最後の文字を白に変更する以外は、仕組みはLINE風と一緒です。
色が濃いブルーになるので、黒文字だと視認性が悪くなるため、以下のコードで文字を白に変更しています。
color:#fff;/*文字を白に変更*/
}
③ストライプ風に関して
ちょっとコードが長くてびっくりしたかもしれませんが、
これもコードを作ってくれるサイトからコピペしたものになります。
ストライプや、その他チェック柄、縞模様など多様なデザインのコードを簡単な数値や色を指定して打ち込むだけで教えてくれます。
こちらも参考までに載せておきますね^^
ストライプや多彩な柄のCSSコードを作成できるサイト
そして、コードの中の、
「border:none/*コメント枠を削除*/」
という箇所があると思いますが、
ストライプにすると、枠がない方がキレイに表示されるためコメント枠を無くしています。
そのためのコードです。
（もし、枠を残したい場合は、この一列を丸ごと削除してください）
その下の、
「-webkit-background-size: 15px 15px;」〜「transparent 75%, transparent);
/*コメント欄・ストライプ背景*/」
までがストライプのCSSコードを貼り付けています。
そして最後に、
「.sb-id-5 .speech-balloon::after{
border-right:none;/*吹き出し一部削除*/
}」
とあるのが、コメントの三角形の部分です。
これを削除しないと表示が少し変になるので、追記しています。
これもまた、左のコメントのため、
もし右に配置されているコメントの場合は、
「.sb-id-5 .speech-balloon::after{
border-left:none;/*吹き出し一部削除*/
}」
と変更してください。
３、アイコンの大きさを変える
今度は、アイコンの大きさを変えましょう。
[SAMPLE 006]悩むおばさん（右）を使用した場合（sb-id-6）
/*画像の拡大*/
.sb-id-6 .speech-person{
width:130px;
}
[SAMPLE 007]男性医師（左）を使用した場合（sb-id-7）
.sb-id-7 .speech-person{
width:500px;
}
画像を大きくするのはいいとは思うのですが、
大きすぎるとスマホでコメント部分が小さくなりますので注意しましょう。
モバイルファーストを考えると、ある程度の大きさで収めるのがいいと思います^^
５、アイコン枠の色変更
次に、アイコン画像の枠の色を変更します。
[SAMPLE 008]女性医師（右）を使用した場合（sb-id-8）
.sb-id-8 .speech-icon img,.sb-id-8 .speech-icon amp-img{
border:2px solid pink;
}
６、コメントの枠の色を変える
今度はコメントの枠の色を変えます。
[SAMPLE 009]どや顔男性（左）を使用した場合（sb-id-9）
/*大きな枠*/
.sb-id-9 .speech-balloon{
border:2px solid gold;
}
/*吹き出しの丸２つの色*/
.sb-id-9.sbs-think .speech-balloon::before,.sb-id-9.sbs-think .speech-balloon::after{
border:2px solid gold;
}
最初のコードで大きなコメント部分の枠を色変更しています。
次のコードで、考え中によく出てくる◯の枠を色変更しますが、
最後のコードは
[SAMPLE 009]どや顔男性（左）を使用した場合（sb-id-9）
[SAMPLE 0010]どや顔女性（右）を使用した場合（sb-id-10）
の２つ専用のコードです。
考え中の、ホワホワッと出てくる◯の箇所の指定をしているためです。
６、アイコンの枠を削除する
最後にアイコンの枠を取るコードを書いていきますね。
[SAMPLE 0010]どや顔女性（右）を使用した場合（sb-id-10）
.sb-id-10 .speech-icon img,.sb-id-10 .speech-icon amp-img{
border:none;/*枠線を削除*/
background:pink;/*アイコン背景*/
}
アイコンの女性が話している通り、デフォルトではグレーの枠が指定されています。
その枠＝線を、「border:none;」で削除できます。
ただ、枠を削除すると背景が何もなくなってしまうので、
「background」を使って背景色を指定しています。
主に使うコードまとめ
ここまで出てきたコードで、よく使うものを最後にまとめます。
background
border:2px solid 【色を指定】;
「2px」：この数字を変更すると、枠線の太さが変わります。
【色を指定】：ここでカラーコードなどで色を指定します。
border:none;
だいたい使うのはここらへんでしょうか^^
ちなみに、どのコードも途中の「 : 」や、締めの「 ; 」を忘れないようにしてくださいね。
そうしないと、CSSがうまく働きませんので。
色を選ぶときのコツ
色には、人に様々な印象を与える効果があります。
たとえば、
「悲しいときは青・元気があるときは黄・怒っているときは赤」
といった感じで、
色により喜怒哀楽を伝えることができたりします。
他の例をあげるなら、信号機がわかりやすいですね。
青（緑）＝進め。安心感を高める色。
赤＝止まれ。危険や注意を呼びかける色。
普段の生活でも色は様々なところで効果的に使われています。
ブログでも効果的に色を活用できたらいいですね！
まとめ
いかがでしたでしょうか。
吹き出しを使う、使わないはブログの内容によって分かれてくると思います。
今回の中でオススメの使い方は、
「１、アイコンの背景色を変える」、「３、アイコンの大きさを変える」です。
スマホで見ると、かなりアイコン画像が小さくなっているので、
これだとせっかく作った画像が見えない場合があるかなと思うからです。
ただし、冒頭でも書いたのですが、
JPEGやPNGでも画像の背景をもともと色を指定して設定していた場合は、
「１、アイコンの背景色を変える」は必要ないです。
そして、僕がそう考える理由として、
「ブログに人がいる感じがあるかどうか？」
がブログでとても重要な要素だと考えているからです。
単に文字だけで情報を発信するよりも、
読んでいる方にブログの表情、つまり作っている人が見えてくる作り方をするのがファンになってもらえるブログの作り方だと思います。
そう考えると、吹き出しは記事の中に感情を表現し、
ブログのオリジナリティを引き出してくれる効果的なアイテムの一つになるはずなので、
文章の区切りのアクセントとして活用できるし、
読んでて飽きないコンテンツ作りにとても役立つと思いますよ^^
コメント