【Cocoon】吹き出しの色を自分好みにカスタマイズしよう!

Cocoon

はいどうも!ままん(@maman_selfish)です。

先日Twitterで、キム兄(@kimkim3150)さんの企画に参加して、『ブログが読みやすくなる』アドバイスをいただきました!

こういうのはホントに貴重なご意見ですし、自分でも気づいていなかった部分もあり、大変助かりました。

キム兄(@kimkim3150)さん!ありがとうございました!!!☆

ご意見を受けて、いろいろとリライトしたり設定したりした中で気になったのがこれ。

Twitter

ホントそうだよね!と思ってせっせと吹き出しを増やそうとしていたんですよ。

でもね・・・このブログにしちゃあ吹き出し地味すぎるやろ・・・ってことで!

Let’s!カスタマイズ!!

スポンサーリンク

吹き出しの色を自分好みにカスタマイズ

はい!ということで、CSS置いておきまーす!!

黒丸のところは、下記のサイトなどを参考にしてご自分の好みの色を指定してくださいね。

参考 原色色見本

WEB色見本 原色大辞典 - HTMLカラーコード
色の名前とカラーコードが一目でわかるWEB色見本

デフォルトの吹き出し色を変えるCSS

/*吹き出しの色:デフォルト*/
.speech-balloon {
border: 2px solid #●●●●●●;
}

.speech-balloon::before {
border-right: 12px solid #●●●●●●;
}

.sbp-r .speech-balloon::before {
border-left: 12px solid #●●●●●●;
}

このCSSでこんな風に吹き出しの色を変えることができます。

デフォルト左

デフォルト右

フラットの吹き出し色を変えるCSS

/*吹き出しの色:フラット*/
.sbs-flat .speech-balloon {
background-color: #●●●●●●;
border-color: #●●●●●●;
}
.sbs-flat .speech-balloon::before, .sbs-flat .speech-balloon::after {
border-right-color: #●●●●●●;
border-left-color: #●●●●●●;
}

このCSSでこんな風に吹き出しの色を変えることができます。

フラット左

フラット右

LINE風の吹き出しの色を変えるCSS

/*吹き出しの色:LINE風*/
.sbs-line.sbp-l .speech-balloon {
background-color: #●●●●●●;
border-color: #●●●●●●;
}

.sbs-line.sbp-l .speech-balloon::before, .sbs-line.sbp-r .speech-balloon::after {
border-right-color: #●●●●●●;
border-left-color: #●●●●●●;
}

.sbs-line.sbp-r .speech-balloon {
background-color: #●●●●●●;
border-color: #●●●●●●;
}

.sbs-line.sbp-r .speech-balloon::before, .sbs-line.sbp-r .speech-balloon::after {
border-right-color: #●●●●●●;
border-left-color: #●●●●●●;
}

このCSSでこんな風に吹き出しの色を変えることができます。

LINE風左

LINE風右

考え事の吹き出しの色を変えるCSS

/*吹き出しの色:考え事*/
div.sbs-think .speech-balloon::before {
border: 2px solid #9900ff;
}
	
div.sbs-think .speech-balloon::after {
border: 2px solid #9900ff;
}

@media screen and (max-width: 480px) {
.speech-wrap.sbs-think.sbp-r .speech-balloon::before{
border: 2px solid #9900ff;
}

.speech-wrap.sbs-think.sbp-r .speech-balloon::after {
border: 2px solid #9900ff;
}
}

このCSSでこんな風に吹き出しの色を変えることができます。

考え事左

考え事右

スポンサーリンク

テキストエディタでも吹き出しを使い倒そう

一般的に吹き出しといえば、ビジュアルエディタで使うものらしいですね。

わたしはといえば、テキストエディタでゴリゴリ使い倒しています。

スマホで作業(モブログ)しやすくするためにも、テキストエディタでも吹き出しを使えるようにしておくといいですね。

参考 【Cocoon】テキストエディタでも吹き出しを使えるようにするひと手間

【モブログでも!】Cocoonの吹き出しをテキストエディタで簡単に使えるようにするひと手間
はいどうも!ままん(@maman_selfish)です! つい最近、新しくブログを立ち上げてちょこちょこ手を入れてるんですけども。 新しいブログでは、ブログテーマに【Cocoon】を採用してみました。 機能も多く、使いこな...

吹き出しも上手に使ってゴリッゴリに個性出していきましょう!

コメント