
ずっとほったらかしのままになっていたサイトの「Gallery」ページを作り直しました!
数年前から色んなサイトで見かける、サムネールをクリックすると、ふわっとした感じで画像が表示されるタイプにしたかったのですね。
どうやるんだろう?と調べてみたところ、「Lightbox」というものを発見。
htmlの知識がちょこっとだけ必要ですが、それを利用して簡単に作ることが出来ましたヨ。
Lightboxのダウンロード↓
http://lokeshdhakar.com/projects/lightbox2/Lightboxの説明↓
http://journal.mycom.co.jp/articles/2007/06/14/lightbox/index.html僕のサイトでは、nextボタンとprevボタンの位置を「lightbox.css」で変更、背景の透過濃度を「lightbox.js」で変更したくらいで、あとは初期設定のままなのですが、困ったことが1つ。
普段使用しているMacの「safari」ではなく、一応、確認のためWindowsの「Internet Explorer」で見てみたところ、表示される画像の位置が変になってしまうのですね。
「Internet Explorer」以外のブラウザではちゃんと表示される状態で、とりあえず、初期設定のままの「Lightbox」を使用しても症状は同じです。
調べてみたところ、「Internet Explorer」での「Lightbox」の使用には、「DOCTYPE宣言」をしなければいけないようなのですね。
htmlソースの1行目に下記の文字を入れたところ、ちゃんと表示されるようになりました!
↓これをhtmlの1行目に。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />ただ、「DOCTYPE宣言」をすると、何も指定していない場合、文字や画像は中央配置がデフォルトのようです。
(通常のhtmlでは、何も指定をしない場合、左側に表示されます)
左側に配置される文字や画像は位置指定をしていなかったので、全部、左側指定をするはめになりましたヨ。
あ、ここらへんは、サイト作成ソフトを使用している方は心配ないですかね?
というわけで、お時間がありましたら見て下さいね!
http://www.m-universe.net/gallery01.html