• Internet Explorer 8 開発者向け技術概要
• MSDN　What’s New in Internet Explorer 8

現時点で Dojo Toolkit が IE8 で上手く動いていません。次の Dojo の ver UP で直されそうなのでに期待。

ライブラリが動かない等、過去に制作したサイトが崩れたり問題が起きている場合、レンダリングモードを変更して過去の IE 互換レンダリングで表示させておくことが必要。

IE8 にはレンダリングモードが複数あります。詳細は以下のサイトで。

• 2. 実現可能な相互運用性と互換性 – Internet Explorer 8 開発者向け技術概要

1 年弱前の記事ですが、こちらも参考になりました。

• 【メモ】IE8の3レンダリングモードのまとめ / KOMOREBI || blog
• SummerWind – IE8のEmulateIE8/EmulateIE7モード

ただ、IE8 の互換モードと IE7 は全く同じではないということで、そのあたりも注意が必要ですね。

• IE8互換ビューとIE7はまったく同じではない | エンタープライズ | マイコミジャーナル
• IEBlog : Site Compatibility and IE8

正直レンダリングモードが複雑化しすぎている気がします。せっかく「 hasLayout から IE8 で逃れられた！（＝ IE の面倒なモノはなくなった！）」と思ったのになぁ。まだ面倒ですね。
とりあえず、「Internet Explorer 8 開発者向け技術概要」を片手にがんばります。

こちらも、画像のサイズによって自動でリサイズして表示してくれます。これはよい！そして Esc キーで閉じてくれます。

カスタマイズできる Lightview for WordPress at orioa を参考にさせていただきました。

ThickBox が jQuery を利用しているのに対し、Lightview は prototype.js を利用しています。

なにかと prototype.js がほかのプラグインなどで使われていることも多いので、そういった場合には ThickBox より導入しやすいかなと感じました。

prototype.js を使っているサイトで ThickBox を使う場合には競合が起きるので、
そのあたりを考えなくて良いように jQuery 利用サイトなら ThickBox、prototype.js 利用サイトなら Lightview を使うのも良いかもですね。

しかし、IE で見ると記事一覧ページで Lightview 動いてないな～、と気づきました。あれれ :roll: 原因探してみます。

ThickBox 3.1

具体的に変更しようかな～と思ったのは以下の点が気に入ったから。

• 大きい画像を表示した際にリサイズを勝手にしてくれる
• 画像をクリックして閉じることが可能
• 画像の外の上下左右どこかをクリックしても閉じることが可能
• Esc キーでも閉じることが可能

後は画像以外のモノも表示できるので機会があったら使いたい、というのもありました。

それにあわせて、使っている WP プラグインの IImage Browser に少し手を加えました。

※IImage-browser 日本語版 ≪ MMRT daily life さんからダウンロードした、IImage Browser 日本語版 の Default を利用しています。

IImage Browser の、wp-admin 内に入れる iimage-browser.php 内 71 行目付近を以下のように変更。

$ib_custom_code_full = '<a href="%src" title="%title" class="lightview"><img src="%tsrc" alt="%title" width="%twidth" height="%theight" /></a>';
$ib_custom_code_thumb = '<a href="%src" title="%title" class="lightview" rel=""><img src="%tsrc" alt="%title" width="%twidth" height="%theight" /></a>';

これで、ThickBox を使った画像の投稿が楽になりました。
過去の画像は、LiteBox を切ってしまったのでそのままページ移動で表示されるようになっています。

また、ThickBox は jQuery を使用しており prototype.js と競合がおきます。
これへの対処方法は以下のサイトを参考にさせていただきました。

• 二次元汚染域 – jQueryとprototype.jsの共存させる方法
• prototype.jsとThickBox(jQuery)がコンフリクト｜blog｜たたみラボ
• prototype.jsとThickBox(jQuery)のコンフリクトを防ぐ方法 (Yusukebe::Tech)
• コスミー報告書[社外秘] – jQueryトリビアルメモ２　（prototype.jsとかと共存、jQuery.jsの複数回読み込みについて）

具体的には、以下のようにヘッダー内に書き、jQuery を利用している .js 内の 「$」を「jQuery」に置換することで共存可能になりました。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
<!--
	jQuery.noConflict();
//-->
<script type="text/javascript" src="prototype.js"></script>

このとき読み込ませる順番は、jquery.js を最初に、次に jQuery.noConflict(); の部分、最後に prototype.js 。
この順番でないと上手く動かないスクリプトが出てきたり、エラーが出たりと何かと問題があったので注意。

06/13 追記：
大事な部分を丸ごと書き忘れていることに気付きました orz
javascript 関連の部分を追記いたしました。

