【CSSメモ】勝負どころで使いたい!リンクボタンの作り方

Sponsored Link


リンクをボタンにしたいんだけど・・・!?

どうも、Linです。うどん、コシがあります。

 

WordPress のブログを運営しているとたまに、

どうしても読者の方にクリックしてもらいたいリンク

というものが出てくると思います。

そういう勝負時に使いたいのが、

ボタンデザインのリンクです。

 

CSS をカスタマイズすることで、aタグのリンクをボタンにデザイン。

すると、リンクが目に留まりやすくなり、クリック率が高まる可能性があります。

ぼくもそろそろ勝負したいと思っていたところだったので、早速こちらの神記事でリンクのボタンの作り方を学んでみました。

今日はその学んだことを忘れないうちにアウトプットしておこうと思います。

 

 

CSS を変更してリンクボタンを作る方法

ボタンデザインのリンクを作る方法は次のステップを踏むと良いでしょう。

 

Step1.  a タグにクラス名(ボタンっぽい)をつける

まず始めにa タグに「ボタンぽい」クラス名をつけておきましょう。

今回は例としてクラス名に、

botan

という名前をつけてみますか。

例えば、リンクという文字をリンクにした場合、こんな感じのHTMLコードになるはずです。

 

 

Step2.  CSS ファイルにボタンのデザインを追記

先ほど追加したクラス名の要素のデザインを変更するため、 CSS ファイルを編集していきます。

 

こちらの神記事に様々なボタンデザインが掲載されているのでお好きなものを選んで CSS ファイルに追記すると良いでしょう。

WordPress のブログの場合はstyle.cssというファイルに追記すればいいですね

 

ぼくはその中から、

クリックするとボタンが押し込むタイプ

を採用しました。botanというクラス名をもつaタグに、このデザインを適用させると、次のようなCSSになりますね↓

 

 

さあ、勝負どころでリンクをボタンにしてみよう

以上がaタグリンクでボタンを作成する方法でした。

最終的にこんな感じでリンクもボタンが作れると思います↓

 

今すぐ購入する

 

CSSをいじっただけで、こんなモダンなボタンが作れるので、ブログをなどを運営されている方は使わない手はないですね。

インプレッション数が増えてきて いるにもかかわらず、コンバージョン数が増えないで悩んでいる方は勝負所のリンクをボタンにしてみましょう。多分、道が開けるはずです。

 

それでは!

Lin

飯橋凛(Ihashi Lin)

インターネット広告代理店を1年半で退職。
その後、副業として活動していたウェブメディア運営のフリーランスへ。
現在はプログラミングの勉強に励み、0からフリーエンジニアの道を目指す。最近はキムチをまとめ買いにはまっている。


Sponsored Link

コメントはこちらからお願いします!



もう1本読んでみる