イラストブログ「おやこクリエイト」

クリック率が上がる!?光るボタンをAFFINGER以外でも使うCSSカスタマイズ




いらっしゃいませ三姉妹育児に奮闘中の主婦、あず(oyakocreate)です。

Twitterでこんなツイートを見かけました。

AFFINGER5に採用されている「光るボタンリンク」を使うと、クリック率が30%も上がる…だと!?

しかし、私はAFFINGER5を持っていませんし、今のところ購入予定もありません。

わたし

でも光るボタン使ってみたいなあ…

ということで、

AFFINGER以外のテーマでも(↑)こんな光るボタンを使えるように、コードを作ってみました。

動作確認済みのテーマ
  • SANGO(PORIPU)
  • JIN
  • Diver

所有している有名どころのテーマでは、動作確認しています。

わたし

AFFINGERのものとは光り方やデザインが違いますが、これはこれでキレイにできました。

だんな

それ、自分で言うの?

光るボタンを実装するためのCSSコード

紹介しているコードをstyle.cssにコピペするだけで実装できます。

わたし

親テーマのアプデ後も書き直さなくて良いように、なるべく子テーマのstyle.cssに追記してくださいね!

4色用意してみたので、好きなものを1つだけ選んでコピペしてください。

style.cssにコードを追加すると、以下のHTMLでボタンリンクが使えるようになります。

<div class="shinybutton">ここにリンクタグ</div>

赤いボタン

/*赤い光るボタン*/
.shinybutton {
 display: block;
 width: 100%;
 margin-bottom: 1em;
}
.shinybutton a {
 display: block;
 position: relative;
 z-index: 2;
 overflow: hidden;
 width: 100%;
 font-weight: bold ;
 border-bottom: solid 5px #e53935 ;
border-radius: 5px;
 background-color: #ef5350 ;
 color: #ffffff !important;
 padding: 12px 0;
 text-align: center;
 text-decoration: none;
 transition: .25s linear;
 -webkit-transition: .25s linear;
 -moz-transition: .25s linear;
}
.shinybutton a:hover {
 -ms-transform: translateY(4px);
 -webkit-transform: translateY(4px);
 transform: translateY(4px);/*下に動く*/
 border-bottom: none;/*線を消す*/
}
.shinybutton a:before {
 display: block;
 position: absolute;
 z-index: -1;
 left: -30%;
 top: -50%;
 content: "";
 width: 30px;
 height: 100px;
 transform: rotate(30deg);
 -webkit-transform: rotate(30deg);
 -moz-transform: rotate(30deg);
 background-image: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
 background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,1)),color-stop(100%,rgba(255,255,255,0)));
 background-image: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, #ffffff rgba(255,255,255,1),rgba(255,255,255,0) 100%);
 animation: shiny 2s infinite linear;
 -webkit-animation: shiny 2s infinite linear;
 -moz-animation: shiny 2s infinite linear;
}
@keyframes shiny {
 0% { left: -30%; }
 20% { left: 120%; }
 100% { left: 120%; }
}
@-webkit-keyframes shiny {
 0% { left: -30%; }
 20% { left: 120%; }
 100% { left: 120%; }
}
@-moz-keyframes shiny {
 0% { left: -30%; }
 20% { left: 120%; }
 100% { left: 120%;}
}

青いボタン

/*青い光るボタン*/
.shinybutton {
 display: block;
 width: 100%;
 margin-bottom: 1em;
}
.shinybutton a {
 display: block;
 position: relative;
 z-index: 2;
 overflow: hidden;
 width: 100%;
 font-weight: bold ;
 border-bottom: solid 5px #2E64FE;
border-radius: 5px;
 background-color: #5882FA;
 color: #ffffff !important;
 padding: 12px 0;
 text-align: center;
 text-decoration: none;
 transition: .25s linear;
 -webkit-transition: .25s linear;
 -moz-transition: .25s linear;
}
.shinybutton a:hover {
 -ms-transform: translateY(4px);
 -webkit-transform: translateY(4px);
 transform: translateY(4px);/*下に動く*/
 border-bottom: none;/*線を消す*/
}
.shinybutton a:before {
 display: block;
 position: absolute;
 z-index: -1;
 left: -30%;
 top: -50%;
 content: "";
 width: 30px;
 height: 100px;
 transform: rotate(30deg);
 -webkit-transform: rotate(30deg);
 -moz-transform: rotate(30deg);
 background-image: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
 background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,1)),color-stop(100%,rgba(255,255,255,0)));
 background-image: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, #ffffff rgba(255,255,255,1),rgba(255,255,255,0) 100%);
 animation: shiny 2s infinite linear;
 -webkit-animation: shiny 2s infinite linear;
 -moz-animation: shiny 2s infinite linear;
}
@keyframes shiny {
 0% { left: -30%; }
 20% { left: 120%; }
 100% { left: 120%; }
}
@-webkit-keyframes shiny {
 0% { left: -30%; }
 20% { left: 120%; }
 100% { left: 120%; }
}
@-moz-keyframes shiny {
 0% { left: -30%; }
 20% { left: 120%; }
 100% { left: 120%;}
}

