こんにちは、ジン坊です。
【Word Press】の無料テーマCocoonの
『スタイル』にある「ボタン」では、
アフィリエイトリンクを貼ろうとしてもできませんよね。
でも、安心してください！
コピペするだけで、
簡単にアフィリエイトリンクを
「ボタン化」する方法を紹介します。
アフィリエイトリンクのボタンをコピペだけで作る方法
今回は、
ボタンのコードを「追加CSS」で可能にします！
手順も簡単で、ざっくりと
②ボタンを読み込み、表示させたいテキストにする
こんな感じです。簡単でしょ！
ただし、
「追加CSS」はどこにあるの？
という人もいると思いますので
そこから説明します。
「追加CSS」はどこにあるの？
下図のように【Word Press】の
とクリックしてください。
すると、
左側に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】の「投稿」で記事を書いて、
アフィリエイトリンクを貼るように、
をHTML表記します。
アフィリエイトリンクの個所に
自分が貼りたいアフィリエイトリンクを張り付けて、アフィリエイトリンクという文字はデリートします。
そして、
表示させたいテキストにするだけです。
こんな感じですね。
<a href=”https://**********”>
<strong>◆◆のサイトはこちら！</strong></a></div>
最後は、
「プレビュー」で確認しましょう！
まとめ
今回は、
『【超簡単】アフィリエイトリンクのボタン
をコピペだけで作る方法』
と題しまして、
②ボタンを読み込み、表示させたいテキストにする
というように、
超簡単にアフィリエイトリンクを「ボタン化」
する方法を紹介しました。
最後になりますが、
注意すべきことを説明します。
・広告のリンクコード改変
・バナー画像やテキスト変更など広告表現の変更をともなう改変
は禁止されているASPがありますね。
しかし、
ほとんどのASPで「ボタン化」は、
特に問題はないはず！
ただし、
全てのASPでそうとは限らないので注意が必要
ですね。
ですから、
不安な方は、規約を確認した方が良いと思います。