【超簡単】アフィリエイトリンクのボタンをコピペだけで作る方法

ボタンをコピペのアイキャッチブログ運営

こんにちは、ジン坊です。

【Word Press】の無料テーマCocoon
『スタイル』にある「ボタン」では、
アフィリエイトリンクを貼ろうとしてもできませんよね。

でも、安心してください!

コピペするだけで、
簡単にアフィリエイトリンクを
「ボタン化」する方法を紹介します。

アフィリエイトリンクのボタンをコピペだけで作る方法

今回は、

ボタンのコードを「追加CSS」で可能にします!

手順も簡単で、ざっくりと

①「追加CSS」にボタンのコードをコピペする
②ボタンを読み込み、表示させたいテキストにする

こんな感じです。簡単でしょ!

ただし、

「追加CSS」はどこにあるの?

という人もいると思いますので
そこから説明します。

「追加CSS」はどこにあるの?

下図のように【Word Press】の

外観→カスタマイズ→追加CSS

クリックしてください。

すると、

左側にCSSの記入エリア
右側にサイト全体のエリアが表示されます。

これで、

「追加CSS」がどこにあるのか
わかりましたね。

後ほど、赤い矢印でしましたエリア
コピペしたコードを張り付けます。

「追加CSS」にボタンのコードをコピペする

コピペしたコードを張り付けますと、
このような赤い「ボタン」となります。

 

ボタンのCSSコードは、次のとおりです。

/* 赤ボタン-アフィリリンク */
.red-btn {
font-size:16px;
margin-left: auto;
margin-right: auto;
display: block;
width: 300px;
margin-bottom: 1em;
}
.red-btn a {
display: block;
position: relative;
z-index: 2;
overflow: hidden;
width: 100%;
font-weight: bold;/*文字の太さ*/
box-shadow:2px 2px 2px #555;
border-radius: 5px;
background-color:#ed254e;/*背景の色*/
color: #ffffff;/*文字の色*/
padding: 12px 0;
text-align: center;
text-decoration: none;
transition: .25s linear;
-webkit-transition: .25s linear;
-moz-transition: .25s linear;
}
.red-btn a:hover {
-ms-transform: translateY(4px);
-webkit-transform: translateY(4px);
transform: translateY(4px);/*下に動く*/
border-bottom: none;/*線を消す*/
box-shadow:none;
}
.red-btn {
text-align:center;/*中央寄せ*/
}

※参考にさせて頂いたサイトはこちら

すでに、ご自分で使用したいボタンがある方は
そちらをどうぞ!

では、上のCSSコードをコピーして、
先ほど説明しました「追加CSS」に張り付けましょう。

すると、

下図のようになりますね。

上にある青い「公開」ボタンクリックすると
「公開済み」に変わります。

以上の工程で、
ボタンは使える状態にありますから、
後は「読み込む」方法ですね。

「ボタン」を読み込む

【Word Press】の「投稿」で記事を書いて、
アフィリエイトリンクを貼るように、

<div class=”af_button”>アフィリエイトリンク</div>

をHTML表記します。

アフィリエイトリンクの個所に
自分が貼りたいアフィリエイトリンクを張り付けて、アフィリエイトリンクという文字はデリートします。

そして、
表示させたいテキストにするだけです。

こんな感じですね。

<div class=”red-btn”>
<a href=”https://**********”>
<strong>◆◆のサイトはこちら!</strong></a></div>

最後は、
「プレビュー」で確認しましょう!

まとめ

今回は、

『【超簡単】アフィリエイトリンクのボタン
をコピペだけで作る方法』

と題しまして、

①「追加CSS」にボタンのコードをコピペする
②ボタンを読み込み、表示させたいテキストにする

というように、
超簡単にアフィリエイトリンクを「ボタン化」
する方法
を紹介しました。

最後になりますが、
注意すべきことを説明します。

・広告素材改変
・広告のリンクコード改変
・バナー画像やテキスト変更など広告表現の変更をともなう改変

禁止されているASPがありますね。

しかし、
ほとんどのASPで「ボタン化」は、
特に問題はないはず!

ただし、
全てのASPでそうとは限らないので注意が必要
ですね。

ですから、
不安な方は、規約を確認した方が良いと思います。

タイトルとURLをコピーしました