新規ウィンドウを開かせる手段を実装したい、という場合は以下の 2 種類が有名だと思います。

• a に target=”_blank” を指定する
• javascript で設定する

しかし「ウィンドウを新たに開くかどうか」はユーザーが決めるべきことなので、作り手が決め手はいけない、という話もあります。
そのためか、XHTML 1.1 や XHTML Basic では target=”_blank” という書き方は準拠していない、とされ NG になってしまいます。
「マークアップ言語である HTML で、ウィンドウ操作をする」という点も問題なのだと思います。マークアップ目的以外になるので。

でもユーザーの中にも新規ウィンドウを開く手段を実装しておいて欲しいという人もいます。
いやいや余計なお世話だから、こっちに決めさせてくれ、そんなことは実装しておかないでくれ、という人もいます。
実装して欲しい・欲しくない、という人が両方いる…ということで、じゃあ両方のリンクを制作しておけばいいんじゃ！と思いまして。今回はそんな方向でやってみました。

ポイント

• rel 属性は XHTML1.0 Transitional では OK 。HTML4.0 では rel に指定できる値が決まっている。rel を使うのならば、XHTML1.0 Transitional で書いておくようにする。今回はより柔軟に対応するために、class 属性を使用。
• マークアップ言語である HTML でウィンドウ操作はしない（つまり _blank は使用しない）。新規ウィンドウを開く部分は javascript で window.open を使って実装。

実装方法は次のような形。

見本

Numb.

テキスト部分のリンクをクリックすると同じウィンドウで開き、矢印の画像部分のリンクをクリックすると新しいウィンドウで開きます。

※現在違う方法で実装を始めたため、この見本では新規ウィンドウが開きません。

実装方法

• ) か b ) どちらかの方法を選び、javascript を保存。HTML に外部ファイルとしてこれを読み込ませる。
• た目を整えるための、style.css にコレ用の CSS を追記。
• ウィンドウを開くリンクとしておきたい a タグに `class=”external”` をつける。
  ※ウィンドウを開かないリンクも一緒に記述します。
• おまけ。 Firefox の方は Copy+ を使って簡単に記述できるようにすると便利です。ここは任意。

1. javascript

prototype.js を利用する場合と、利用しない場合では少しだけ javascript が違います。
もし Litebox 等、body に onload を書くものを利用している場合は prototype.js を利用するほうを選んでください。

参考：prototype.jsを使ってみる 2-Event.observe[to-R]

a ) prototype.js を利用しない場合

function externalLinks() {
	if (! document.getElementsByTagName ) return;
	var anchors = document.getElementsByTagName("a");
	for (var i=0; i<anchors .length; i++) {
		var anchor = anchors[i];
		if (anchor.getAttribute("href") && anchor.getAttribute("class") == "external") {
			anchor.onclick = function(event){return newWindow(this, event);}
			anchor.onkeypress = function(event){return newWindow(this, event);}
		}
	}
}
function newWindow(anchor, event){
	var keyCode;
	if (event && event.type == 'keypress') {
		if (event.keyCode)
		keyCode = event.keyCode;
		else if (event.which)
		keyCode = event.which;
		// 13 == Return key. 32 == space key
		if (keyCode != 13 && keyCode != 32)
		return true;
	}
	return !window.open(anchor);
}
window.onload = externalLinks;

上記 javascript を「externalLink.js」と名前をつけて保存。
以下の 1 行を HTML の header 内に書く。

<script type="text/javascript" src="/path/externalLink.js">

上記の方法は onload を最後の 1 行に書いています。
onload イベントは 1 ページに 1 回しか使えないため、もし onload を他のスクリプト（ Litebox など）で使用している場合、この記述方法では実装できません。
そんな方は b ) prototype.js を利用する場合、のほうを使ってください。

b ) prototype.js を利用する場合の javascript

function externalLinks() {
	if (! document.getElementsByTagName ) return;
	var anchors = document.getElementsByTagName("a");
	for (var i=0; i</anchors><anchors .length; i++) {
		var anchor = anchors[i];
		if (anchor.getAttribute("href") && anchor.getAttribute("class") == "external") {
			anchor.onclick = function(event){return newWindow(this, event);}
			anchor.onkeypress = function(event){return newWindow(this, event);}
		}
	}
}
function newWindow(anchor, event){
	var keyCode;
	if (event && event.type == 'keypress') {
		if (event.keyCode)
		keyCode = event.keyCode;
		else if (event.which)
		keyCode = event.which;
		// 13 == Return key. 32 == space key
		if (keyCode != 13 && keyCode != 32)
		return true;
	}
	return !window.open(anchor);
}
Event.observe(window,'load', externalLinks, false);

