なげやりろぐ

ﾌﾃｲｷｺｳｼﾝ

　はてなダイアリーでLightbox風味な表示を

Weblog::ブログ



←クリックするとソレっぽい表示になります♪

Lightboxがはやりだした頃、はてなダイアリーでもなんとか出来ないものかと思ったりしたものでしたが、はてなでは基本的に許可されたスクリプトしか使えない仕様ですし、外部の鯖に置いたスクリプトを呼び出して使うといったようなことも出来ませんでした。
当時はしょうがないので試して見たいことは自鯖に置いたブログで色々と遊んでみたりとかして欲求を満たしていました･･･（笑）
他の自由なブログサービスに移れば良いんでしょうけどワリとはてなは居心地が良いので♪


今日、たまたま某つぶやき処でフォローさせて戴いている方が、CSSでLightbox風味なことを実現できるというサイトのアドレスを貼ってくださっていたのでコレはもしやはてダでもつかえるんジャマイカとおもい、色々試行錯誤しつつようやくそれらしくなったというワケです。

ちなみにそのサイトはコチラ

特にコードの表示や利用法を紹介してくれているわけではありませんが、ソースを見れば一目瞭然。
それなりにサイト制作やWebページ用スクリプトなどを書かれている方ならすぐに理解できるようなワリと簡単なものです♪

とはいえ、こういったものはまさにアイディア勝負というかこんな単純なことでこんなことが出来ちゃうんだという良いお手本を見たような気がしますね。*1

以下はここにあわせてちょっと手を入れたCSSソースですが、プレーンに近いテーマを使用されている方ならオリジナルサイトのソースそのままでいけるんじゃないかとおもいます。

/********************/
/***** Lightbox *****/
/********************/

#container {
	height:100%; 
	width:100%;
	}

.lightbox {
	position:absolute; 
	left:-9999px; 
	top:-100px; 
	cursor:default; 
	z-index:100;
	}
	
.light {
	position:absolute; 
	left:0; top:0;
	}
	
.box {
	position:absolute; 
	left:0; top:0;
	}

/* trigger for IE6 */
a:active {
	background:#ddd;
	}

a:active .lightbox,
a:focus .lightbox {
	left:-350px; 

	width:1500px; 
	height:3000px;
	}

a:active .lightbox .light,
a:focus .lightbox .light {
	background:#000; 
	width:100%; 
	height:100%; 
	filter: alpha(opacity=85);
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=85); 
	opacity:0.85;
}

a:active .lightbox .box,
a:focus .lightbox .box {
	width:100%; 
	text-align:center; 
	margin-top:150px;
	}

a:active .lightbox .box img,
a:focus .lightbox .box img {
	border:1px solid #aaa; 
	margin:0 auto;
	}

a:active .lightbox .box h2,
a:focus .lightbox .box h2 {
	font-size:11px; 
	font-weight:normal; 
	width:400px;
	background: #191919 none; 
	padding:3px; 
	margin:10px auto; 
	text-align:center; 
	text-decoration:none; 
	color:#999;
	}
	
a:active .lightbox .box h2 b,
a:focus .lightbox .box h2 b {
	font-weight:bold; 
	color:#000;
	}

#close { /*** 閉じるボタンが必要なときだけ ***/
	width:16px; 
	height:16px; 
	background:url(trees/close.gif); 
	position:relative; 
	z-index:500; 
	float:right; 
	display:inline; 
	margin-right:10px;
	}
	
.clear {
	clear:left;
	}

</style>

<!--[if lte IE 6]>
<style type="text/css">
a:active .lightbox .light {
	width:expression(document.getElementById('container').offsetWidth);
	height:expression(document.getElementById('container').offsetHeight);
	}
	
a:active .lightbox .box {
	width:expression(document.getElementById('container').offsetWidth);
	height:expression(document.getElementById('container').offsetHeight);
	}

</style>
<![endif]-->

以上のCSSをデザインの変更画面からCSSの所に追記して、実際に表示させるときはLightbox風味に表示させるためのオリジナル画像とエントリーに表示するサムネイル画像を用意して適当なサーバへアップしたのちにエントリー本文へ以下のように記述します。

<div id="container">
<a href="#url">
<img src="サムネイル画像へのuriを記述" alt="代替テキストを記述" />
<div class="lightbox">
	<div class="light"></div>
	<div class="box"><img src="オリジナル画像へのuriを記述" alt="代替テキストを記述" />
		<h2>必要なら画像の説明文を記述</h2>
	</div>
</div>
</a>
</div>

あ、ちなみにWebKitを利用したブラウザでは上手く表示されませんのであしからず･･･

*1:もっとも各種ブラウザにあわせた透過指定や旧版ブラウザ対応などはそれなりの経験がないとすぐには応用が利きませんけどね。