【Cocoon】デフォルトのボタン色を変更するCSSカスタマイズ

Cocoonカスタマイズ

今回はCocoonのデフォルトボタン配色を変更するCSSカスタマイズを紹介します。


こんにちは、斉藤コウ(@S41T0H)です。

今回はテーマ別に、Cocoonのデフォルトボタンカラーを一括変更するCSSコードを紹介します。

スポンサーリンク

CocoonデフォルトのボタンカラーとCSS

Cocoonデフォルトのボタンカラーはこのようになっています。

Cocoonデフォルトのボタン配色

エディター画面から挿入できるボタンのほか、CTAボックスウィジェットなどで指定できるボタンカラーも上記の配色となっています。

これらのCSSは以下。

.btn-red { background-color: #f44336; } /* レッド */
.btn-pink { background-color: #e91e63; } /* ピンク */
.btn-purple { background-color: #9c27b0; } /* パープル */
.btn-deep { background-color: #673ab7; } /* ディープパープル */
.btn-indigo { background-color: #3f51b5; } /* インディゴ(紺色) */
.btn-blue { background-color: #2196f3; } /* ブルー */
.btn-light-blue { background-color: #03a9f4; } /* ライトブルー */
.btn-cyan { background-color: #00bcd4; } /* シアン */
.btn-teal { background-color: #009688;} /* ティール(緑色がかった青) */
.btn-green { background-color: #4caf50; } /* グリーン */
.btn-light-green { background-color: #8bc34a; } /* ライトグリーン */
.btn-lime { background-color: #cddc39; } /* ライム */
.btn-yellow { background-color: #edd60e; } /* イエロー */
.btn-amber { background-color: #ffc107; } /* アンバー(琥珀色) */
.btn-orange { background-color: #ff9800; } /* オレンジ */
.btn-deep-orange { background-color: #ff5722; } /* ディープオレンジ */
.btn-brown { background-color: #795548; } /* ブラウン */
.btn-grey { background-color: #9e9e9e; } /* グレー */

ボタンカラーをお好みの色に変更したい場合は、子テーマstyle.cssに貼り付けたうえでカラーコード部分(#f44336などの部分)をお好みの色に変更してみてください。

個人的には、クリック率が高いと言われている緑色はもっとビビッドな色がよかったりします。

そこで、色々な配色案と色見本を紹介してみます。

Cocoonのボタンカラー配色案!(コピペ可)

原色ギラギラなビビッドカラー!

ビビッドカラー

かなり目立つ色にしてみました。

ちなみにライトグリーンはLINEのブランドカラー、ライトブルーはTwitterのブランドカラーにしています。

CSSコード(クリックで開閉)
.btn-red { background-color: #ff0000; } /* レッド */
.btn-pink { background-color: #ff00ff; } /* ピンク */
.btn-purple { background-color: #8c19ff; } /* パープル */
.btn-deep { background-color: #673ab7; } /* ディープパープル */
.btn-indigo { background-color: #191970; } /* インディゴ(紺色) */
.btn-blue { background-color: #0000ff; } /* ブルー */
.btn-light-blue { background-color: #55acee; } /* ライトブルー */
.btn-cyan { background-color: #00ffff; } /* シアン */
.btn-teal { background-color: #008080;} /* ティール(緑色がかった青) */
.btn-green { background-color: #008000; } /* グリーン */
.btn-light-green { background-color: #1dcd00; } /* ライトグリーン */
.btn-lime { background-color: #7fff00; } /* ライム */
.btn-yellow { background-color: #ffff00; } /* イエロー */
.btn-amber { background-color: #ffd700; } /* アンバー(琥珀色) */
.btn-orange { background-color: #ff7f00; } /* オレンジ */
.btn-deep-orange { background-color: #ff4500; } /* ディープオレンジ */
.btn-brown { background-color: #8b4513; } /* ブラウン */
.btn-grey { background-color: #9e9e9e; } /* グレー */

ポップでかわいいパステルカラー!

パステルカラー

こちらはかわいいデザインのパステルカラーにしてみました。

文字が白いとすこし読みづらいです。

CSSコード(クリックで開閉)
.btn-red { background-color: #ff7f7f; } /* レッド */
.btn-pink { background-color: #ff93ff; } /* ピンク */
.btn-purple { background-color: #bf7fff; } /* パープル */
.btn-deep { background-color: #ba55d3; } /* ディープパープル */
.btn-indigo { background-color: #191970; } /* インディゴ(紺色) */
.btn-blue { background-color: #7f7fff; } /* ブルー */
.btn-light-blue { background-color: #7fbfff; } /* ライトブルー */
.btn-cyan { background-color: #84ffff; } /* シアン */
.btn-teal { background-color: #7fffbf;} /* ティール(緑色がかった青) */
.btn-green { background-color: #7fff7f; } /* グリーン */
.btn-light-green { background-color: #98fb98; } /* ライトグリーン */
.btn-lime { background-color: #bfff7f; } /* ライム */
.btn-yellow { background-color: #ffff7f; } /* イエロー */
.btn-amber { background-color: #ffd700; } /* アンバー(琥珀色) */
.btn-orange { background-color: #ffbf7f; } /* オレンジ */
.btn-deep-orange { background-color: #d2691e; } /* ディープオレンジ */
.btn-brown { background-color: #8b4513; } /* ブラウン */
.btn-grey { background-color: #9e9e9e; } /* グレー */

おまけ:Cocoonのボタンに影をつけてみる

Cocoonのデフォルトだとボタンがフラットすぎて、ボタンであることがわかりづらくなっています。

そこで、ボタンに影を付けるCSSもあわせて置いておきます。

お好みでどうぞ。

.btn{
	box-shadow: 0 7px 10px -5px rgba(0,0,0,0.5);
}

また、影をつけてさらに角を円くしたい場合はこちら。

.btn{
	border-radius: 35px;
	box-shadow: 0 7px 10px -5px rgba(0,0,0,0.5);
}

数値等はお好みで変えてみてくださいね。

【支援お待ちしております!】

当サイトが役に立ったと思ったら投げ銭サービスpolcaで支援していただけたら幸いです!(300円単位での投げ銭が可能です)

継続的な更新・サポートのためにご支援お願いいたします……!

▶支援先:サイトに掲載するCSSカスタマイズの支援をお待ちしています!

サイトに掲載するCSSカスタマイズの支援をお待ちしています! - polca(ポルカ)
"今後の記事執筆の励みになります!"を支援のおかえしとして受け取ることができます。

その他のカスタマイズは下記ボタンから。

コメント