REDLINE MAGAZINE | ボックス全体をリンクにしたい

はじめまして。
探していた情報を見つけて嬉しい気持ちでいっぱいです。
ひとつ確認させてほしいのですが、

このBOX全体のリンクパターンを2つ用意したいとき、

例えばパターン1（.linkbox）がpadding:10pxとすると、
パターン2（.linkbox2）がpadding:20pxという風に種類の違うBOXを作りたいのです。
CSSはスタイルを新規に作ればできるということはわかるのですが、
JSのどの部分を修正すればいいのかがわかりません・・・

いじるとしたら
この部分なんだろうな、と思いますが、もし複数のパターンを指定できることが
ご存知でしたら教えていただけないでしょうか。

function prepareBoxes() {
var boxes = getElementsByClassName(document, "li", "linkbox");
for (var i=0; i<boxes.length; i++){
var fullstories = getElementsByClassName(document, "p", "fullstory");
for (var k=0; k<fullstories.length; k++){
fullstories[k].parentNode.tabIndex = k+1;
fullstories[k].style.display = "none";
fullstories[k].parentNode.onmouseover = function() {
addClassName(this, "hovering");
}
fullstories[k].parentNode.onmouseout = function() {
removeClassName(this, "hovering");
}
fullstories[k].parentNode.onclick = function() {
var destin = this.getElementsByTagName("a");
window.location = destin[0].href;
}
fullstories[k].parentNode.onkeypress = fullstories[k].parentNode.onclick;
}
}
}

お忙しいところ申し訳ありませんが、
どうぞ宜しくお願い致します。

myuさん、コメントありがとうございます。
えとーすいません。実は私あまりJS分かってないんで、どうするのが一番効率的なのか分りかねるんですが、私ならJSじゃなくCSSだけで解決しちゃうかもです。
こんな感じ(一応サンプル)↓
http://redline.hippy.jp/redline_sample/0705/jquery03_080309.html
要はpaddingを20px確保したいボックスに対して.linkboxと.linkbox2を両方指定してスタイルを上書きしてやるのが一番楽なんじゃないかと・・・。
.linkbox{
width:300px;
border:1px solid #999;
line-height:1.5;
padding:10px;
margin:20px;
}
.linkbox2{
width:280px;
padding:20px;
}
<div class="linkbox linkbox2">
<h2>ここパターン２のボックス</h2>
<p>padding:20pxとってます。</p>
<p class="readmore"><a href="http://www.livedoor.com/">( p.readmore )詳細はこちら</a></p>
</div>
↑ボックスのdivに対してclassを2つ指定してCSSファイル内での優先順位を利用してスタイルを上書き。
どっちみちhtml側でclassの記述を入れているので2つ指定したところで大した手間にはならないとは思うんですが・・・どうでしょうか＞＜

Redさん、返事遅くなって申し訳ありません！

<div class="linkbox linkbox2">

↑こういう裏技があるなんて知らなかったので、目にウロコでした。すごいですね！
今まで費やした時間がとても無駄な気がしてきました。。。

でも無事Redさんのおかげで解決できました。

本当にありがとうございます！！！（泣）

いつも拝見させていただいております。

jQueryでボックス全体をリンクさせたいる時に、以下の仕様に変更したいのですが、うまくいかなくて、コメントいたしました。

( p.readmore )詳細はこちらではなく、テキスト自体にリンクを貼り、それをtarget="_blank"で開かせたいのですが、可能でしょうか？

>takuyaさん、コメントありがとうございます。
えと、「詳細はこちら」はJS無効の際に代替リンクとして表示されるものなので、JS自体が動かないのでちょっと記事内の動作とは変わってきますよね。（意味が違うかな・・・）

とりあえずjQueryを使って別窓リンクを設定する方法はこちらのサイトがとても分かりやすいです。
jQueryでtarget属性を使わずに外部リンクを別窓表示 - Emotional Web
http://www.lllcolor.com/web/movabletype/37.html

