スクリーンショット_091213_051915_PM

スマートフォンユーザーが増えてきているせいもあり、サイトにアクセスしてくる端末の比率がだいぶ変わってきているようです。メディアの種類や記事の内容にもより偏りはありそうですが、スマートフォンからのアクセスは無視できなくなってきました。

 

ちょっと聞いた話ですが、サイト内のテキストリンクをボタンで表示するように変えたところ、スマートフォンからのクリック率が数倍に増えたという事例があるそうです。ボタンのほうが目立つし押したくなるのでしょうね。読むのがめんどくさくなって次に行くという行動もありそうな気がします。

 

行動心理はさておき、データとしてクリック率が上がっているので対応しておいて損はないと思います。やり方としては画像にハイパーリンクさせるというのが一般的な方法になります。しかし、アフィリエイトリンクなどは加工してはいけないというところもあるので、この方法はグレーかも。成果をキャンセルさせないように実装するときには、ちゃんと広告主の許可をとったほうが良いかと思います。

CSSでデザイン処理をする

もう一つ、アフィリエイトリンクは加工しないで、CSSで表示するデザインを変えてしまうという方法もあります。画像を使用しないのでWebページ自体も軽くでき、表示が早くなるというメリットもあります。※この方法を許可してない広告主もいるかもしれませんので、自己責任でお願いします。

 

CSSのサンプル集という良いサイトを見つけたので、これを利用してみたいと思います。

http://typesquare.com/sample/csseffect/

 

マウスオーバーでテキストサイズが変わるボタン

CSSのサンプル集からこちらを利用してカスタマイズします。

送信する

HTMLをカスタマイズ

<div class="button">
  <span class="button_inner">
    送信する
  </span>
</div>

「送信する」をアフィリエイトリンクにすることでテキストリンクをボタン表示させることができます。a classのままハイパーリンクを入れてしまうと、正常に表示できなかったので、aをdivに変更します。

CSSをカスタマイズ

.button {
    background: #5b9507;
    background: -moz-linear-gradient(top,#a3ea3f,#5b9507);
    background: -webkit-gradient(linear,left top,left bottom,from(#a3ea3f),to(#5b9507));
    border: 1px solid #487606;
    border-radius: 28px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3), inset 0 0 1px #fff;
    color: #fff;
    display: inline-block;
    font-family: "Jun 501", sans-serif;
    font-size: 26px;
    overflow: hidden;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 -1px 1px #487606;
}

.button_inner {
    display: block;
    padding: 15px 25px;
    opacity: .9;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.button.hover .button_inner,
.button:hover .button_inner {
    opacity: 1;
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

CSSのサンプル集のソースをそのまま使うと文字数が多い時にはみ出してしまうので、ボタンの縦幅と横幅を削除。代わりにpadding: 15px 25px;を追加して、テキストの上下に余白を指定しています。

 

 

こんな感じにテキストの長さに対応させています。レスポンシブなデザインの場合でも改行されて表示してくれます。改行されるとアンダーバーが邪魔になってしまうので消したいのですが、なぜかtext-decoration: none;が適応されず・・・どこで悪さをしているのか改善策が見つからなかったので、とりあえずこのまま使用してみます。

Button MakerというWebサービス

アンダーバーがが邪魔という方は、Button MakerというWebサービスを利用してみるのも良いかともいます。

http://css-tricks.com/examples/ButtonMaker/

スクリーンショット_091213_065340_PM

右側上部のバーで形とサイズ、その下で色を選べます。リアルタイムで表示が変わるので作りやすいWebサービスだと思います。出来上がったらView the CSSをクリックすると、CSSコードが表示されるのでそれをコピーして利用できます。

定型文を作成しておくとスムーズ

ブログを書くときにWindows Live Writerを利用しているなら、Text Templateというプラグインを利用すると便利です。定型文としてHTMLのカスタマイズしたコードを作成しておくと、いちいちコードを書き込む必要がなくなります。アフィリエイトリンクを挿入するときに、ひと手間加えるだけでボタン表示できるようになるので、試してみてはいかがでしょうか。

 

スポンサードリンク


このエントリーをはてなブックマークに追加