【Cocoon】CTAボックスの背景色を変えたいときのカスタマイズの方法【コピペOK】

Cocoon

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

さて、わたしがCocoonを愛用するようになってしばらく経ちますが、ほぼ大満足!と思っています。

カスタマイズについてもすでに記事になっているものも多く、大半のことはGoogleが教えてくれます。

ただ、中には他の人は気にならないかもしれないけど、わたしは気になりますよ?!という部分もあります。

その代表格が、今回のCTAボックスの背景色でした。

わたしはいつもスマホ作業民(モブログ)なのでどうしようもなかったんです。

そんな中、久々にパソコンを使えたのでせっせとCTAボックスの背景をどう変えたらいいのか調べてみたら、自力でできちゃったので記事にしてみます。

わたしのように

Cocoon好きやねんけどCTAボックスの背景色はどうにかしたいねん・・・

という方に届いたらいいなと思います。

スポンサーリンク

CTAボックスの使い方

このあたりのことは、Cocoonの生みの親であるわいひらさん(@MrYhira)がすでに記事にしてくださっているので、こちらを参考にしていただいたらいいと思います。

非常に簡単なので、なにかおすすめしたいことがある場合は利用するといいですよ。
CTA(コール トゥ アクション)ボックスを作成する方法

CTA(コール トゥ アクション)ボックスを作成する方法
Call To Actionは日本語で言えば「行動喚起」。ウェブサイトで、訪問者に訪れて欲しいページに誘導するためのボタンつきボックスです。
スポンサーリンク

デフォルトのCTAボックス背景色が暗すぎる問題

わたしはCocoonに変えてからCTAボックスが標準装備されていることを知ったのです

装備されているなら使わない手はない!!

ですよね?!

こえだめレインボーでは、特におすすめしている何かがある訳でもないので利用していませんが、他のブログではゴリゴリ活用させていただいてます。

ところがですね、デフォルトのCTAボックスはこんな感じなんです。

・・・背景色暗すぎひん?!

いやね、わたしが少しばかり派手目の色が好きだとかそういうこともあるかもしれませんけどね・・・

いや!
やっぱ背景色暗すぎひん?!

ということで、魔改造タイムです。

スポンサーリンク

CTAボックスの背景色を変えたいならCSSにはこう書くのよ!

.cta-box {
background-color: #⚫⚫⚫⚫⚫⚫;
color: #fff;
padding: 20px;
}

#⚫⚫⚫⚫⚫⚫のところは、色見本などを参考にお好みの色に変えてくださいね。

ひとまずこれをコピペしてstyle.cssに貼り、色のコードをぶち込みさえすれば、いろんな背景色のCTAボックスも使えるようになります。

ブログの雰囲気やカラーに合わせてカスタマイズしてみてください。

今回は、この記事だけに#bf7fffという薄い紫に背景色を変更したCTAボックスを表示させておきます。

記事限定やカテゴリ限定などの指定もできるので、使い方の幅も広がりますね。

スポンサーリンク

追記:AMPでもCTAボックスの背景色を変更する

さて、投稿して数分後にある問題に気づき、そのまた数分後に対応策を見つけたので追記します。笑

その問題とは

AMPだとCTAボックスの背景色が変わってへんやないかい!

という点です。

Twitterでリンクをつけて呟いた場合もAMPページの表示になりますよね。

先程リンクをつけて呟いたあとに自分でそのリンクを踏んで確認したところ、何も変化が起きていませんでした。

ガーン!!!ということで、対応策です。

amp.cssに同じこと書いたらええぞ!

外観→テーマの編集→amp.cssと進み、そこにも上記のコードを貼り付ければOKでした。

画像を参考にしてくださいね。

AMPでは制限も多いですが、この程度なら反映してくれるようです。

よかったよかった!

特にお知らせはないけれど
ここの背景暗すぎん?

CTAボックスの背景を変えたくてもやり方がよくわからない方に向けて記事を書いています。
参考になれば幸いです。

Cocoon
スポンサーリンク
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
\ Follow Me /
こえだめレインボー

コメント