それを踏まえてここの記事でのボックス自体をリンクにしつつ別窓にしたいとするとこんな感じですかね・・・
http://redline.hippy.jp/redline_sample/0705/jquery04-080924.html
結局「詳細はこちら」はなしにしてもボックスの中のどっかにaタグがないといけないので上の例ではpタグに入れてみました。

なんか全然見当違いの事してたらすいません＞＜

Redさん、早急な返事ありがとうございます。
わざわざ、サンプルまで作っていただき本当にありがとうございます。
思い通りのサンプルだったのですが、問題が・・・

無理を承知でお伺いします。
リンク先が、外部リンクやpdfファイルだったらtarget="_blank"で開き、内部リンクだったらtarget="_self"で開くなんてことできますか？

あつかましい質問で申し訳ありませんが、ご返信よろしくお願いします。

余談ですが、macのDock風メニューをポートフォリオサイトで使わせていただきました。
お世話になりっぱなしで申し訳ありません。

>takuyaさん、こんばんわ。

すいません。ご返信見落としてました＞＜
えとー、ならばCSSの.linkboxの一行目のところを
.linkbox,.exlink
にしておいて、JSのとこは

<script type="text/javascript">
<!--
$(document).ready(function() {
$(".linkbox:has(a[@href^='http://'],a[@href$='.pdf'])").addClass("exlink").removeClass("linkbox");

$(".exlink").click(function() {
window.open($("p a").attr("href"), '_blank');
return false;
});
$(".linkbox").click(function() {
window.open($("p a").attr("href"), '_self');
return false;
});

$(".linkbox,.exlink").hover(function(){
$(this).addClass("box_hover");
},
function(){
$(this).removeClass("box_hover");
});
});
-->
</script>

こんなんにしたらどーでしょうか。
なんか汚い書き方というか、もっとうまく書く方法あると思うんですけど、意図としては.linkboxの中に「http://」で始まるリンク先と「.pdf」で終わるリンク先があった場合.linkboxを.exlinkに変更してその後それぞれの処理、みたいな・・・。
うーん。私のJS脳が足りないのでこんな発想しかできましぇん｡゜（ﾟ´Д｀ﾟ)゜

Redさん、返信ありがとうございます！！
早速試したところ、意図通りに動きました！！
お忙しい中、本当にありがとうございました！！

私はまったくJSがわからないので、サクっと解決できるように勉強がんばります！

Redさん
度々、申し訳ありません。
以前教えて頂いた、

「リンク先が、外部リンクやpdfファイルだったらtarget="_blank"で開き、内部リンクだったらtarget="_self"で開くなんてことできますか？」

ですが、複数のボックスで使用すると、リンク先が全て同一ページになってしまいます…

JSのどの部分を修正すればいいのかがわかりません・・・

お忙しいところ申し訳ありませんが、
どうぞ宜しくお願い致します。

>takuyaさん
えとー・・・こういう感じでしょうか？
サンプル
http://redline.hippy.jp/redline_sample/0705/jquery05-090131.html
上からhttpから始まるリンク、普通にサイト内リンク、http～、サイト内っていう風な宛先にしてます。私もJSよく分からないので記事内で紹介してたリンク先のソース参考にしてます。

$(document).ready(function() {
$(".linkbox:has(a[@href^='http://'],a[@href$='.pdf'])").addClass("exlink").removeClass("linkbox");
$(".linkbox").click(function() {
var l_anchor = this.getElementsByTagName("a");
window.location = l_anchor[0].href;
return false;
});
$(".exlink").click(function() {
var e_anchor = this.getElementsByTagName("a");
window.open(e_anchor[0].href, '_blank');
return false;
});

$(".linkbox,.exlink").hover(function(){
$(this).addClass("box_hover");
},function(){
$(this).removeClass("box_hover");
});
});

Redさん、早速のご返信ありがとうございました。
今度こそ、意図したとおり動きました。

お忙しい中、サンプルまで作成していただき本当にありがとうございました。

