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

Cocoonカスタマイズ

2018/09/13 2018/09/09

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

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

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

この記事の目次

CocoonデフォルトのボタンカラーとCSS
Cocoonのボタンカラー配色案！（コピペ可）
- 原色ギラギラなビビッドカラー！
- ポップでかわいいパステルカラー！
おまけ：Cocoonのボタンに影をつけてみる

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

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カスタマイズの支援をお待ちしています！

今後の記事執筆の励みになります！を支援のおかえしとして受け取ることができます。

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

【5ステップ】「Cocoon」まるごとカスタマイズ講座【コピペ可】

名前:みかん :投稿日：2019/01/06(日) 03:49:18 ID：Q1NjI5MDM

こんにちは
いつもカスタマイズの参考にさせていただいています。ありがとうございます。
おかげでコクーンのボタン変更がとっても簡単にできました。
さらに囲みボタンの色を変えたい場合はどのような記述をすればいいでしょうか？
囲みボタンのCSSを教えていただけたら幸いです。
よろしくお願いいたしますm(_ _m)

返信

名前:斉藤コウ :投稿日：2019/02/15(金) 13:22:17 ID：A1OTA5OTk
囲みボタンのCSSクラスを検証ツールを調べて、border-colorで調整すればできそうです。
返信