テキストリンクをボタン化する方法

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

こんにちは。
シーサイドレーベルweb担当の飯野です。

今回は、テキストリンクをボタン化する
方法について解説します。

テキストにリンクを貼ると
通常はテキストの文字のリンク部分だけ
クリック出来ます。

例えばボックス設定を行った
こちらの見本を御覧ください。

gazo1

この様に、テキストの文字部分にだけ
リンクが貼られ、クリック出来る範囲も
このテキスト文字の部分だけです。

では、テキストリンクをボタン化して、
設定範囲のどこをクリックしてもリンクを踏める状態に
するには、どうするかと言いますと。

CSSで指定してあげれば良いだけです。

リンク指定するタグは <a> タグを利用しますが、
この<a>タグというのは、インライン要素のタグです。

このインライン要素を、CSSでブロック要素にしてあげます。

そうすることで、テキスト部分だけしかリンクが貼られてなかったのが、
ボックス全体にリンクが貼られるようになります。

ブロック要素に変更するにはこのように設定します。

その他、ホバー時の背景色やリンクの下線を消したりなどの
設定をすると、このようなボタン化したリンクを
表示出来ます。

gazo2

こちらにデモページを用意しましたので
ご参考になさって下さい。

デモページ

では、また来週お会いしましょう。

●3年ぶりに帰ってきた「藤田哲也の個別コンサルティング」

 ⇒ http://www.japan-forum.jp/sp/kojin.htm

mt

起業初年度1000万円、その後ゆるやかに年商3000万円までを目標に起業に向けて一歩を踏み出したい方向けの起業専門メルマガです。最新のノウハウを始め、セミナーや限定サービスのご案内をご希望の方は今すぐ下記フォームより、メインで使っているメールアドレスをご登録下さい。家族との時間を大切にしながら自由自在に収入を増やせる起業家になる方法を余すことなくお伝えいたします。

メールアドレス(必須)

コミュニティ