★★★ たった "1日" でできるWordPressブログの作り方講座 ★★★ はじめてみる

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

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

例えばその方法の1つがリンクをボタン風にする方法です。リンクがボタンになっていると押したくなりますよね。

ここではただのリンクを読者の目を引くようなボタン形式のデザインにする方法を紹介します。CSSコピペでリンクをボタン風に改造することができるのでクリック率が低くて悩んでいるなら試してみてください。

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

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

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

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

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

さらにボタンを押したときのアニメーションなどもつければさらに興味を引くことが可能です。

リンクボタンの作り方

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

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

まず次のように普通にリンクタグを定義します。

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

このリンク要素に対して次のような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コードの簡単な解説をします。
まずボタンを丸形にするのに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によってはタグ改変は規約違反になってしまいます。

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

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

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

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

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

まとめ

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

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

The following two tabs change content below.

フク郎

昔はプログラミングに熱中していたが、ブログとWordPressに興味を持ち始め今はサイト・ブログ作りが生きがい。自分の「好き」をブログに変えたい、情報発信したい人に役立つWordPress術・サイト構築術を発信中。一日一歩楽しんでブログ構築できるように読みやすい&楽しい記事作りを心がけています。Twitterアカウントはこちら ⇒ フク郎@Fukuro-Press