✔この記事はこんな人におすすめです
ボタンリンクを表示させたいけど、上手くいかないから作り方を知りたい...
ボタンリンクをカスタマイズ(色など)したい！
本記事では、はてなブログでボタンリンクを作成する方法を紹介しています。
筆者もブログを始めた当初、ボタンリンクを作成しようと思ってCCSコードやHTMLコードを書いてみたのですが、何度やり直しても上手く表示されず、苦労しました...
なかなか成功しなかった原因は未だに分からないのですが、 改善を重ねた結果、本記事のコードでやっと成功しました！
アフィリエイトのテキスト広告が
- 自由テキストの場合
- テキストが決まっている場合
別にCCS・HTMLコードを紹介しています。
コピペOKなので、ぜひ参考にしてくださいね！
本記事で作れるボタンリンク
本記事の方法でできるボタンリンクは以下のようなものです。ボタンの影とクリック時の動きが付いているのがポイントです！
アフィリエイトリンクをボタンリンクにするメリットは？
アフィリエイトリンクをボタン型にするメリットとして、主に以下の2つが挙げられます
- 広告リンク感を軽減できる
- ついついクリックしたくなってしまう
広告リンク感を軽減できる
アフィリエイトのリンクをボタン型にすることで、「広告＝相手に報酬が発生する」という印象を軽減できます。
以下のような広告はあきらかに広告！という感じだね...
バナー広告やテキスト広告と比較すると、読者に広告だと気付かれにくいでしょう。
ついついクリックしたくなってしまう
大抵の人の頭の中では ボタン＝クリックという無意識の構図ができているため、ボタンにすることでクリック率の向上が望めます。
作り方次第で、さらにクリックしたくなるボタンを作ることが可能です。本記事のボタンのように影を付ける・クリック時の動きを加えるなど、一工夫すれば読者の気を引くことができます。
ボタンリンクにおすすめの色
CCSコード内のカラーコードを変更すれば、ボタンを好きな色に変更出来ます。色は何でもOKですが、
- 色はリラックスする色である緑がクリックされやすい
- または、自分のサイトに合った色にする
のがおすすめです
コピペOK！ボタンリンクの作り方
ボタンリンクの表示方法です
ボタンリンクを表示させるには、CCSコードとHTMLコードを書き込む必要があります。はてなブログのCCS・HTMLコードは以下の画像の箇所にあります。
CCSコード▼管理画面＞デザイン＞スパナマーク＞デザインCCS
HTMLコード▼ブログ筆記画面＞HTML編集
＊注意＊
CCSコードを書き加える際には、既存のCCSコードをコピペしておくことをおすすめします。万が一ブログの体裁が崩れても責任は負いかねます。
広告のテキストが決まっている場合のCCS・HTMLコード
▶CCS
/***ボタンリンク テキストが決まっている場合***/
.btn,
a.btn,
button.btn {
font-size: 1.1rem;
font-weight: 700;
line-height: 1.3;
position: relative;
display: inline-block;
padding: 1rem 4rem;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
text-align: center;
vertical-align: middle;
text-decoration: none;
letter-spacing: 0.1em;
color: #212529;
border-radius: 0.5rem;
}
.btn_first a {
display: inline-block;
width: 58%;
padding: 0.8em;
text-align: center;
text-decoration: none;
color: #fff;
background: #83c93c;/***色の変更***/
border-bottom: 3px solid #157542;
border-radius: 6px;
text-decoration: none;
font-weight: bold;
}
.btn_first a:hover {
cursor: pointer;
text-decoration: none;
color: #fff;
background: #157542;
transform: translate3d(0, 2px, 0);
border-bottom: none;
text-decoration: none;
font-weight: bold;
}
▶HTML
<p class="btn_first">○○○
○○○の部分にはASPからコピーしてきた広告コードを入れてください！
広告が自由テキストの場合のCCS・HTMLコード
▶CCS
/*** ボタンリンク 自由テキスト***/
.second-btn {
font-size:15px;
margin-left: auto;
margin-right: auto;
display: block;
width: 32
0px;
margin-bottom: 1em;
}
.second-btn a {
display: block;
position: relative;
z-index: 2;
overflow: hidden;
width: 62%;
font-weight: bold ;
box-shadow:2px 2px 2px #555;
border-radius: 5px;
background-color:#83c93c;/***色の変更***/
color: #ffffff !important;
padding: 14px 0;
text-align: center;
text-decoration: none;
transition: .25s linear;
-webkit-transition: .25s linear;
-moz-transition: .25s linear;
}
.second-btn a:hover {
-ms-transform: translateY(3px);
-webkit-transform: translateY(3px);
transform: translateY(2px);/***動く(下方向)***/
border-bottom: none;
box-shadow:none;
}
▶HTML
<div class="second-btn">○○○</div>
○○○の部分にはASPからコピーしてきた広告コードを入れてください！
ボタンのカスタマイズ
上記コード内のカラーコードや数字を変えることで、ボタンの色、ボタンの幅、影の色、影の大きさなどをカスタマイズすることが出来ます！
ぜひご自身のサイトに合ったボタンにカスタマイズしてください
ボタンリンクを中央に表示させる方法
ボタンを記事中央に表示させる方法を紹介します。
何かを記事の中央に表示させたい場合は、中央に表示させたい部分をHTML編集にて<center>と</center>で囲います。
<center>△△△</center>という感じです。これで中央に配置できます。
まとめ
今回はボタンリンクのメリットと作り方を紹介しました。
ボタンリンクを使用すると、読者からのクリック率向上や、サイト自体の質の向上につながります。
2パターンのコードを紹介したので、ぜひ本記事のコードでボタンリンクを作ってみてくださいね！