★★★ たった "1日" でできるWordPressブログの作り方講座 ★★★ はじめてみる
この記事には「PR」「宣伝」が含まれます

ただのリンクをボタン風にしてクリック率を上げる方法

リンク広告を設置する場合、ただリンクを置くだけだとクリック率はあまり高くありません。だからクリック率を高めるには工夫が必要です。

例えばその方法の1つがリンクをボタン風にする方法。

リンクがボタンになっていると目立つし、なんか押したくなりますよね。

そこで ただのリンクを目立つボタン形式のデザインにする方法 を紹介します。

CSSコピペでリンクをボタン風に改造することができるので、クリック率が低くて悩んでいるなら試してみてください。

リンクをボタン形式にする利点

リンクをボタン形式にする利点は「読者の目を引きクリックする確率が高くなる」ということです。

例えば次のようなただの青色テキストで下線が引いてあるだけのリンクとボタンの形状をしたリンクボタンがあった場合、どちらの方が目につくでしょうか。

一般的なテキストリンク。ボタン化したものと比べるとやっぱり地味 ボタン化したリンク。こちらの方がテキストリンクと比べて目立つ

恐らくほとんどの人はリンクボタンの方に目が行くと思います。

もちろんボタンにしたから クリック率が急上昇する みたいな単純な話ではありませんが、ボタン形式にすると読者の興味を引くことができます。

さらにボタンを押したときのアニメ効果をつければ、さらに興味を引くことが可能です。

リンクボタンの作り方

リンクボタンを作るにはCSSを使ってボタン形式にスタイルを適用します。

ここでは丸形の立体的なボタンを作ってみます。

1.まず次のように 普通にリンクタグ を定義

<a href="xxx" class="btn">リンクボタン</a>

2.そしてリンク要素に対して次のCSSを適用

.btn
{
  background-color: #F55;
  box-shadow: 0px 12px 0px #a00;  
  border-radius: 10px; 
  border-bottom-left-radius: 12px; 
  border-bottom-right-radius: 12px; 
  border-bottom: 1px solid #F00;
  border: none;
  padding: 15px 80px; 
  font-size: large;
  text-decoration:none;
  display: inline-block;
}

このCSSを適用したリンクは次のような立体的なフラットボタンになります。
ボタン化したリンク。こんな立体的なボタンリンクでも少しのCSSを追加するだけで作成可能

ではこのCSSコードの簡単な解説をします。
まずボタンを丸形にするのに border-radiusプロパティ を設定しています。
border-radius: 10px; 

このプロパティには丸め半径を渡します。もし右下や左下など個別に丸め半径を指定したい場合は次のプロパティを指定してください。

  • border-top-left-radius
    左上の角の丸め半径
  • border-bottom-left-radius
    左下の角の丸め角度
  • border-top-right-radius
    右上の角の丸め角度
  • border-bottom-right-radius
    右下の角の丸め角度

そしてボタンを立体的に見せるために box-shadowプロパティ を指定しています。

box-shadow: 0px 12px 0px #a00;

box-shadowプロパティは要素に影をつける効果があり、このプロパティに渡す値は順に次のような意味を持ちます。

  • 1つめの値
    水平方向の影のオフセット値。正の値を指定すると右に、負の値を指定すると左に影がつく
  • 2つめの値
    垂直方向のオフセット値。正の値を指定すると下に、負の値を指定すると上に影がつく
  • 3つめの値
    影のぼかし距離。0を指定すると影がくっきりした長方形になる
  • 4つめの値
    影の色

ここではbox-shadowに下方向に12px伸びるくっきりとした影をつけることでボタンを立体的に見せています。

これが基本的なリンクボタンの作り方です。

ボタンをグラデーションさせる

さらにリアリティのあるボタンにするにはボタンにグラデーションをかけます。

グラデーションをかけるには先ほどのCSSコードを次のように書き換えます。

