2014年2月17日

クリック率激増! カエレバ・ヨメレバ・ポチレバのボタン化サンプルをどうぞ

kaereba-button-sample-250

こんにちは! ヨス(@yossense)です。

先日、カエレバのショップへのリンクをボタンにする記事を書きました。

実はこの記事で紹介したものと、私が実際に使っているもののデザインが違うんです。先日、私が使っているやつの作り方も教えてほしい……というご要望を頂きましたので、そちらも公開します。あと、ついでに「ヨメレバ」と「ポチレバ」のボタンも公開しておきます。

PCとスマホではこんな風に見えます

カエレバ・ヨメレバ・ポチレバはわかったブログのかん吉(@kankichi)さんが作られた「商品をアフィリエイトとして紹介する」ときに非常に便利なブックマークレットです。詳しい説明はおすすめブックマークレットの記事で。

今回紹介しているボタンは、PCで見ると横並びなのですが、スマホで見ると縦にボタンが並ぶようにしています。タブレットなんかだと、サイズによって縦に並んだり、横にならんでいたりしていると思います。

追記: この記事で公開されているデザインと現在はちょっと変わっています。ご了承ください。

カエレバのボタン

カエレバの場合、私はAmazonと楽天のみにしています。ただ単にゴチャゴチャするからです。

カエレバの場合
カエレバの場合

実物

ヨメレバのボタン

ヨメレバもカエレバとほぼコードが同じでしたので、同じような感じでCSSコードを作っています。「Amazon」「Kindle」「楽天ブックス」の3種類にしています。

ヨメレバの場合
ヨメレバの場合

実物

ポチレバのボタン

ポチレバは、ちょっとコードが違っています。そもそもポチレバは「App Store」だけが対象なので、カエレバやヨメレバのように「Amazon」「楽天市場」といった複数ボタンは出ません。

なので、元々ボタンにできるようなリンクがありませんでした。

なので、ちょっと困りました。元がないものをどうやってボタンをつくろうかと。そ

こで最初は「App Store」の文字を大きなボタン化させようとしましたが、実はこの文字、classがついていないんです。なので、CSSのみでボタン化は不可能でした。

そこで仕方なく、アプリ名をボタン化させる方向でやることにしました。

でもアプリ名だけがボタンになっているのもなんか妙だと思ったので、擬似要素のbeforeを使って「今すぐダウンロード!」という文字を入れました。

でもこの「今すぐダウンロード!」の部分は擬似要素のため<a>が効きません。そのため、ここの部分はクリックできません。

それだけがアレですが、iPhoneの場合はタップだし、テストしてみても問題なさそうだからOK、OKと結論づけました。

ポチレバの場合
ポチレバの場合

実物

CSSコードを公開

ではCSSコードです。内容の解説は先日の記事をご覧ください。流れはこれと同じです。

カエレバ・ヨメレバ・ポチレバのボタン化CSS

まずはPC用~480ピクセルより大きい端末用のCSSコードです。カエレバ、ヨメレバ、ポチレバの3つともが含まれています。

.shoplinkamazon,
.shoplinkrakuten,
.shoplinkkindle,
.pochi_name {
        display : inline-block!important ;
        text-align : center!important ;
        margin : 0 0.5em 0.7em 0!important ;
        padding : 0!important ;
        line-height : 1.5!important ;
        border-radius : 5px!important ;
        -webkit-border-radius : 5px!important ;
        -moz-border-radius : 5px!important ;
        box-shadow : 0px 2px 2px #333, 0 3px 8px #999!important ;
        -webkit-box-shadow : 0px 2px 2px #333, 0 3px 8px #999!important ;
        -moz-box-shadow : 0px 2px 2px #333, 0 3px 8px #999!important ;
        }

