ブログ運営・WEBデザイン

【簡単にできる!】アフィリエイトリンクをボタンにする方法

こんにちは。WEBデザインを勉強中のシズです。

ブログでアフィリエイト商品を紹介しているブロガーさんがよく使っている、ボタン型のアフィリエイトリンクってやってみたいなって思いますよね。

私も前々からずっと思っていて、ようやくボタンリンクを作成したので今回はそのカスタマイズ方法をご紹介します!

「カスタマイズとか難しそう…」って思っている初心者さんでも大丈夫。

誰でも簡単に設置できるように分かりやすく説明していきますので、是非挑戦してみてくださいね。

※今回はWordpressでのカスタマイズ方法です。

スポンサーリンク

①スタイルシートにカスタマイズコードを記入

まずはリンクがボタン型になるよう、スタイルシートにカスタマイズコードを記入していきます。

管理画面の「外観」から「テーマの編集」をクリックします。

スタイルシートの編集は、子テーマのスタイルシート内で行います。

カスタマイズが初めてで子テーマがない人は、まずは子テーマを作成することから始めてくださいね。

子テーマは、「One-Click Child Theme」というプラグインで簡単に作成することができます。

スタイルシートの一番下に、下記のコードを追加してください。

.link-btn {/* アフィリンクボタン */
    display: inline-block;
    position: relative;
    text-decoration: none;
    color: #f9a9ae;
    width: auto;
    height: 50px;
    margin-bottom: 30px;
    padding: 0 20px;
    line-height: 50px;
    border-radius: 5px;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
    font-weight: bold;
    background-image: -webkit-linear-gradient(#fed6e3 0%, #ffaaaa 100%);
    background-image: linear-gradient(#fed6e3 0%, #ffaaaa 100%);
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
}

.link-btn:active {/*押したとき*/
    -ms-transform: translateY(2px);
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
    background-image: -webkit-linear-gradient(#fed6e3 0%, #ffbcbc 100%);
    background-image: linear-gradient(#fed6e3 0%, #ffbcbc 100%);
}

上記のコードでこのような形のボタンが作成できます。

ボタンデザインにについては、サルワカさんの「CSSで作る!押したくなるボタンデザイン100(Web用)」を参考にさせていただきました。(※コードの内容は若干いじっています)

ボタンの色を変えたいときは、「background-image」の中にある「#」から始まる6ケタの文字列を変更すると、好きな色に変更することができます。

カラーコードはコチラのサイトから調べられます。好きな色の上でクリックをすれば、カラーコードと書かれた右側の四角にカラーコードが表示されます。

また、ボタンの文字色を変えたいときは、「color」と書かれている右側のカラーコードを変更すれば、色を変更することができます。

②AddQuicktagにボタンのコードを登録する

①で行ったのはあくまでもボタンの装飾なので、まだボタンを表示させることはできません。

②ではボタンそのものを作成していきます。

まずは「AddQuicktag」というプラグインを追加します。プラグインがなくてもボタン表示は可能ですが、このプラグインを使うことで記事内に簡単にボタンを表示させることができるようになります。

プラグインを追加すると、管理画面の「設定」のところにAddQuicktagが表示されるようになります。

クリックすると、次のような画面が出てきます。

一番左のボタン名のところには、自分が分かるようにボタンの名前を入力してください。私は「ボタンリンク」と入力しています。

その次の開始タグには、以下のコードを入力します。

<div class=”link-btn”>

そして終了タグには、</div>と入力しておきます。

「ボタン名」「開始タグ」「終了タグ」の3つの入力が終わったら、一番右側のチェックボックスにチェックを入れ、全てにチェックを入れます。

チェックを入れたら下にスクロールし、「変更を保存」をクリックして保存してください。

これで記事投稿ページから簡単にボタン表示させることができるようになります。

③記事内でボタンを呼び出す

AddQuicktagでコードを登録すると、記事編集ページの右上に「Quicktags」という項目が表れます。

右側の▼をクリックすると、先ほど登録したボタン名が表示されます。

これをクリックすると、登録しておいたコード「<div class=”link-btn”></div>」が記事に反映されます。

※ビジュアルモードではこのタグは見えませんが、テキストモードに変更するとタグが記事に追加されたのが確認できます。

この開始タグと終了タグの間に文字を入れると、この文字がボタンに反映されます。

※例「<div class=”link-btn”>ボタン</div>」

④アフィリエイトリンクをボタンにする方法

ではいよいよアフィリエイトリンクをボタンに変更していきます。

まずはボタンにしたいアフィリエイトリンク(※テキストリンクに限る)のコードを取得します。

コードを取得出来たら、このコードをボタンリンクの開始タグと終了タグで囲みます。

囲み方ですが、「テキストモード」でアフィリエイトリンクコードの一番前にカーソルを持っていき、「ボタンリンク」をクリックすると開始タグが挿入されます。

さらに今度はアフィリエイトリンクコードの最後にカーソルを持っていき、「/ボタンリンク」をクリックすると、終了タグが挿入されます。

この状態でプレビューをチェックすると、アフィリエイトリンクはボタンとして表示されているはずです。

ビジュアルモードでQuicktags」からボタンリンクをクリックすると開始タグと終了タグがいっぺんに記事に追加されますが、テキストモードでは「ボタンリンク」を一回クリックするとまず開始タグだけが追加されます。

開始タグが追加されると先ほど「ボタンリンク」と表示されていたのが「/ボタンリンク」とスラッシュが入った表示に変わり、これをクリックすると終了タグが追加されます。

最後にアフィリエイトのコードをボタンリンクコードで囲んだ全てのコードをAddQuicktagに登録しておけば、次からそのアフィリリンクは一発でボタン表示できるようになります。

AddQuicktagはよく使うタグやコードを登録しておけば、記事を書くときにすぐ呼び出せるのでとっても便利ですよ!

ボタンリンクはコード改変にならないの?

アフィリエイトのコードは、基本的に勝手に改変をしてはいけません。

じゃあアフィリンクをボタン型にカスタマイズするのってコード改変にはならないの?って思いますよね。

安心してください。このカスタマイズはコード改変とはなりません

私も最初は「大丈夫なんかな~?でもみんなやってるし大丈夫だよな」ってなんとなく大丈夫だろうという認識しかありませんでした。

でもWEBデザインの勉強を始めてCSSコードの知識もつき、これが改変でないということがはっきり理解できました。

なぜボタンリンクにすることはコード改変ではないのかを分かりやすく説明しますね。

まずお皿に入っているカレーを思い浮かべてください。

コード改変NGというのはつまり、お皿に入っているカレーの味を勝手に変えてはいけないということです。

ということは、カレーが入っている「お皿」は別に変えても大丈夫なんです。

何の変哲もない白いお皿に入っているカレーよりも、ちょっとオシャレな器に入っている方が美味しそうに見えたり高級そうに見えたりしますよね?

ボタンリンクもこれと同じで、アフィリンクコード自体はいじってないけどそれを入れる器に装飾をして見た目を良くしているだけなんです。

だからボタンリンクのカスタマイズは規約違反にはなりません。

…ということで、ボタンリンク設置してクリック率アップを狙いましょう~♪