>takuyaさん
おお。合ってましたかー。よかったですヽ(´ー｀)ノ
私の方こそ、takuyaさんがおっしゃってたような使い方を想定してなかったので、いろいろ試す機会を頂けて勉強できました。
ありがとうございましたー。

Red様、
いつも拝見させていただいております。
質問なのですが、ボックス全体をリンクにして
さらにオンマウス時に右下に1px程ずらす様にしたいのですが、
可能でしょうか?
不躾な質問申し訳ございません、
ご教授よろしくお願いいたします。

>tomioさん
こんにちわ。えとー右下に1pxずつずらすならCSSの「.box_hover」の部分に
position:relative;
top:1px;
left:1px;
の3つを追加してやったらどうでしょうか。
サンプル↓
http://redline.hippy.jp/redline_sample/0705/jquery06-09312.html
意図してらっしゃる動きになってたらいいんですが･･･。

Red様
ありがとうございます!
考えていた通りの動きです。

>position:relative;
>top:1px;
>left:1px;
の指定は知っていたのですが、
頭の中で応用ができていませんでした。。

お手数おかけして申し訳ございませんでした。
お忙しい中ありがとうございました!

Red様こんにちは。

こういうことできないかなー？とネットサーフィンしていると、Redさんのサイトに行き着く事が多いので、いつも参考にさせていただいております。
今回は上手く再現できずにギブアップ気味なので、ご教授いただきたく、質問させていただきました。

複数のdiv要素が存在するボックスの中にあるimg要素からもリンク出来るようにしたいと思っています。
ボックス全体をオンマウス時にリンクポインタで表示する事は出来るのですが、
img要素はクリックしてもリンク先のページに移動できません(T_T)
このjavascriptでは、img要素は使えないのでしょうか...？

何か良い方法がありましたら、
ご教授いただけるとありがたいです。
よろしくお願いします。

>mikiさん
コメントありがとうございました。

>複数のdiv要素が存在するボックスの中にあるimg要素からもリンク出来るようにしたいと思っています。
>img要素はクリックしてもリンク先のページに移動できません(T_T)

えとー、すいません。状況がよく把握できてません＞＜

今回の方法はそのボックスの中にあるa要素のhref属性の値を拾って、該当ボックス全体のどこをクリックしてもその宛先へ移動するものなので、img要素でも何でもhrefの値が存在してればいけると思います。imgがa要素の外側でも内側でも動作するはず･･･。
↓一応サンプルです。
http://redline.hippy.jp/redline_sample/0705/jquery07-090918.html

全然見当違いのソースだったらごめんなさい＞＜

Red様、早速のレスありがとうございます！
サンプルまで作っていただいて、感謝です☆