上記 javascript を「externalLink.js」と名前をつけて保存。
以下の 2 行を HTML の header 内に書く。

<script type="text/javascript" src="/path/prototype.js">
<script type="text/javascript" src="/path/externalLink.js"></script>

javascript の最後の 1 行、`Event.observe(window,’load’, externalLinks, false);` は prototype.js を利用しています。
onload で読み込むものが他にある場合は、こちらの javascript を利用してください。

prototype.js も読み込む必要がありますが、よく使われているため「すでに prototype 使ってるよ」という方もいると思います。
その場合は再度読み込ませなくても OK ですので、externalLink.js を読み込ませる分だけ追記してください。

2. CSS

WP の使用しているテーマの style.css に以下の CSS を追記します。

/* for externalLink */
a.external {
	margin: 0 5px 0 3px;
}
a.external img {
	vertical-align: middle;
	border: none!important;
}

a.external の margin 設定は、画像の左右の余白設定です。
margin: 上 右 下 左;
という感じですので、余白を調整したい場合は変えたい場所の数字を変更してください。

a.external img のほうの設定は特に弄らなくて大丈夫だと思います。

3. XHTML

<a href="http://www.google.co.jp/" title="Google">Google</a>
<a href="http://www.google.co.jp/" title="[Google]を新しいウィンドウで開く" class="external">
<img src="http://hogehoge/hogehoge.gif" alt="[Google]を新しいウィンドウで開く" /></a>

このような形で書いています。画像のパスは自分で用意した画像ファイルのパスに適宜変更してください。
上では見やすくするために改行を入れてますが、実際には改行はなくて OK です。

アイコン探し参考：

いろいろな用途で使えるミニアイコンあれこれ – GIGAZINE

この方法の良い点

• Valid である。
• ページを新しいウィンドウで開くか、そのままのウィンドウで開くか、この両方を提供できる。

この方法の悪い点

• リンク 1 つにつき 2 つ分のリンクを書くことになるので、ソースが長くなる。
• これに対応した HTML をその都度書くのが面倒。

この悪い点の 2 つめ、書くことが面倒なのが最大の問題点だと思っています。
そんなわけで、Firefox + CopyURL+ で簡単にタグを作れるようにしました。

CopyURL+ でこの方法用のタグを生成

CopyURL+ の使い方や細かい点は「
Numb. – 「Copy URL+」+「MozShot」」という記事に書いたので、こちらを参考になさってください。

Copy URL+ 用 user.js

