▲こんな画像クリックすると
背景黒くなってびろーんと伸びるこんなの。
なんか未来的でかっこいい表示するブログを見つけまして
どうするんだとソースを見てみたら「Lightbox」なんてものを知りまして。
いろいろ調べてみるとこのLightbox、作者が様々のようです。
そこで「
Lightbox2」を導入してみた！
備忘録もかねて忍者ブログでやるための導入方法も書いてみます('ω')ゝ
まずダウンロードしたら圧縮フォルダなので解凍。
すると中身が
css
images
js
index.html
となっているので
まず「
images」フォルダの中身を「
image-1.jpg」、「
thumb-1.jpg」
以外全てブログ設定のファイルアップロードにあげときます。
次に「
js」フォルダの中の「
Lightbox.js」をメモ帳かなんかで開いて
こういう行を赤字で書き換えます
Configurationl
//
LightboxOptions = Object.extend({
fileLoadingImage: '
http://file.（自分のブログのURL《http://を消して貼る》）/loading.gif',
fileBottomNavCloseImage: '
http://file.（自分のブログのURL《http://を消して貼る》）/closelabel.gif',
overlayOpacity: 0.8,
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
<a href="#" id="loadingLink">
// <img src="
http://file.（自分のブログのURL《http://を消して貼る》）/loading.gif">
// </a>
～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～
<a href="#" id="bottomNavClose">
// <img src="
http://file.（自分のブログのURL《http://を消して貼る》）/close.gif">
// </a>
これで「
Lightbox.js」の編集は終わり。
あとは「
js」フォルダの中身の「
.js」ついてるのをぜんぶブログ設定のアップロードにあげときます。
もひとつ「
css」フォルダの「
lightbox.css」をアップロード。
次にブログ設定の「テンプレート設定/編集」で
<head>と</head>の間にﾃｷﾄｰに改行して
<link rel="stylesheet" href="http://file.（自分のブログのURL《http://を消して貼る》）/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://file.（自分のブログのURL《http://を消して貼る》）/prototype.js">
</script>
<script type="text/javascript" src="http://file.（自分のブログのURL《http://を消して貼る》）/scriptaculous.js?load=effects,builder">
</script>
<script type="text/javascript" src="http://file.（自分のブログのURL《http://を消して貼る》）/lightbox.js"></script>
この赤字全部を追記。
これで設定は終わり。
あとは記事を書くときに画像をはっつけるんですが
あらかた書いたあと「簡素版のエディタ」で
<a href="画像のアドレス"
rel="lightbox" target="_blank">
という風に
rel="lightbox"を追記するだけでこーなります。
これで人気ブログの仲間入りやで！（それはない）
忍者ブログ以外だったら赤字の書き換えを工夫する必要ありそーです。
[1回]