.btn
{
  background: linear-gradient(to left, #F11, #F55); 
  box-shadow: 0px 12px 0px #a00;  
  border-radius: 12px; 
  border-bottom-left-radius: 12px; 
  border-bottom-right-radius: 12px; 
  border-bottom: 1px solid #F00;
  border: none;
  padding: 15px 80px; 
  text-decoration:none;
  font-size: large;
  display: inline-block;
}

backgroundプロパティにlinear-gradient関数を渡しています。

linear-gradient関数は要素の背景に対して線形グラデーションをかける関数で次のような引数を持ちます。

linear-gradient(方向, 開始色, 途中色, 終了色)

方向には次の2つの値が渡せます。

  • 角度
    単位(deg)付きの角度。0を指定すると下から上にグラデーションする
  • to + [方向を表すキーワード]
    toに加えてrightやleftなどの方向を表すキーワードを渡す。例えばto rightなら左から右にグラデーションする。とれる値は[left]、[top]、[right]、[bottom]

そしてその後に色を定義します。途中色は何色でも置けて開始色と終了色は必須です。

グラデーションさせたボタンは次のような見た目になります。

グラデーション効果を付けたリンクボタンの例。フラットボタンに比べてよりリアリティが増している

フラットなボタンに比べてよりリアリティが出ていると思います。ボタンをグラデーションさせるかはサイトがフラットデザインかそうでないかで使い分けるといいと思います。

ボタンにアニメーションを追加する

リンクをボタン形式にするならその動作もボタンに合わせた方が自然です。

例えば ボタンを押したら凹む(へこむ)みたいな感じで

その場合は・・・リンク要素のactive疑似クラスに次のようなスタイルを記述します。

.btn:active
{
    box-shadow: 0px 0px 0px #a00; 
    transform: translateY(9px);
}

active疑似クラスは要素がクリック・タッチされたときに適用される疑似クラス。

この疑似クラス内でまず box-shadow を無効にして下部分の影を消しています。ただそれだと影が消えるだけなので押したという感じがしません。

そこで transformプロパティ に translateY という要素をY方向に移動させる関数を渡し、垂直方向下に9pxだけ移動させています。

実際にどういう動作をするかは次のボタンをクリックしてみてください。

See the Pen CSSだけでクリックできる立体ボタン by kaz1503 (@kaz1503) on CodePen.dark

リンクをボタン化するときの注意点

最後に重要なことを書き忘れていたので補足

ここで紹介したリンクを改変してボタン化するというやり方・・・実はこの方法を使ってはいけない場面があります。

それがアフィリエイトリンクをボタン化する、という場合

次記事で解説したようにASPによってはタグ改変は規約違反になってしまいます。

アフィリエイトリンク改変はどこまでOK?主要ASPの見解まとめ
アフィリエイトリンクを取得して貼り付けるときリンク改変していいかの判断に迷うことはありませんか?ここでは8つの主要ASPがリンク改変にどういう見解をしているのかと改変OKな範囲についてまとめました。

何が許されて何がアウトなのかの基準についてはAPSで違うものの、大抵のASPだとリンクタグの改変はアウトな所が多いですね。

ただしリンクタグの改変がNGなだけであって、リンクタグに直接手を加えないのであればボタン化しても問題ありません。

参考記事アフィリエイトリンクをボタン化する時に注意すべき2つのこと

詳しいやり方については上記事で解説したので気になる方はご覧ください。

まとめ

以上リンクをボタン形式にする方法について解説しました。

こういうちょっとした工夫でクリック率が高まることもあるのでクリック率が低くて悩んでいる方は試してみるといいかもしれません。

The following two tabs change content below.

フク郎

昔はプログラミングに熱中していたが、ブログとWordPressに興味を持ち始め今はサイト・ブログ作りが生きがい。自分の「好き」をブログに変えたい、情報発信したい人に役立つWordPress術・サイト構築術を発信中。一日一歩楽しんでブログ構築できるように読みやすい&楽しい記事作りを心がけています。メールアドレス : fukuropress@gmail.com