user_pref('copyurlplus.menus.n.label','Create URL&Title/externalLink');
user_pref('copyurlplus.menus.n.copy','<a href="%URL%" title="%TITLE%">%TITLE%</a><a href="%URL%" title="[%TITLE%]を新しいウィンドウで開く" class="external"><img src="http://hogehoge/hogehoge.gif" alt="[%TITLE%]を新しいウィンドウで開く" /></a>
');

※user_pref(‘copyurlplus.menus.n.・・・の、n の部分は user.js 内でかぶらないように数字をつけます。
これのみなら 1 、他にすでに 1～3 まで使ってあるなら 4 、というかんじに。

※http://hogehoge/hogehoge.gif は自分の用意した画像ファイルのパスに置き換えてください。

以上です。もしよろしければお試しください :grin:

07/07/30 追記
javascript で新しいウィンドウを開くためのアイコンを自動で追加する方法に現在は至りました。
リンクに、新しいウィンドウで開くためのアイコンを自動で追加(Wpプラグイン) – Numb.

こちらで紹介されていた Bookmarklet をよく使っています。
Bookmarklet とは、ブックマークに入れて使う javascript です。
リンクの上で右クリックをしてお気に入りに登録すれば OK です。

閲覧補助 > CSS ON⇔OFF
これをブックマークに入れておくと、制作時にものすごい便利でした。
作者様、ありがとうございます・・！

CSS ON⇔OFF
このリンクをブックマークに登録すれば OK。リンクバーにドラッグアンドドロップでもいけます。

それにしても1ヶ月更新になってしまった。
最近は仕事に趣味にと忙しい毎日なのであります。

• 先日の javascript では、結局 _blank を後付けで指定しているので、よくないのかも。
• そもそも _blank が推奨されなくなったのは、ユーザーがウィンドウを開くかどうかは決めることであり、サイトの運営者が決めることではない。ということから、らしい。それに沿ってないんじゃないか。

丁度同じようなことを取り上げている方のブログを見つけました。

hori-uchi.com: _blankを使わないで別ウィンドウを開くにはrel=”external”を使うのが美しいと思う。

コメント部分含め、参考にさせていただきつつ整理。

問題点、注意点

• rel 属性は XHTML1.0 Transitional では OK 。 HTML4.0 では rel に指定できる値が決まっている。rel を使うのならば、XHTML1.0 Transitional で書いておくと良さそう。
• javascript を用いるとしても、 _blank 指定を後からつけるのでは根本的な解決に至らないので、やはり window.open を使うほうがよい。その場合、javascript がオフであっても困らない対策も必要。
• いずれ、rel を使用しないでおくようにしなければならないのなら、いっそ class で指定しちゃうのもアリ

良さそうな手法

問題点、注意点を考慮して考えてみると、理想はこんな感じでしょうか。

• 元のリンクはそのウィンドウに開く形態にしておきつつ新規ウィンドウを開きたい人のためになんらかのアイコンなどで新規ウィンドウを開く方法も同時に作っておく。
  その際 _blank を付け足すのではなく、 window.open を使用する形で。
  ※これの欠点は、同じリンクを 2 回記述することになるのでソースが伸びてしまうこと。
• ユーザーが新規ウィンドウで開くかどうか決められるように javascript で細工をつくり、チェックボックスにチェックをつけた場合には新規ウィンドウを開かない、なんてのも良いかも。
• javascript で開くようにする場合にも、href に URL を指定する。
  ( この場合、元のウィンドウが一緒にページが変わってしまわないよう、ちょっとしたポイントがある。)
  これによって javascript がオフの環境でリンク先に行けないなどということが起きなくなる。

理想にちょっとでも近づくべく、[hori-uchi.com: _blankを使わないで別ウィンドウを開くにはrel="external"を使うのが美しいと思う。 の hori-uchi さんのコードを少し改造させていだいて使うことにしました。元のソースの詳細は、上記サイトで確認していただくとして改造したところを書いておきます。

元のコード▼

function externalLinks() {
if (! document.getElementsByTagName ) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute("href") && anchor.getAttribute("rel") == "external") {
anchor.onclick = function(event){return popupWindow(this, event);}
anchor.onkeypress = function(event){return popupWindow(this, event);}
}
}
}

function popupWindow(anchor, event){
var keyCode;
if (event && event.type == ‘keypress’) {
if (event.keyCode)
keyCode = event.keyCode;
else if (event.which)
keyCode = event.which;
// 13 == Return key. 32 == space key
if (keyCode != 13 && keyCode != 32)
return true;
}
return !window.open(anchor);
}
Event.observe(window,’load’, externalLinks, false);

もし class="externalLink" と class に指定するならば、
6 行目の rel を class に変更します。
rel 属性を使って指定するのであれば、そのままで OK です。

26 行目の
Event.observe(window,'load', externalLinks, false); を、
window.onload = external; に変更。

変更したものが、こちら。▼

function externalLinks() {
if (! document.getElementsByTagName ) return;
var anchors = document.getElementsByTagName("a");
for (var i=0; i<anchors.length; i++) {
var anchor = anchors[i];
if (anchor.getAttribute("href") && anchor.getAttribute("class") == "external") {
anchor.onclick = function(event){return popupWindow(this, event);}
anchor.onkeypress = function(event){return popupWindow(this, event);}
}
}
}

function popupWindow(anchor, event){
var keyCode;
if (event && event.type == 'keypress') {
if (event.keyCode)
keyCode = event.keyCode;
else if (event.which)
keyCode = event.which;
// 13 == Return key. 32 == space key
if (keyCode != 13 && keyCode != 32)
return true;
}
return !window.open(anchor);
}
window.onload = externalLinks;

こういうのが理想かな？

Numb.

こんな感じに、「このウィンドウに開く」、「新しいウィンドウに開く」でリンクを 2 つ書くのが本当はいいんじゃないかな～。でも、ちょっと骨が折れますね :roll:
WP-AddQuicktag
で登録しちゃえば、多少が作業量が軽減される、かも？

私は当面は、XHTML1.0 Transitional を使いながら rel 属性を使って、 javascript でwindow.open を使うようにしてみようかな～と思います。
両方書くのは、続けられる自信が…

もし 2 つリンクを書くようにするならば、こんな感じのものをボタンに登録するつもりです。
<a href="" class="externalLink"><img src="open.gif" alt="新しいウィンドウを開きます" title="新しいウィンドウを開きます" /></a>

2 つ書く場合 Markdown を使うと、下記のように書くことになりそうです。ううーむ。
やっぱりちょっと、お手軽さが減っちゃいますね～。

[Link](http://xxx.com/)
[](http://xxx.com/" rel="external)