緑のボタン

/*緑の光るボタン*/
.shinybutton {
 display: block;
 width: 100%;
 margin-bottom: 1em;
}
.shinybutton a {
 display: block;
 position: relative;
 z-index: 2;
 overflow: hidden;
 width: 100%;
 font-weight: bold ;
 border-bottom: solid 5px #00CC99;
border-radius: 5px;
 background-color: #66CC99;
 color: #ffffff !important;
 padding: 12px 0;
 text-align: center;
 text-decoration: none;
 transition: .25s linear;
 -webkit-transition: .25s linear;
 -moz-transition: .25s linear;
}
.shinybutton a:hover {
 -ms-transform: translateY(4px);
 -webkit-transform: translateY(4px);
 transform: translateY(4px);/*下に動く*/
 border-bottom: none;/*線を消す*/
}
.shinybutton a:before {
 display: block;
 position: absolute;
 z-index: -1;
 left: -30%;
 top: -50%;
 content: "";
 width: 30px;
 height: 100px;
 transform: rotate(30deg);
 -webkit-transform: rotate(30deg);
 -moz-transform: rotate(30deg);
 background-image: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
 background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,1)),color-stop(100%,rgba(255,255,255,0)));
 background-image: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, #ffffff rgba(255,255,255,1),rgba(255,255,255,0) 100%);
 animation: shiny 2s infinite linear;
 -webkit-animation: shiny 2s infinite linear;
 -moz-animation: shiny 2s infinite linear;
}
@keyframes shiny {
 0% { left: -30%; }
 20% { left: 120%; }
 100% { left: 120%; }
}
@-webkit-keyframes shiny {
 0% { left: -30%; }
 20% { left: 120%; }
 100% { left: 120%; }
}
@-moz-keyframes shiny {
 0% { left: -30%; }
 20% { left: 120%; }
 100% { left: 120%;}
}

オレンジのボタン

/*オレンジの光るボタン*/
.shinybutton {
 display: block;
 width: 100%;
 margin-bottom: 1em;
}
.shinybutton a {
 display: block;
 position: relative;
 z-index: 2;
 overflow: hidden;
 width: 100%;
 font-weight: bold ;
 border-bottom: solid 5px #FF9922;
border-radius: 5px;
 background-color: #FF9966;
 color: #ffffff !important;
 padding: 12px 0;
 text-align: center;
 text-decoration: none;
 transition: .25s linear;
 -webkit-transition: .25s linear;
 -moz-transition: .25s linear;
}
.shinybutton a:hover {
 -ms-transform: translateY(4px);
 -webkit-transform: translateY(4px);
 transform: translateY(4px);/*下に動く*/
 border-bottom: none;/*線を消す*/
}
.shinybutton a:before {
 display: block;
 position: absolute;
 z-index: -1;
 left: -30%;
 top: -50%;
 content: "";
 width: 30px;
 height: 100px;
 transform: rotate(30deg);
 -webkit-transform: rotate(30deg);
 -moz-transform: rotate(30deg);
 background-image: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
 background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(50%,rgba(255,255,255,1)),color-stop(100%,rgba(255,255,255,0)));
 background-image: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, #ffffff rgba(255,255,255,1),rgba(255,255,255,0) 100%);
 animation: shiny 2s infinite linear;
 -webkit-animation: shiny 2s infinite linear;
 -moz-animation: shiny 2s infinite linear;
}
@keyframes shiny {
 0% { left: -30%; }
 20% { left: 120%; }
 100% { left: 120%; }
}
@-webkit-keyframes shiny {
 0% { left: -30%; }
 20% { left: 120%; }
 100% { left: 120%; }
}
@-moz-keyframes shiny {
 0% { left: -30%; }
 20% { left: 120%; }
 100% { left: 120%;}
}

ショートコード化してもっと楽に使う

このままでも使えるので、ここからは必要な方だけ読み進めてください。

function.phpに以下のコードを追記することで、光るボタンをショートコードで使用することができます。

わたし

PHPファイルをさわりますので、必ずバックアップをとってから作業してくださいね。

/*光るボタン*/
function ShinyBtn( $atts, $content = null ) {
 return '<div class="shinybutton">' . $content . '</div>';
}
add_shortcode('shiny', 'ShinyBtn');

このコードをfunction.phpに記載することで、以下のショートコードでリンクを囲むだけで光るボタンが使えるようになります。

[shiny]ここにリンク[/shiny]

光るボックスの色を変える

CSSの以下の部分のカラーコードを変更することで、光るボタンの色が変更できます。

わたし

14行目と16行目が変更箇所です。

また、CSSの「shinybutton」(4か所)を変更して複数パターン作成することで、この記事のように複数の色を使うこともできます。

このカスタマイズは、クリック率が上がることを保証するものではありません。

この記事はここまでです。もしお時間があれば、ぜひ他の記事も読んでいってくださいね。

あず(oyakocreate)でした

ブログのトップページへ

コメントはありません

現在コメントは受け付けておりません。