biggerlink.jsでクリックできる領域を拡大させる
ホームページを作っていて、a要素でリンクを設定します。その時にa要素で囲んだ範囲しか、リンクができません。
あまり問題が無いように思えますが、実際にWebページを操作すると「この枠全体がリンクしたらいいのに」「テキストしかリンクしないから押しにくい」なんてことがありませんか？
そんな時に活躍するのが「biggerlink.js」です。
必要となるファイル
Webサイトに必要となるデータの他に
・biggerlink.js（ダウンロード：http://www.ollicle.com/projects/jquery/biggerlink/）
・jquery.js（ダウンロード：https://jquery.com/）
この2つが必要となります。
公式に配布しているWebサイトへのリンクを設置したので、そちらからダウンロードしてご利用ください。
scriptの記述
biggerlink.jsとjquery.jsを設置して、script要素内に下記を書き込みます。
$(‘.bigger‘).biggerlink();
});
太字で書いた.biggerは、どの要素をリンクエリアにするのかを指定しています。
もちろん任意の文字列に変えて使っても大丈夫です！
HTMLの記述
続いてコンテンツの記述です。
<li class=”bigger”>
<img src=””>
<p><a href=””>リンクテキスト</a></p>
</li>
<li class=”bigger”>
<img src=””>
<p><a href=””>リンクテキスト</a></p>
</li>
</ul>
このように書き込めば完成です。
a要素はli要素の一部にしか書いてありません。なので本来であればリンクテキストの部分だけがクリックできるようになりますよね？
でもbiggerlink.jsを使っているので、.biggerで指定したli要素全体がリンクエリアになるんです！！
オマケ：別ウィンドウで開かせる場合
実は先ほどの記述では「target=”_blank”」による別ウィンドウでの表示には対応できません。
対応するにはこのように記述を変更します。
window.open(this.href);
return false;
});
$(‘.bigger’).biggerlink();
HTML5からはインライン要素とブロック要素の分類は廃止されている
HTML4.01ではa要素はインライン要素でした。
なのでブロック要素全体をリンクで指定する事ができなかったんですね。
ですがHTML5ではインライン要素とブロック要素の分類が廃止されているので、段落・リストなどの要素に対しても全体をa要素で囲んでリンクを指定できるようになっています。
ただし、その中に他のリンクやフォームボタンなどが含まれる場合にはリンクを指定することはできません。
なので実はbiggerlink.jsを使わずとも要素全体をリンクに指定する事ができちゃうんです！
JavaScriptを使っていましたが、例えばこのようにすることもできます。
<li>
<a href=””>
<img src=””>
<p>リンクテキスト</p>
</a>
</li>
<li>
<a href=””>
<img src=””>
<p>リンクテキスト</p>
</a>
</li>
</ul>
CSS
a{display:block;}
JavaScriptが不要になるので、かなりスッキリしますよね。
読み込むファイルも減るので、閲覧速度にも若干の差が出るはずです。
HTML5で作られたページの場合はこの方法が使えますが、HTML4.01などのバージョンで作られたページの場合、この方法を使うとHTMLエラーとなったり表示が崩れたりと、良くないことが起こる事が予想されます。
状況によってbiggerlink.jsを使うのか、HTMLとCSSだけで対応するのかを判断するようにしてください。
まとめ
・要素全体をリンクさせるには「biggerlink.js」を使う
・HTML5からはインライン要素とブロック要素の分類がなくなったので、HTMLとCSSだけで対処できる
・状況によってbiggerlink.jsを使うか、HTMLとCSSだけで対応するのかを判断する
