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

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

産経新聞社サンスポ記者として

  • Jリーグ
  • プロ野球
  • オリンピック
    などを担当してきた『とち』(@blue_chikippaa)です。

真面目に、かるくが執筆信条。
現在は独立して、いろいろ書きながら生きてます。

Cocoonでブログやってるけど、リンクボタンとかアフィリエイトボタンが押されない!
押したくなるボタンとか”魔法”みたいな話あれば、おしえてくれ〜。

こういった悩みを解決する記事です。

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

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

WordPress5.5からは、WordPressデフォルトのボタンも実装されてパターンが増えました。

WordPressボタン画面

本記事でご紹介するのは、Cocoonボタンのカスタマイズです。
WordPressボタンには適用されませんので、ご注意を。

ただ最近、内部リンクやアフィリエイトボタンのクリック率が悪いな〜と…。

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

とCocoonの責任にして(絶対ちがう…)、ひと工夫することにしました。

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

あっこれは押さないで!記事トップに戻ります

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

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

この2点です。

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

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

必ずCocoon子テーマのスタイルシートに貼り付けましょう!

/* −−ボタンを浮かして影をつける−−*/
 .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のボタンのシャドーカラーを変える

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

下記のような感じですね。
※下記3つのボタンは画像です(押せません)。

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

Cocoonは個別の記事ごとに、CSS設定を変えることが可能。
編集画面を最下部の「カスタムCSS」を使用します。

カスタムCSS入力画面

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

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

カスタムcss画面

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

カラーコードは、下記の原色大辞典さんに膨大なバリエーションがあります。

クリック率がアップする色がある?

余談ですが「補色」って知ってますか?
色には下記の十二色相環というモデルがあり、「補色」とは色相環の反対にある色を指します。

マーケティング会社の研究で、活発な補色を用いて購入ボタンや問い合わせボタンを作ると、クリックされやすくなる結果が出ています。

(例)当ブログのメインカラーが下記の紺系

メインカラーだ!メインカラーだ!メインカラーだ!

このメインカラーに対する「補色」のボタンがこちら↓↓↓

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

うまくできましたか?
おそらく、これであなたのブログのボタンも、ばんばん押されることでしょうw。


余談ですが、僕が最近別サイトで使い始めたWordPressテーマ・SWELLのボタン機能がスゴイです。

デフォルトでクリック率までわかります。
しかも編集画面で。

SWELLボタン機能画面

普通はプラグインか、高額ヒートマップに付随する機能です。
ブロガー・アフィリエイターには超有益なデータですよね。

Cocoonも神ですがSWELLもまた神です。

コード見るだけで白目むくって人は

できない…。
コードってのを見るだけで頭痛がするんだよ。

Cocoonはユーザーが育てるテーマです。
思い通りに設計するには多少のプログラミング知識が必要になります。

僕から対応策を提案するなら、こちらのいずれか。
①カスタマイズが容易な有料テーマを選ぶ
②プログラミングを学ぶ

もちろん①が簡単ですが、プログラミングがわかるとCocoonは100倍楽しい。
どうせなら②の「学び」に投資した方がいいですよね?

※なんと0円プログラミングスクールがあります。
TechAcademyは1週間の無料体験があります。
無料体験カリキュラムでは『天気予報アプリ』の作成を通じてWebアプリケーションの基礎が学べます。
無料なのでとりあえず試してみるのが良いかなと思います。
»TechAcademyの無料体験はこちら

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

まとめ2

あくまで体感ですが、ボタンをふわりとさせたらクリック率が上がった気がします。

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

ただバナーに比べて、広告感の薄いボタンリンクは重要なパーツなんで、しっかり施策しておきたいですね。

今回はこの辺で!

当ブログで叶えられるCocoonユーザーの願い
【Cocoonカスタマイズ編】
【Cocoonカスタマイズ以外】

ご意見ご感想ぜひ!

  1. サントン より:

    とちさま

     Cocoonに関する貴重な情報をありがとうございました。こちらのカスタマイズですが、Cocoonのボタンだけでなく、囲みボタンにも反映させることも可能なものでしょうか。素人なもので基本的な質問で大変恐れ入りますが、おわかりの範囲でご教示いただけると誠に助かります。宜しくお願い申し上げます。。

    • とちとち より:

      サントンさん
      ご質問ありがとうございます。

      Cocoonの「囲みボタン」に影をつけるコードは以下になります。

      子テーマのテーマエディターか、個別ページに反映させたい場合はページ下部のcssに貼り付けてみてください!

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

  2. サントン より:

    とちさま

     さっそく有り難うございます。心より感謝いたします。

     このように自分でカスタマイズができるようになると、本当に楽しいんでしょうね。

     わたしも少しずつ精進して、いつかだれかのお役に立てるよう頑張りたいと思います。
     

    • とちとち より:

      サントンさん
      お役に立てたようで良かったです(^^)

      カスタマイズがんばってください!

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