今回はCocoonのデフォルトボタン配色を変更するCSSカスタマイズを紹介します。
こんにちは、斉藤コウ(@S41T0H)です。
今回はテーマ別に、Cocoonのデフォルトボタンカラーを一括変更するCSSコードを紹介します。
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のブランドカラーにしています。
ポップでかわいいパステルカラー！
こちらはかわいいデザインのパステルカラーにしてみました。
文字が白いとすこし読みづらいです。
おまけ：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カスタマイズの支援をお待ちしています！
その他のカスタマイズは下記ボタンから。
コメント