サムネイル、記事タイトル、記事本文、全てをブロックとしてリンク領域にしたらクリックしやすい。
例として、下記ブログ記事一覧部分を参考にしてください。
http://www.webase.jp/blog/blog/
ただ、aタグはインライン要素であるためブロック要素を包括できない。(HTML4)
(インライン要素でブロック要素を包括してもほとんどのブラウザが解釈して表示上は問題ないことが多いが構文的には間違っている。)
そこで要素内のaタグを包括する対象のタグ内全てをリンク領域にするJS、下記の「divisionLink.js」が使い方も簡単で便利です。
http://tshinobu.com/lab/divisionLink/
ここではリンクとしたい要素が「div」ですがリストタグ「li」に変更したい場合は「divisionLink.js」内の5行目あたり、
var pageDivs = document.getElementsByTagName("div");
を
var pageDivs = document.getElementsByTagName("li");
に変更します。
また、リンク先が外部サイトの場合や設置したページがIFRAME内の場合、ターゲット(target)を変更したい。
そういった場合は15行目あたりの
location.href = this.getElementsByTagName("a").item(0);
を
blank.window.location.href = this.getElementsByTagName("a").item(0);
や
top.window.location.href = this.getElementsByTagName("a").item(0);
などと変更するとで対応できます。
以上、javascriptが分かる方であれば簡単なカスタマイズですがメモっておきます。
(※本ページはプロモーションが含まれています。)
- 広告
- 広告