どうも、リュウセイです！
今回は、アフィリエイトリンクをオシャレにボタン化する方法についてご紹介していきます。
どんな感じなの？と言うと、2パターンありまして、「単一パターン」がコレ↓
そして「横並びパターン(スマホでは横並び)」がコレ↓
これをどうやれば実装できるのか？を解説していきますね。
WordPressを想定しての方法になります。
目次
アフィリエイトリンクをボタン化する方法
アフィリエイトリンクをボタン化する方法には、「ボタン風の画像を用意する方法」と「スタイルシート(CSS)を書く方法」の2つがあります。
ボタン風の画像でそれっぽく見せるのもいいですが、CSSで書いた方が「動き」を付けられるので、オシャレにデザインしたいならCSSでの実装がおすすめです。
下記にCSSの記述例を紹介していきます。
１.単一ボタンver
/* 赤ボタン単一 */
.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 !important;
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;
}
上記コードを、
- WordPressメニューの「テーマエディター」
- スタイルシート
- シートの一番下にそのまま貼り付け
このようにして設定してください。
そして、記事投稿画面の「テキスト」にて、実装したい部分に下記の呼び出し用コードを記述します。
<div class=”red-btn”>ココにテキストリンク</div>
これで実装できます↓
２.横並びボタンver(スマホでは縦並び)
/* 左ボタン（横並び） */
.left-btn {
width: 100%; /*ボタンの横幅 */
text-align: center; /*ボタン内の文字中央寄せ */
border-radius: 5px; /*ボタンの角を少し丸く */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
font-weight: bold; /*ボタン内文字は太字 */
}
.left-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: #1bb4d3;
color: #ffffff !important;
padding: 12px 0;
text-align: center;
text-decoration: none;
transition: .25s linear;
-webkit-transition: .25s linear;
-moz-transition: .25s linear;
}
.left-btn a:hover {
-ms-transform: translateY(4px);
-webkit-transform: translateY(4px);
transform: translateY(4px);/*下に動く*/
border-bottom: none;/*線を消す*/
box-shadow:none;
}
/* 右ボタン（横並び） */
.right-btn {
text-align:center;
width: 100%;
float:left;
color:#fff;
font-weight:bold;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
.right-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: #C81C1C;
color: #ffffff !important;
padding: 12px 0;
text-align: center;
text-decoration: none;
transition: .25s linear;
-webkit-transition: .25s linear;
-moz-transition: .25s linear;
}
.right-btn a:hover {
-ms-transform: translateY(4px);
-webkit-transform: translateY(4px);
transform: translateY(4px);/*下に動く*/
border-bottom: none;/*線を消す*/
box-shadow:none;
}
.box-main {
text-align:center;
font-size:15px;
margin-bottom: 1em;
}
.box-main:after {
content:””;
display:block;
clear:both;
}
@media screen and (min-width: 600px) {
.right-btn {
width:48% !important;
margin-left:10px;
}
.left-btn {
width:48% !important;
float:left;
margin-right: 10px;
margin-left:0;
}
}
@media screen and (max-width:599px){
.right-btn {
margin-top: 15px;
}
}
上記コードを先ほどと同様にスタイルシートに設定してください。
呼び出しコードは↓
<div class=”box-main”>
<div class=”left-btn”>リンク１</div>
<div class=”right-btn”>リンク2</div>
</div>
これで実装できます↓
アフィリエイトリンクがボタン化しない時の対処法と注意点
CSSの記述内に「important」という部分がありますが、これを付けているとその記述が優先的に反映されます。
なので、実装した後に反映されない部分がある場合には、反映されない記述に「important」を付けてみてください。
また、呼び出し用コード内のテキストは必ずリンクにしてください。
リンクにしないとCSSで装飾されないのでご注意ください。
例↓
CSSなどは短縮化させるとサイト表示速度が早くなる
CSSやJavascriptなどのコードは、コードを短縮化させることが可能であり、呼び出しがスムーズになってサイト表示速度の低下を最小限に抑えられます。
コードの短縮化におけるデメリットは「コードが圧縮されるので編集が難しくなる」という点です。
サイト表示速度が遅くなるデメリットは「ユーザーの離脱率が上がり、SEO評価が落ちる」という点です。
サイト表示速度を取るか、編集の手軽さを取るかはあなたにお任せします。
コードの短縮化はWebツールで簡単にできるので、是非試してみてくださいね。
下記の無料Webツールがおすすめなので、こちらでCSSを短縮化させてみてください↓
まとめ
お疲れ様でした。
CSSでカスタマイズすることでクリック率の上昇が見込めるので、余裕のある方は実装してみるのも手です。
今回解説した方法で、是非実装させてみてくださいね。
それでは、今回はこの辺で。
ありがとうございました。
ﾁｬｵ(･∀･)！
コメントを残す