私が勘違いしていたようです。
ボックス内の何処かのリンクを拾うんですね。
リンクにしたいdiv全体をaタグで括っていました(^_^;
ただ、リンクできるようになったのに、作って頂いたサンプルのようにオンマウスでリンクポインタにならない...。
何故だろう？？？
又試行錯誤してみます～。

ありがとうございました！

>mikiさん、お返事ありがとうございました。

>リンクできるようになったのに、作って頂いたサンプルのようにオンマウスでリンクポインタにならない...。

hover時に付与されるボックスのclass（上の例でいうと.box_hoverってやつです）内でCSSの指定に「cursor:pointer;」は指定してますか？
リンクはできるようになってもCSS側でポインターの形を指定してやらないと指マークにはならないっす(n'∀')η

はじめまして。
たびたび拝見し参考にさせていただいています。

今回の記事を参考にクラス名を変えてやっています。
素人ですのでやっぱりうまく動きませんでしたが、ソースが無いないのかなと思い、
Redさんのhttp://redline.hippy.jp/js/jquery.jsをそのまま貼付けてみましたら
多少崩れはするものの、思った通りに動きました。
（事後ですが、勝手に試してしまいすいません。）

つまり問題は今のところソースだと認識しています。
ネットマナーを熟知していないので正しいか分かりませんが、Redさんのものをそのまま流用はよろしくないと思いますので、
どのようにしたらソースの問題をうまく処理できるかお教え頂ければと思い質問させていただきました。

ちなみにRedさんの記事を参考にいじってみたものがこちらです。
(実体参照に変換、をしましたが崩れていたらすいません、諦めます。)

$(document).ready(function() {
var smalls = $(".small");
for (var i=0; i<smalls.length; i++){
var biggers = $("p.bigger");
for (var j=0; j<biggers.length; j++){
$(".small").click(function() {
var anchorTags = this.getElementsByTagName("a");
window.location = anchorTags[0].href;
});
}
}
$("p.bigger").addClass("none");
$(".small").hover(function(){
$(this).addClass("box_hover");
},
function(){
$(this).removeClass("box_hover");
});
});
長々と見難くなり申し訳ありません。
以上で失礼します。

>なおとさん
まずjQueryの本体は本家サイトから最新版をダウンロードした方がいいですよー。うちのは初期の頃のバージョンのものを使用しているのでかなり古いです。(現時点では最新は1.3.2)
http://jquery.com/
↑ここからまずダウンロード。

で、使いたいページは
http://na0to.com/preview.html
こちらのページですか?

この内容ならこのページの記事の内容のようにボックス全体をリンクにするんじゃなくて違うマークアップで処理した方がいいと思いますよー。(ちょっと記事の内容と主旨が違うので)

写真のギャラリーなら私のおすすめは
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
このjQueryのプラグインなんかいかがでしょうか。
なおとさんの上記ページのレイアウトでサンプル作ってみました。
http://redline.hippy.jp/redline_sample/0705/sample/sample.html
どうでしょう・・・？
(上記ページのその１とかその２とかは同じ画像を使い回ししているので分かりやすいように入れただけでっす)

ソースもhtmlは単にリストタグでマークアップしているだけなので更新も楽ですし、divでレイアウトをコントロールするよりも簡単です。
写真がびゅーんと出てくる部分のjsとcssはプラグインをダウンロードした中にすべて入っているので、あとはそれらを読み込んでから必要な記述をコピーペーストするだけです。

こんにちわ。
返答に丁寧にサンプルまで載せて対応して頂きありがとうございます。
そして迅速な対応をしていただいたにも関わらず、こちらの返信が遅くなってしまい誠に申し訳ありません。
あれからいじっていたら他のところまでおかしくなってしまい、とりあえずそちらを修正していたらこんなに遅くなってしまいました、すいません。

Redさんに教えて頂いた通り、ソースをDLしてやってみたところ確かに動作しました。
マウスオーバーでdivが変わり、div内ならリンクへ飛べるようになりました。
しかしサムネが隠れるようになってしまい、どれがどれだか分からなくなってしまいました。
（そちらはどこをどういじったのか忘れてしまいましたが、既に動作してません汗http://na0to.com/preview_testing.htmlです。）
もう教えて頂いたプラグインでスライドショーにすればいいかな、とも考えましたがhtmlでチョコチョコやるのが好きなので、今まで通りやらせてください、すいません（汗）

僕がしたいことは僕の一つ上のコメントにある事でした。
divの中にある画像が表示されていて、周りのdiv自体でもリンクへ飛べて且つ、divの色が変わる、という事です。
それを参考にしてみようと思いましたが、どこをどういう様に参考にしたらいいか分かりません。。
もし僕のサイトでやるのであったら大掛かりな仕掛けが必要なのでしょうか。。
それだったら今回は諦めますがもし簡単でRedさんのお時間も取らせないようでしたらお教え頂けたらなと思います。
しかしRedさんもお忙しいとは思いますのでご負担がかかるようでしたら適当にあしらって頂ければと思います。
失礼します。

>なおとさん
えっとですね、ここなんですが、
>マウスオーバーでdivが変わり、div内ならリンクへ飛べるようになりました。
どうしてなおとさんの今回のケースでわざわざdivを使用するのかが分からないのです･･･汗
今なおとさんが使用しているソースではdivの中身にいきなりaタグが入ってて、中身はそれのみ、ですよね。その場合ならdivではなく、他のものを使用した方がいいと思うのです。(この辺り、何のことかわからなかったらスルーしてください・汗汗)

なんせ、なおとさんがやりたいことはこういう事ですよね??
・プラグインとか使わずにやりたい
・サムネイルまわりもaタグに反応させたい
・マウスをそのエリアに乗せたときに背景色を変えたい
上記３点でOKですか？
で、これならjavascriptを使用する必要なく実装できますよー。ということでサンプルです↓
http://redline.hippy.jp/redline_sample/0705/sample/sample2.html

大掛かりどころかCSSだけでかなり簡素化できます。
上記ページのソースを見てもらえたらわかると思うんですが、
li a{
display:block;
width:40px;
height:40px;
padding:15px;　←サムネイル周りの余白
}
li a:hover{
background:#ffc;　←マウスのせた時の背景色
}
この辺りを好みで書換えしてもらって、あとは今なおとさんが指定している別ウィンドウで開くjavascriptの指定を
<a href="●●●">
ここ書き換えてしてもらったらご希望の動作になると思うんですがいかがでしょう？

前回の返信にも書きましたが、今回のなおとさんのdivのボックス全体をリンクにするというのと、この記事のボックス全体をリンクにする、の内容の主旨が違うので、あまり記事の内容にこだわらない方がいいかと思います･･･。

>なおとさん・・・追伸です。
でもどうしてもそこをdivにしなきゃならない理由があるならば、上と原理は同じですが、
http://redline.hippy.jp/redline_sample/0705/sample/sample3.html

こんな感じでjavascriptを使わなくてもCSSだけで処理できますよ。

はぁー、はるほど。
確かにdivにする必要は無いと思います。
なんせ付け焼き刃なものですからよく分からず、なんとなく、という理由でdivでした。
そしてこんなに簡単に実現できてしまうのか、そうか、しまったな、という申し訳なさでいっぱいです。
Redさんのご意見をもとにこれからいじくってみようと思います。
ご迷惑かけてすいませんでした。
それと親切丁寧に教えて頂きありがとうございました。
失礼します。
よいお年を。

はじめまして。
本件、かなりわかりやすくて参考にさせていただいております。

さて、ポップアップで開きたい場合のスクリプトをちょいといぢって、通常時は「linkbox」ポップアップ時は「exlink」という対応にしてみたのですが、ポップアップしようとすると、Yahoo!ツールバーを入れているIEの環境だと、ポップアップブロックが作動してしまいます。
これって、作動しないように解決って可能でしょうか？
色々と試してみたのですが、なかなかうまくいかないもんで・・・。
やはり「display="none"」にしたテキストリンクから開こうとしているのと一緒なので、悪意のあるリンクだと判定されちゃうようなのです。

もしおわかりでしたら教えてください。

宜しくお願い申し上げます。

>kazさん、コメントありがとうございました。

>これって、作動しないように解決って可能でしょうか？
それは個々のブラウザやツールバーの設定に依存する問題なので、こちらでどうこうできる事ではないのではないかと思います。できたらそれはそれでマズいというか危険というか・・・。あくまでユーザーの自分の意思でオプション設定等で許可サイトにするとか、ブロックのレベルを下げるとか、そういう形にするしかないかと思います。

>やはり「display="none"」にしたテキストリンクから開こうとしているのと一緒なので、悪意のあるリンクだと判定されちゃうようなのです。
これは多分違うと思いますよー。CSSの問題じゃなくて単にjavascriptを使って新しいウィンドウを開こうとしているのでその「スクリプトを使っている」事に対して反応しているんだと思います。そもそもがjavascriptを使ったポップアップをブロックするためにそのツールバーを入れてるのだから、逆にブロックできなかったらそれはそれで意味ないというか・・・。どうしてもマズい場合はやっぱり普通に個別の要素内のa要素にtarget=_blankか何かを指定して回避するしかないかなぁと思います。

一応参考までに・・・。
http://www.bauddha.net/-gutenberg_gateway/about_popup.html
http://www.picon.co.jp/netprint/pub_cancel.html
http://q.hatena.ne.jp/1134827415

kazさんの検証中のIEのバージョンは6なのでしょうか？今ググってたらIE7以降はYahooツールバーにはポップアップブロックの機能はなくなってて、ブラウザ側での設定になるという記述をチラホラと見かけたものですから・・・。
お客さんへ納品する用のサイトでIE6もターゲットに必ずすべての機能とツールバーへの対応までを含める場合だとkazさんのおっしゃってる問題は確かにやっかいですよね。一応私も自分でこのjs使ってるサイトもあるんですが、今のところ「ツールバーでブロックされる！」という苦情は来た事ないんですが、もしかしたらそういうユーザーさんもいるのかもなぁ・・・と。
お役に立てずに申し訳ないです＞＜

はじめまして。
いつも拝見させて頂いております。

この記事を拝見し、少し気になった事があったので初コメントしてみました。

http://redline.hippy.jp/redline_sample/0705/jquery01.html
上記ページでFirefoxだと、クリック後、ステータスバーの戻るで戻ると、背景色がhoverの状態になります。

http://redline.hippy.jp/redline_sample/0705/jquery02.html
上記ソースを利用してdivの数を3つ以上に増やすと、IEに限りクリックすると、divの数の分だけリンクのカチカチという音がします。

解決方法ってあるのでしょうか？

>web.Dさん
コメントありがとうございました。

>クリック後、ステータスバーの戻るで戻ると、背景色がhoverの状態に
ですねぇ（汗）
ブラウザの『戻る』で戻ると当然そのままJSで付与したclassが残ってるので背景色付いてる状態になってるんですよね。もっかいマウス乗せると消えますけど・・・うーん。気持ち悪いと言えば気持ち悪いですが『戻る』で前ページの状態を初期状態に戻すってのはブラウザ作ってる人にしかどうこうできない…かもです（汗）アドオンとかでそういうのあるかもしんないですね。もし見つけたらまたご報告します。

>divの数の分だけリンクのカチカチという音がします。
Σ(´д｀ﾉ)ﾉ
ほんとですね。。。全然気づいてませんでした。なんだろう、これは（汗）
多分…これもブラウザの挙動なのでそういう解釈をして音を鳴らしているのだろうと思うんですが…解決方法はわからないです。すみません(つд⊂)
クリックした際のカチカチ音自体を消す方法なら下記のような手順でできるみたいですけど、ユーザーさんに強要はできないですもんね。。
http://www.mebius-faq.jp/faq/1030/app/servlet/qadoc?001830

お役に立てなくてすみません…。

>web.Dさんへ【追伸】
Twitterで解決方法を募集したところ、下記のような解決方法が・・・

1つめは $(".linkbox").click(function() に $(this).removeClass("box_hover"); を追加
http://twitter.com/#!/foresuke/status/34823585889525760

2つめはそもそもループさせてる部分を $(".linkbox").click(function() { window.location.href = ($(this).find("p.readmore a").attr("href")); }); とか
http://twitter.com/#!/foresuke/status/34824022235553792

Red様
早速の返信ありがとうございます！
twitterが見れないのですが･･･記載されてるソースで挑戦してみます。
ありがとうございました。

はじめまして。いつも参考にさせて頂いてます。
突然で大変恐縮です。
以下サンプルのようにtarget="_blank"で別ウィンドウを開きたいのですがボックス要素内に複数のリンクがある場合はどのように記述したら宜しいでしょうか。リンク先もそれぞれ違い、ある特定のクラス指定内のリンク先のみ別ウィンドウで開きたいと思ってます。
http://redline.hippy.jp/redline_sample/0705/jquery05-090131.html

試行錯誤したのですが全く動かず・・・質問させて頂きました。どうぞ宜しくお願いします。