divisionLink.jsのウィンドウtargetを修正。【技術情報】13.01.28

サムネイル付の記事一覧などでタイトル部分のみのテキストリンクではクリックしづらい。
サムネイル、記事タイトル、記事本文、全てをブロックとしてリンク領域にしたらクリックしやすい。


例として、下記ブログ記事一覧部分を参考にしてください。
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が分かる方であれば簡単なカスタマイズですがメモっておきます。

このエントリーをはてなブックマークに追加
「WEBaseとつながろう!」LINEでマーケティング情報を定期的に発信していきます。集客に興味がある方は、友達登録お願い致します。
Contents
お知らせ 一覧
使命は集客、戦略的WEB集客サポート「WEBコンサルティング」
お試しWEBコンサルティング
完全成果報酬型SEO対策「インジーニアスSEO」
戦略的ホームページ制作・リニューアル
「WEBaseとつながろう!」LINEでマーケティング情報を定期的に発信していきます。集客に興味がある方は、友達登録お願い致します。
ページTOPへ