ホームページ上でキャンペーンを打つ時、リンクボタンを出来る限りまわりの情報より目立つように作成したりしますが、ひとまず狙うところは「目に留まるようにする」こと。

「もともと色がシックな感じで目立つ色は使いたくないけど…」と思っても、ひとまず見てもらうことが目的なのでなんとかせせっと色合わせをしながら、おかしくない色を調整したり、サイズを調整したりとなかなか苦労します。

そんな悩みが解決するjQueryプラグンを見つけました！その名も「seekAttention.jquery.js」！
まずはサンプルをご覧あれ！

seekAttention.jquery.js サンプル

キャンペーン情報、見ましたよね？まわりを隠せばそこが目立ちます。無理くり手を変え、品を変え画像を目立たせたりしなくても、絶対といってもいいくらい目線を誘導できます。

導入も簡単で「jQuery」と「seekAttention.jquery.js」を読み込み下記のように記述します。

$(function(){
	$('.campain').seekAttention();
});

上記記述で「class=campain」を指定している場所が白抜きになるようになります。これだけです。

めちゃくちゃ簡単に導入できるし、これはめちゃいい！変にごちゃごちゃさせるよりもスマートな方法です。

人によっては好き嫌いはあるかもしれませんが、目的はあくまでも「目に留まるようにする」ことです。もしキャンペーン等打っておられる方は、一度導入してみて導入前のページ誘導率等くらべてみてみるのもいいかもしれません。

残念ながら今のところIE6, IE7では多少不具合があるようです（サンプルでもボックスの上下がずれています）が、要チェックのプラグインです。

作者のページでは他にもDemoがいろいろあるので、興味のある方は下記ページをご覧あれ。

Seek Attention – jQuery plugin – by James Padolsey

XHTMLでは「target=_blank」は非推奨、いわゆる「別窓を開く」ことはユーザさんにまかせるのがいいので使っちゃいけない、ということになっています。

とはいえなければないで不便に感じることもある。ということで「target=_blank」の代わりに通常のリンクに別窓を開くリンクをくっつけるものをjQueryで作ってみました。

jQuery – 別窓を開く

$(function(){
if(!$.browser.safari) {
	$("a.openwindow").each(function () {
		owUrl = $(this).attr("href");
		owTxt = $(this).text();
		owLink = '&nbsp;<a href="'+owUrl+'" class="owimg" title="'+owTxt+'を別窓で開く"><img src="openwin.gif" alt="別窓で開く" /></a>&nbsp';
		$(this).after(owLink);
	});
	$("a.owimg").click(function(){
		window.open(this.href, '');
		return false;
	});
}
});

仕様はいたって簡単で、「openwindow」というクラス名がついたアンカータグのあとに、別窓を開くリンクを別途クラス名「owimg」を割り当て追加し、そのクラス名がついているアンカーがクリックされたら「window.open」で窓を開くといもの。「」をクリックするとjavascriptの「window.open」でページが開きます。

ちなみに「Safari」は処理を除外しています。「window.open」の「return false」がなぜか効かない。親のwindowもリンク先に飛んでしまいます…。なぜ…。いろいろ調べているとSafariではバコバコ落ちまくるサイトが多数（開いた瞬間に落ちるところも）あり、Safariのせいなのか、jQueryのせいなのか、その他の原因なのかが特定できずじまい…。ちょっと時間かかりすぎたので今日は断念。また調査してみなければ。

jQueryではCSSのclassを簡単に追加・削除することができます。classを操作する場合は『 addClass() / removeClass() / toggleClass() 』を使います。

//id=msgの要素にclass=redを追加する
$("#msg").addClass("red");
//id=msgの要素のclass=redを削除する
$("#msg").removeClass("red");
//id=msgの要素のclass=redがあれば削除、なければ追加する
$("#msg").toggleClass("red");

「addClass()」「removeClass()」は簡単かと思いますが、「toggleClass()」は指定したクラス名があれば削除、なければ追加するという「ONとOFFを切り替える仕組み（これをトグルといいます）」を持っています。

このトグルの機能はすごく便利で「メニューを開く/閉じる」みたいな動きが簡単にできてしまいます。

jQuery – addClass / removeClass / toggleClass サンプル

上記ページの「toggleClassのサンプル」は、「display: none」だけのクラス「hidden」を指定して「.toggleClass(“hidden”)」をクリックで動作させているだけです。

Javascript部分

… 省略 …
	$("#tCchk p.title").click(
		function(){
			$("#tCchk p.content").toggleClass("hidden");
		}
	);
… 省略 …

CSS、HTML部分

… 省略 …
.hidden {
	display: none;
}
… 省略 …
<div id="tCchk">
<h2>toggleClassのサンプル</h2>
<p class="title">クリックしてください。</p>
<p class="hidden content">表示されました！もう一度↑をクリックすると消えます。</p>
</div>
… 省略 …

ちなみに「toggle()」というメソッドもあり、わざわざ「hidden」というクラス名を追加しなくても同じ動作をさせることができます。

//class=contentが指定された要素の表示・非表示を切り替える
$(".content").toggle();

たったこれだけで「閉じる／開く」の機能を追加することができます。ちょっとメニューが長過ぎるかな、と思う方は「toggleClass()」を利用してチャレンジしてみてはどうでしょうか？