.pochi_name {
        display : block!important ;
        letter-spacing : 0!important ;
        color : #fff!important ;
        font-size : 65%!important ;
        padding-top : 1em!important ;
        background : -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #737373), color-stop(0.48, #4a4545), color-stop(0.54, #454545), color-stop(0.54, #454545), color-stop(0.01, #c9c5c5), color-stop(0.00, #e3e2e1), color-stop(0.00, #e3e2e1), color-stop(0.00, #e3e2e1))!important ;
        background : -webkit-linear-gradient(top, #e3e2e1 0%, #e3e2e1 0%, #e3e2e1 0%, #c9c5c5 1%, #454545 54%, #454545 54%, #4a4545 48%, #737373 100%)!important ;
        background : -moz-linear-gradient(top, #e3e2e1 0%, #e3e2e1 0%, #e3e2e1 0%, #c9c5c5 1%, #454545 54%, #454545 54%, #4a4545 48%, #737373 100%)!important ;
        background : -o-linear-gradient(top, #e3e2e1 0%, #e3e2e1 0%, #e3e2e1 0%, #c9c5c5 1%, #454545 54%, #454545 54%, #4a4545 48%, #737373 100%)!important ;
        background : -ms-linear-gradient(top, #e3e2e1 0%, #e3e2e1 0%, #e3e2e1 0%, #c9c5c5 1%, #454545 54%, #454545 54%, #4a4545 48%, #737373 100%)!important ;
        background : linear-gradient(to bottom, #e3e2e1 0%, #e3e2e1 0%, #e3e2e1 0%, #c9c5c5 1%, #454545 54%, #454545 54%, #4a4545 48%, #737373 100%)!important ;
        }

.shoplinkamazon a,
.shoplinkrakuten a,
.shoplinkkindle a,
.pochi_name a {
        display : inline-block!important ;
        color : #fff!important ;
        text-decoration : none!important ;
        text-shadow : -1px -1px 0px rgba(0, 0, 0, 1)!important ;
        }

.shoplinkamazon a:hover,
.shoplinkrakuten a:hover,
.shoplinkkindle a:hover {
        background : gray!important ;
        border-radius : 5px!important ;
        -webkit-border-radius : 5px!important ;
        -moz-border-radius : 5px!important ;
        }

/* カエレバ Amazon */

.kaerebalink-box .shoplinkamazon {
        letter-spacing : 0.2em!important ;
        background : #292929!important ;
        }

.kaerebalink-box .shoplinkamazon a {
        padding : 0.9em 2em!important ;
        }

/* カエレバ 楽天 */

.kaerebalink-box .shoplinkrakuten {
        letter-spacing : 0.55em!important ;
        background : #BD0000!important ;
        }

.kaerebalink-box .shoplinkrakuten a {
        padding : 0.9em 1.6em!important ;
        }

/* ヨメレバ Amazon */

.booklink-box .shoplinkamazon {
        letter-spacing : 0.2em!important ;
        background : #292929!important ;
        }

.booklink-box .shoplinkamazon a {
        padding : 0.9em 2em!important ;
        }

/* ヨメレバ 楽天 */
.booklink-box .shoplinkrakuten {
        letter-spacing : 0!important ;
        background : #BD0000!important ;
        }

.booklink-box .shoplinkrakuten a {
        padding : 0.9em 1.73em!important ;
        }

/* ヨメレバ Kindle */
.booklink-box .shoplinkkindle {
        letter-spacing : 0.36em!important ;
background : #e47911!important ;
        }

.booklink-box .shoplinkkindle a {
        padding : 0.9em 2em!important ;
        }

/* ポチレバ */

.pochi_name a {
        display : block!important ;
        padding : 0.3em 5% 0.5em 5%!important ;
        font-size : 190%!important ;
        }

.pochi_name a:hover {
        background : none ;
        }

.pochi_name:hover {
        background : -webkit-gradient(linear, left top, left bottom, color-stop(1.00, #c7c7c7), color-stop(0.48, #575757), color-stop(0.48, #575757), color-stop(0.00, #7a7a7a))!important ;
        background : -webkit-linear-gradient(top, #7a7a7a 0%, #575757 48%, #575757 48%, #c7c7c7 100%)!important ;
        background : -moz-linear-gradient(top, #7a7a7a 0%, #575757 48%, #575757 48%, #c7c7c7 100%)!important ;
        background : -o-linear-gradient(top, #7a7a7a 0%, #575757 48%, #575757 48%, #c7c7c7 100%)!important ;
        background : -ms-linear-gradient(top, #7a7a7a 0%, #575757 48%, #575757 48%, #c7c7c7 100%) ;
        background : linear-gradient(to bottom, #7a7a7a 0%, #575757 48%, #575757 48%, #c7c7c7 100%)!important ;
        }

.pochi_name:before {
        content : "今すぐダウンロード!" ;
        display : block ;
        font-size : 160% ;
        color : yellow ;
        text-shadow : -1px -1px 0px rgba(108, 106, 106, 1) ;
        }

こちらはスマホ用のレスポンシブコード

お次はスマホ用のCSSコードです。CSSファイルの一番最後に入れておくと良いです。

@media screen and (max-width: 480px) {
 
        .kaerebalink-box,
        .booklink-box,
        .pochireba {
                text-align:center!important;
                padding: 1em!important;
                margin:0 0 0.5em 0!important;
                }

        .pochi_info {
                text-align:center!important;
                }

        .kaerebalink-box .kaerebalink-image,
        .booklink-box .booklink-image,
        .pochi_img {
                float: none !important;     
                }


        .shoplinkamazon,
        .shoplinkrakuten,
        .shoplinkkindle,
        .pochi_name {
                display:block!important;
                letter-spacing: 1em!important;
                padding:0!important;
                }

        .shoplinkamazon a,
        .shoplinkrakuten a,
        .shoplinkkindle a {
                padding:1em 25%!important;
                }

        /* カエレバ Amazon */
        .kaerebalink-box .shoplinkamazon a {
                padding : 0.9em 6em!important ;
                }

        /* カエレバ 楽天 */
        .kaerebalink-box .shoplinkrakuten a {
                padding : 0.9em 5.5em!important ;
                }

        /* ヨメレバ Amazon */
        .booklink-box .shoplinkamazon a {
                padding : 0.9em 6em!important ;
                }

        /* ヨメレバ 楽天 */
        .booklink-box .shoplinkrakuten a {
                padding : 0.9em 5.5em!important ;
                }

        /* ヨメレバ Kindle */
        .booklink-box .shoplinkkindle a {
                padding : 0.9em 6em!important ;
                }

        /* ポチレバ */
        .pochi_name a {
                padding : 0.3em 5% 0.5em 5%!important ;
                }
}

今回はカエレバだけでなく、ヨメレバ、ポチレバでのCSSも併せて紹介しました。ホントにコピペだけでいけると思いますので、ぜひやってみてくださいね!

ただ、環境によっては文字の大きさとか、ほかのもろもろが違って見えるかも知れませんがご了承ください。その辺は分かると仮定して書いていますので!

この記事が気に入ったら
「いいね!」で情報GET!

Twitterでヨスをフォローしよう!

この記事のシェアはこちら♪

※ 微妙だったら、そっと閉じるか、ほかの記事を見ていただけるとうれしいです!