エキサイトブログ (Exblog) のプチカスタマイズ #5

追記：2008.9.14
Exblogの投稿内にアップロードした画像がなぜか消失していました。自分で削除しちゃったのかな？。。。もしかしてやってはいけないカスタマイズ？いちおう復活させましたがもう一回消失したら御法度カスタマイズなのかもしれません。
あとポップアップ画像から拾ったURLの一部がエンティティ化されているのでそれも通常の文字に打ち変えて使いました（下段に追記してあります）

今回はサムネイル画像（小さい画像） の上にマウスカーソルを持って行くとクリックしなくても画像が拡大表示されるカスタマイズです。
これは プチカスタマイズ #4 よりも簡単です。
← 象の上にマウスカーソルを持って行くと拡大されます。
これと同じものをエキサイトブログ(Exblog) の投稿内に載せた写真に適用させるにはどうしたらよいのでしょうか。

Exblog のDemo 投稿

オンマウスで画像を拡大表示させるカスタマイズ（方法）

1. CSS（スタイルシート）の最後に以下の記述を貼り付ける

a.pic-enlarge {
	display: block;
	float: left;
	margin: 0 7px 0 0;
}
a.pic-enlarge img{
	position: absolute;
}
a.pic-enlarge,
a.pic-enlarge img{
	width: 100px;
	height: 100px;
}
a.pic-enlarge:hover {
	border: 0;
	cursor: auto;
}
a.pic-enlarge:hover img {
	width: auto;
	height: auto;
}

pic-enlarge という記述は別の文字列にしても構いません。ただしすでにCSSで使われているものとかぶってはいけません。ここではかぶりそうにない文字列を使いました。仮に違う文字列を使った場合は手順2. のpic-enlarge のところも修正する必要があります。

2. 投稿本文中に画像を挿入する際は以下のように記述する

<a href="画像のURL" class="pic-enlarge" title="画像名（画像のタイトル）"><img src="画像のURL" title="画像名（画像のタイトル）" width="100" height="100" /></a>

3. 画像のURL を知るには

いつもやっているように画像をアップロードしたあとで [アップロード済み] のリンクをクリック。

アップロードした画像がポップアップウィンドウに表示されるのでポップアップした画像上で右クリックし、（IE6 & IE7 の場合は）コンテキストメニューの一番下にある [プロパティ] をクリック。プロパティのウィンドウが開くのでアドレス（URL） に表示されている文字列をコピー。
Firefox はポップアップした画像上で右クリックしコンテキストメニューの [画像のURLをコピー] をクリックするだけでURLがクリップボードにコピーされます。

追記：画像のURLが一部エンティティ化されているのでスラッシュ、アンダーバー、ドットを通常の文字にかえてURLとしました。

（例）エンティティ化されたURL

http://pds.exblog.jp/pds/1/200809%2F14%2F12%2Fe0131412%5F19265897%2Ejpg

（例）通常の文字列に打ち変え

http://pds.exblog.jp/pds/1/200809/14/12/e0131412_19265897.jpg

• %2F → / （スラッシュ）
• %5F → _ （アンダーバー）
• %2E → . （ドット）

具体的にはこのような変換になります。

といったように、比較的簡単に導入できます。。。ん ❓ そうでもないかっ