Cocoonのボタンを「思わずポチる」感じに変える方法

Cocoonのボタンを「思わずポチる」感じに変える方法
Cocoonユーザー
Cocoonユーザー
  • Cocoonのボタンをふわっと浮かぶデザインにしたい
  • リンクボタンのクリック率を上げたいな
  • できれば難しいコードとかの話は無しで!

こういった疑問に答えます。

WordPress最強の無料テーマCocoonには、標準で多くのボタンパターンが備わっています。

これに文字の大きさや、カラーパレット31色の組み合わせができるんで、かなりのバリエーションですね。

Cocoonのカラーを追加する方法は、こちらの記事を。
参考【Cocoon】カラーパレットに好きな色を追加する【6種増!】

ただ最近、当ブログの内部リンクやアフィリンクのクリック率が悪いな〜と…。

とち
とち

これ、ボタンのせいじゃね!

と思うことにして(絶対ちがう)、ひと工夫することにしました。

下記のような『ふわりと浮かぶ、思わず押したくなる影つきボタン』ができたんで、興味ある人は取り入れてみて下さい。

これは画像です。

すべてコピペで、できますよ。

Cocoonのボタンを「思わずポチる」感じに変える方法

Cocoonのボタンを「思わずポチる」感じに変える方法
ふわりボタンの作り方
  • ボタン下に影をつける
  • カーソルを乗せたときに沈むようにする

この2点です。

今回使用するのは、こちらのコード。

下記をWordPressダッシュボードの『外観』→『テーマエディター』→『スタイルシート (style.css)』に貼り付ければOKです。

必ず子テーマのスタイルシートに貼り付けましょう!親テーマだとアプデで飛びます。

/* −−ボタンを浮かして影をつける−−*/
.btn{
box-shadow: 0 7px 0px #808080;
}
/*−−−
ボタンが重なったときに沈む−−−*/
.btn:hover{
box-shadow: 0 1px 0 #808080 ;
transform: translateY(6px);
-webkit-transform: translateY(6px);
}
/*−−−
カーソルを外したときに元に戻す−−−*/
.btn{
transition:.5s ease-in-out;
}

これで下記のような影付きボタンが、できたのではと思います。

これは画像です

Cocoonのボタンのシャドーカラーを変える

Cocoonのボタンのシャドーカラーを変える

個人的にですが、影の色はボタンカラーに少し黒を混ぜた配合が最もいい感じがしてます。

下記のような感じですね。

なので、ボタンカラーに合わせて影の色を変える方法もご紹介しておきます。

Cocoonは個別の記事ごとに、CSS設定を変えることができます。

記事作成画面を1番下までスクロールしたら出てくる「カスタムCSS」です。

ここに、このページにだけ反映させたいCSSコードを入力します。

先ほどのコードを、もう一度貼ります。

この赤枠で囲った#808080がカラーコードなんで、ここをボタンカラーに合わせて変えましょう。

カラーコードは、下記の原色大辞典さんなどを参考にすればこれでもかというバリエーションを知ることができます。

Cocoonでは個別の記事編集のカスタムcssが優先されます。

なんで、全体は無難なグレー系にして、各記事に応じてボタンに合わせた影色を付けるやり方がいいんじゃないかと思います。

まぁこれは好みで。

影付きボタンのカスタマイズは以上です。

Cocoonのカスタマイズ記事、他にも書いているんで見てってくださいm(_ _)m

コード見るだけで白目むく人→有料テーマも検討を^_^

Cocoonはユーザーによるカスタマイズを求めるテーマでもありますので、どうしても多少のプログラミング知識が必要になります。

やっぱりコードとかよくわからんし、
もうカスタマイズで萎える…。

って人はWordPressおすすめの有料テーマを考えてみてはどうでしょう?プログラミング知識がなくても、綺麗なサイト作りが容易になりますヨ。

カスタマイズにかける時間を、記事に費やせばペイできるぐらいの値段ですし・ω・

Cocoonのボタンを「思わずポチる」感じに変える方法:まとめ

まとめ2

あくまで体感で申し訳ないですが、ボタンをふわりとさせたら、当ブログもクリック率が上がった気がしてます。

きっちりデータで示せよ!って話ですが、「ボタンを変えたことだけによる効果」を実証するのは、ちょっと無理(-_-;)

ただ、バナー広告がほとんど意味がない昨今、広告色の薄いボタンリンクは貴重なんで、しっかり施策しておきたいですね。

今回はこの辺で👋

関連記事 【初ブログ向け】WordPressおすすめテーマ6選【無料あり】

人気記事【2020年最新】アフィリエイトASPおすすめ7社【悩み無用】

コメント待ってます!

タイトルとURLをコピーしました