アフィリエイトリンクをボタン化するCSSを書いたよ。視認性を高めてクリック率アップ！

サムネイル

リンクをボタン化できたら便利だなと思ったので、ボタン型アフィリエイトリンクを作ってみました。

私はアフィリエイトはテキスト派なんですが、たまにテキストよりボタンのほうがいいな、っていう場面、ありませんか？

そんな時に使うためのボタン型アフィリエイトリンクを作ってみたので、公開します。

コードだけ貼って記事終わり、では流石に寂しいので、一応説明も入れておきます。

コピペするだけで使えますが、自分流に改造したくなったら説明を参考にしていただければと思います。

・ボタン化する際の注意
 ・コード
 ・説明
 ・HTML
・CSS

ボタン化する際の注意

巷にはアフィリエイトリンクをボタン化するプラグインが出回っていますが、こういったプラグインは使わないようにしましょう。

なぜなら、ASPの規約に抵触してしまう恐れがあるからです。

こういったプラグインは知識のない人でも簡単にボタン型リンクが作れるのが強みですが、ボタン化に際して勝手にリンクを短縮、またはaタグやimgタグを改変してしまう可能性があります。

アフィリエイトリンクを改変すると規約違反になる恐れがあるので、プラグインやサービスを使ってボタン型リンクを作るのはやめておきましょう。

もちろん、もしもかんたんリンクのようなASP公式のリンク変換サービスは大丈夫ですよ。

コード

まず、完成品がこちら。

詳細を見る

ボタンを押すと私のサブブログにジャンプするように設定しています。実際に触って挙動を確かめてみてください。

で、このようなボタンを作るコードがこちら。

HTML

<div class="aff-btn">
  アフィリエイトリンク
</div>

これを記事中のボタンを表示させたいところに挿入します。

はてなの「見たままモード」のような、コードが使えない記法だと表示されないので、MarkdownかHTMLモードを使ってください。

CSS

.aff-btn{
  height:50px;
  background-color: #4169e1;
  line-height: 50px;
  overflow-wrap:break-word ;
  border-radius: 20px;
  display: inline-block;
  box-shadow:0px 4px black;
}
.aff-btn:active{
  transform: translateY(4px);
  box-shadow:0px 0px black;
  cursor: pointer;
}
.aff-btn:hover{
opacity:0.5;
}
.aff-btn a{
  padding:0px 40px;
  text-decoration: none;
  color: white !important;
  font-family: "Montserrat","游ゴシック",YuGothic,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
}

これをはてなブログの「デザインCSS」にペーストしてください。ワードプレスの方もどこかにCSSを記述する欄があると思うので、そこに貼ってください。

これでアフィリエイトリンクがボタンになります。

説明

HTML

まず、本文中に貼る

<div class="aff-btn">
  アフィリエイトリンク
</div>

について。

これは、リンクを<div class="aff-btn"></div>で挟むだけでOKです。

CSS

次は「デザイン」→「デザインCSS」（はてな以外は、それに相当する場所）にペーストするCSSについて。

ボタンの色は■にしています。変えたい場合はこちらのWeb色見本から好きな色を探して.aff-btnのbackground-colorに挿入してください。

ボタンを押している間だけ発動する:actionでボタンの影を消しボタンを少し下に移動させることで、ボタンが押し込まれたような疑似的なアニメーションをつけています。

もっと沈み込ませたい場合は.aff-btn:actionのtransformの値を大きくしてください。

リンクを貼ったとき、通常はそれがリンクだと分かりやすいようにテキストが青文字＋青下線で表示されます。

しかしボタンの場合、ボタンによってそれがリンクであると一目でわかるので、この青文字と下線はいらないわけです。

なのでボタンのデザインに合うように下線を消して文字を白にしました。文字の色を変えたい時は.aff-btn aのcolorの値を変更してください。

特にボタンの色を変えると色によっては白文字のままでは見にくくなってしまうことがあるので注意してください。

フォントもスタイリッシュな感じのやつを採用していますが、気に入らなければ.aff-btn aのfont-familyの値を変更してください。

フォント選びについてはこのサイトなんかが参考になると思います。お好きなフォントを探してください。

ボタンの横幅は文字数に合わせて伸縮するので、何文字書いても問題ありません。ただ、あんまり長いと見た目が悪くなるので気持ち短めに抑えておくといいと思います。

以上、アフィリエイトリンクをボタン化する方法についてでした。