【はてなブログ／カスタマイズ】アフィリエイトにも使えるボタンリンクはこれ☝️

ブログを運営していると、もっと「読者の方が見やすいように」色んなカスタムをしたくなりますよね。

私も、ブログを始めて約2年。やっとボタンリンクを作ってみよう！と思ったのですが、色んな先輩方のCCSコードやHTMLコードを参考にしてみても上手くいかず。

何度トライしても上手くいかず、諦めかけていた時に見つけた本記事のコードでやっと成功する事ができたので、ここで紹介したいと思います＾＾

こんな人におススメ👌

ワードプレスの様なオシャレなリンクボタンを作りたい！
色々試したけど、うまくできない！
ボタンとアフィリエイトリンクがうまく連携しない！

今回紹介するボタンリンクはコレ！
ボタンリンク作成の手順と使い方
- はてなブログにCSSコードを貼る
- アフィリエイトリンクでの使い方
ボタンリンクにして効果はあるの？
まとめ

今回紹介するボタンリンクはコレ！

そもそも、ボタンリンクって何よ？という方もいると思いますが、よく企業のサイトや売れっ子ブロガーさんのページで見る”アレ”。つい押したくなるあのボタンです。。

通常の広告リンクだと、テキストやバナーですが、装飾されたリンクボタンだとついつい押したくなりませんか？（私は、ついポチっとしちゃいます💦）

[例]

セキュリティ対策不要！今すぐ始める、はてなブログPro

マウスを上に持っていくと、影になる仕様で、つい押しちゃうボタンリンク。是非、実装してみましょう＾＾

ボタンリンク作成の手順と使い方

まず始めに、今回ボタンリンクを作成する際に参考にさせていただいた【フジブロっ！】さんを紹介したいと思います＾＾

ボタンリンク作成の記事は、たくさんあったのですが、正直どのコードを試してみても上手くいかず。。。

ボタンリンクはできても、アフィリエイト広告とうまく連携して使えなかったりと散々だったのですが、この【フジブロっ！】さんの記事のおかげで、無事作成する事ができました！（ありがとうございます🙇）

もし、上手くいかない！とお悩みの方は、是非お試しくださいね＾＾

⚠️この記事では、はてなブログでの実装方法を紹介しています。

はてなブログにCSSコードを貼る

まずは、ボタンリンクを設置する際に必要なCSSコード（下記参照）を、はてなブログのデザインCSS内に貼り付けます。

.link-btn {
    text-decoration: none!important;
    color: #fff!important;
    font-weight: bold;
    display: inline-block;
    padding: 10px 15px;
    border-radius: 60px;
    box-shadow: 0px 8px 10px -6px rgba(0,0,0,.3);
    transition: .2s;
}
.link-btn:hover {
    box-shadow: none;
    transform: translateY(2px);
    opacity: .8;
}
/***ボタン中央寄せ用***/
.center {
    text-align: center;
    margin: 1.5em 0;
}
/***ボタン背景色***/
.ao {
    background: #6b6be2;
}
.midori {
    background: #6be292;
}
.pink {
    background: pink;
}
.kuro {
   background: #3c3c3c;
}
.g-ao {
    background: linear-gradient(45deg, #007adf, #00ecbc);
}
.g-midori {
    background: linear-gradient(45deg, #9ae25b, #00c1e3);
}
.g-pink {
    background-image: linear-gradient(45deg, #ff6e87, #fcc951);
}
.g-kuro {
    background: linear-gradient(0deg,#000, #b1b1b1);
}

画像引用元：アフィリエイトリンクボタンの作り方- フジブロっ！

※「背景色」の部分に親切に、全ての背景色のCSSを書いてくださっていますが、自分が使う色だけでもいいそうです。（私は、midoriだけにしてみました）

はてなブログでの貼り付け方＞＞＞

「ダッシュボード」から「デザイン」へ行き、「スパナマーク」をクリック。
下の方に「デザインCSS」の項目があるので、そこをクリック。
枠内に今までのCSSコードが書かれているので、一番下に上のコードをコピぺする。
最後に、「変更を保存する」を忘れずに押す。

これで、ご自身のブログでボタンリンクを使用する準備ができました＾＾

アフィリエイトリンクでの使い方

続いては、実際にアフィリエイトやAmazonなどの広告リンクを使用して、ボタンリンクを作る方法を紹介します＾＾

「A8.net」や「もしもアフィリエイト」利用の場合＞＞＞

まずは、自身のアフィリエイトサイトで、使用したい広告コードを「テキスト」でコピーする。
記事作成画面で、HTML編集上でコピーしてきたコードを、広告を貼りたい場所に貼り付ける。（ここまでは、通常と同じ）
コピーしてきたコードの冒頭 <a href="~>の a と href の間に、[class="link-btn midori(自分で選んだボタン色のclass名)"]を入れる。

⚠️classの前と、link-btnの後（色のclass名の前）には、必ず半角スペースを入れて下さい!!

【例：midoriを使用した場合】
class="link-btn midori"

毎度、このボタンリンクを使いたい時は、コピーしてきたコードにHTMLで書き足して使うようになります＾＾