【Cocoon】CTAボックスのカスタマイズ

こんな見た目になります

カスタマイズの手順

カスタマイズ色を変えるだけの簡単なものです。

下のカスタマイズ用CSSコードを「追加CSS」にコピペして、カラーコードの部分を好きな色に置き換えます。

追加CSSは、「管理画面→カスタマイズ→追加CSS」で編集できます。

詳しくは以下の記事あたりを参照してください。

【Cocoon】目次デザインをカスタマイズ(デザイン5種類)

alice.yuhostyles.com

2021.01.25

カスタマイズ用CSSコード

/* CTA */
.cta-box {
    background-color: #f3fafe; /* 背景色 */
    color: inherit;
}
.sidebar .cta-button .btn-l, .sidebar .cta-button .ranking-item-link-buttons a, .ranking-item-link-buttons .sidebar .cta-button a {
	color: #fff; /* ボタンの文字色 */
    background: #f58694; /* 背景色 */
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.2); /* ボタンの影 */
}