スタイルシートやJavaScriptでメールアドレスを表示

メールアドレスを収集されないように、Webサイトにはメールアドレスを画像で表示するなどの対策をしている場合も多いと思います。過去に紹介した方法とは別に、今回は新たな方法でメールアドレスを表示する方法の紹介です。

スタイルシートで表示する

Internet Explorer 6/7では表示できませんし、あまり実用的とはいえないかもしれませんが、スタイルシートで対応する方法があります。例えば「@」はInternet Explorer 8以降と、Firefox、Google Chrome、Operaでは@の前後にaccountとdomainの文字が表示されているはずです。これは以下のようなCSSとHTMLで記述しています。

span#atmark:before {
	content:			'account';
}
span#atmark:after {
	content:			'domain';
}

<span id="atmark">@</span>

見ての通り:before擬似要素を利用してaccountを、:after擬似要素を利用してdomainを表示しています。これならば表示したとしてもメールアドレスを収集される危険性はほとんどないでしょう。なにしろ、domain側は.jpより前の部分を最初から記述しておいて:afterでは.jpだけを付加するといったことなどもできますからね。ただし、FirefoxとGoogle Chromeでは:beforeおよび:afterで追加されたテキストがクリップボードに入らないので、アドレス入力の手間は結局画像で処理しているのとさほど変わらないということに……。ちなみに、Internet Explorer 8以降とOperaはクリップボードに取り込めます。

jQueryを利用して表示する

基本的にHTML側はスタイルシートで表示する手順と同じです。IE6/7のためにjQueryで代行します。導入方法は簡単です。まずはHEAD要素内に以下の行を追加してjQueryを利用できるようにします。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

ここではGoogleからjQueryを読み込んでいますが、自分のWebサイトにjQueryを置いてそれを読み込ませてもかまいません。

その直後に続けて以下のJavaScriptを記述しておきます。accountとdomainの部分は各自利用しているアドレスのものに置き換えてください。リンクをしなくていいという場合はwrapの行を削除します。なお、この部分は外部JavaScriptファイルにしておいて、それを読み込んだほうがおそらく安全です。

<script type="text/javascript">
$(function(){
	$("#jmark").prepend('account').append('domain');
	$("#jmark").wrap('<a href="&#109;&#97;&#105;&#108;&#116;&#111;&#58;'+$("#jmark").text()+'">');
});
</script>

あとはHTML側のメールアドレスを表示したい部分に以下のような記述をしておきます。

<span id="jmark">@</span>

そうすれば「@」のようにアドレスが表示され、リンクをクリックすることでメーラーを呼び出すことが可能です。

ブラウザはFirefox、Google Chrome、Internet Explorer 6/7/8/9、Operaを用いて表示を確認しました。