TopLightbox JS > Litebox 1.0 をブログに適用する
2006年7月 7日

Litebox 1.0 をブログに適用する

Posted at July 7,2006 1:35 AM
Category:[Lightbox JS]
Tag:[, ]

Lightbox JS v2.0 の後継版、Litebox が出ていました。ということで v2.0 はエントリーし損ないましたが、今回は Litebox をブログに適用するカスタマイズを紹介します。

Lightbox の時代からそうなのですが、このツールは画像を表示するページのパスが変化した場合のケースまで考慮されていません。つまりブログではインデックスページや各アーカイブページのパスがそれぞれ異なることため、提供されているファイルに対し、各ページから同様の振る舞いをさせるための修正が必要になります。

下記に修正を施したサンプルを作りました。トップページと、そこからリンクされている記事ページでも動作するようになっています。

Litebox のブログ適用サンプル

サンプルでは Movable Type を利用していますが、他のブログでもカスタマイズのタグ部分を適宜読み替えて頂ければ適用可能と思われます。また Movable Type についてはテンプレート機能を利用した方法も併せて紹介しています。

注:ページ内に U2B Player を設定していると litebox は動作しませんのでご注意ください。 → 不具合解消されています(参考:U2B Playerに新機能「Link2B」追加)。

画像表示方法

カスタマイズの前に、記事に画像を設定する方法を説明しておきます。
すでにご存知と思われますが、Lightbox 同様、a 属性に青色 *1 で示す rel="lightbox" を設定します。

<a href="http://domain/path/to/images/hogehoge.jpg" rel="lightbox"><img src="http://domainpath/to/images/hogehoge_thumb.jpg" /></a>

グループ化する場合は rel 属性値に "[]" を付与します。

<a href="http://domain/path/to/images/hogehoge1.jpg" rel="lightbox[example]"><img src="http://domainpath/to/images/hogehoge1_thumb.jpg" /></a>
<a href="http://domain/path/to/images/hogehoge2.jpg" rel="lightbox[example]"><img src="http://domainpath/to/images/hogehoge2_thumb.jpg" /></a>
<a href="http://domain/path/to/images/hogehoge3.jpg" rel="lightbox[example]"><img src="http://domainpath/to/images/hogehoge3_thumb.jpg" /></a>

"[]" 内の文字列が同じものについては画像に前後リンクが付与されて連続で開くことができます。

また、rel 属性を自動付与するカスタマイズも色々出回っているようですので、適用できるかもしれません。

1.アーカイブのダウンロード

Litebox のサイト後方にある Download の litebox-1.0.zip のリンクをクリックしてダウンロードします。

ダウンロードアーカイブを解凍して、その中から下記のファイルを利用します。

litebox-1.0/css/lightbox.css
litebox-1.0/images/blank.gif
litebox-1.0/images/closelabel.gif
litebox-1.0/images/loading.gif
litebox-1.0/images/nextlabel.gif
litebox-1.0/images/prevlabel.gif
litebox-1.0/js/litebox-1.0.js
litebox-1.0/js/moo.fx.js
litebox-1.0/js/prototype.lite.js

その他のファイルや画像はサンプル用ですので不要です。

以下、Movable Type のテンプレート機能を利用する方法と、利用しない方法に分けて説明します。Movable Type 以外のブログの場合はテンプレート機能を利用しない方を参考にしてください。

2.ファイルの修正

2.1 テンプレート機能を利用しない場合

SereneBach や FC2ブログ等はこちらの解説を参考にしてください。

2.1.1 lightbox.css の修正

lightbox.css にある下記の赤色部分(3ヶ所)

#prevLink, #nextLink{
    width: 49%;
    height: 100%;
    background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
    display: block;
    }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#prevLink, #nextLink{
    width: 49%;
    height: 100%;
    background: transparent url(http://domain/path/to/images/blank.gif) no-repeat; /* Trick IE into showing hover */
    display: block;
    }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(http://domain/path/to/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://domain/path/to/images/nextlabel.gif) right 15% no-repeat; }

と、ご自身のブログのURLに修正します。

2.1.2 litebox-1.0.js の修正

litebox-1.0.js の下記の部分に、青色で示した「ドキュメントルートからのパス」を設定します。

//
//    Configuration
//
var fileLoadingImage = "/path/to/images/loading.gif";
var fileBottomNavCloseImage = "/path/to/images/closelabel.gif";

2.2 テンプレート機能を利用する場合

ファイルを修正する際にMTタグを利用し、そのファイルをテンプレートとして登録することで修正箇所を自動変換します。テンプレートに登録するのは修正する2ファイルのみです。

2.2.1 lightbox.css の修正

lightbox.css にある下記の赤色部分

#prevLink, #nextLink{
    width: 49%;
    height: 100%;
    background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
    display: block;
    }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#prevLink, #nextLink{
    width: 49%;
    height: 100%;
    background: transparent url(<$MTBlogURL$>images/blank.gif) no-repeat; /* Trick IE into showing hover */
    display: block;
    }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(<$MTBlogURL$>images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(<$MTBlogURL$>images/nextlabel.gif) right 15% no-repeat; }

に修正します。
そしてこのファイルをインデックステンプレートとして登録します。

方法は管理メニューの「テンプレート」→右上「テンプレートを新規作成」をクリックして、次のページで下記のように設定してください。

テンプレート名:lightbox用CSS(何でもいいです)
出力ファイル名:lightbox.css
このテンプレートにリンクするファイル:(設定不要)
再構築オプション:チェックを外す
テンプレートの内容:lightbox.css の中身を丸ごとコピー

設定が完了したら保存・再構築してください。

2.2.2 lightbox-1.0.js の修正

lightbox.css の下記の部分に、青色で示したMTタグを設定します。

//
//    Configuration
//
var fileLoadingImage = "<$MTBlogRelativeURL$>images/loading.gif";
var fileBottomNavCloseImage = "<$MTBlogRelativeURL$>images/closelabel.gif";

そしてこのファイルもインデックステンプレートとして登録します。

方法は管理メニューの「テンプレート」→右上「テンプレートを新規作成」をクリックして、次のページで下記のように設定してください。

テンプレート名:lightbox用JS(何でもいいです)
出力ファイル名:litebox-1.0.js
このテンプレートにリンクするファイル:(設定不要)
再構築オプション:チェックを外す
テンプレートの内容:litebox-1.0.js の中身を丸ごとコピー

設定が完了したら保存・再構築してください。

3.ファイルのアップロード

index.html があるディレクトリに

css/lightbox.css
images/blank.gif
images/closelabel.gif
images/loading.gif
images/nextlabel.gif
images/prevlabel.gif
js/litebox-1.0.js
js/moo.fx.js
js/prototype.lite.js

という構成になるようにアップロードします。2.2項のテンプレート機能を利用する場合は、lightbox.css と litebox-1.0.js のアップロードは行わないでください。
またブログサービスの制約等で、この構成でアップロードできない場合、ファイルを同じディレクトリにアップロードして、4項の src 属性を適宜修正してください。

4.テンプレートの修正(head 部分)

メインページ/カテゴリー・アーカイブ/日付アーカイブ/エントリー・アーカイブの <head>~</head> の間の任意の行に下記を追加します。

Movable Type でテンプレート機能を利用しない場合

<link rel="stylesheet" href="<$MTBlogURL$>css/lightbox.css" type="text/css" media="screen" />
             :
            (略)
             :
<script type="text/javascript" src="<$MTBlogURL$>js/prototype.lite.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>js/moo.fx.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>js/litebox-1.0.js"></script>

Movable Type でテンプレート機能を利用する場合

<link rel="stylesheet" href="<$MTBlogURL$>lightbox.css" type="text/css" media="screen" />
             :
            (略)
             :
<script type="text/javascript" src="<$MTBlogURL$>js/prototype.lite.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>js/moo.fx.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>litebox-1.0.js"></script>

その他のテンプレートで利用する場合

<link rel="stylesheet" href="http://domain/path/to/css/lightbox.css" type="text/css" media="screen" />
             :
            (略)
             :
<script type="text/javascript" src="http://domain/path/to/js/prototype.lite.js"></script>
<script type="text/javascript" src="http://domain/path/to/js/moo.fx.js"></script>
<script type="text/javascript" src="http://domain/path/to/litebox-1.0.js"></script>

5.テンプレートの修正(スクリプト起動の追加)

5.1 メインページ/カテゴリー・アーカイブ/日付アーカイブ/その他のブログ

body 要素に青色の onload 属性を追加します。

<body class="layout-two-column-right main-index" onload="initLightbox()">

5.2 エントリー・アーカイブ(Movable Type のみ)

body 要素に、すでに onload 属性が存在する場合の記述方法です。ここでは2通りの方法を紹介します。

ひとつめは、body 要素の onload 属性に追加する方法です。

<body class="layout-two-column-right individual-entry-archive" onload="individualArchivesOnLoad(commenter_name);initLightbox();">

もうひとつは </body> の直前に追加する方法です。

<script type="text/javascript">
<!--
initLightbox();
//-->
</script>
</body>

2006.07.11 追記
2.1.2項の記述が誤っていたため修正しました。

2006.10.12 追記
4項の記述を修正しました。

2006.10.25 追記
U2B Player について追記しました。

2007.04.15 追記
U2B Player の不具合解消について追記しました。


*1:色覚障害等で色が識別できない場合は、サイト右上の「Styles」メニューにある Gray Scale をクリックしてください。IEではグレースケール表示され、青色部分が下線表示、赤色部分が二重下線で表示されます。Firefox/Opera ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。

Posted by yujiro
関連記事
人気エントリー
トラックバックURL


トラックバック

#310 - Lightboxメモ from Fivestar
ほっとくと忘れそうなのでメモしておこう。 ROSS : 『Lightbox JS... [続きを読む]

Tracked on July 9, 2006 1:17 PM

ライトボックステスト from テンプレートテスト用
 いつもお世話になっている小粋空間さんで紹介されていたライトボックスを試してみた... [続きを読む]

Tracked on July 10, 2006 7:53 AM

lightboxがLiteboxに! from eternalheart.com
小粋空間さんでLitebox 1.0 をブログに適用するという記事を見ました。 ... [続きを読む]

Tracked on July 10, 2006 12:49 PM

隠居の庭:ヤブカンゾウ by Litebox-1.0.js from Atelier Shuhei Weblog
 ヤブカンゾウはニッコウキスゲの仲間らしいが、花びらがくしゃくしゃなのが特徴らし... [続きを読む]

Tracked on July 11, 2006 5:54 AM

JavaScriptでオーバーレイ:Litebox from クリエイター日記
オーバーレイ エフェクトを実行するJavaScriptライブラリ:Litebox... [続きを読む]

Tracked on July 17, 2006 9:31 PM

litebox-1.0 from RingoLife
アクセスカウンター&アクセス解析は設置した。 でもってまずはLightbox J... [続きを読む]

Tracked on July 30, 2006 6:56 AM

Lightbox JSをブログ(MT)で利用する from WebRoom
リッチなフォトアルバム機能のJavaScriptライブラリ『Lightbox ... [続きを読む]

Tracked on August 8, 2006 1:20 PM

テスト画像です。 Liteboxでオーバーレイ効果。 from ドングリ王国 へっぽこ2人旅
Liteboxを使って、オーバーレイ効果を作りました。 [続きを読む]

Tracked on August 17, 2006 9:38 PM

lightboxがLiteboxに! from eternalheart.com
小粋空間さんでLitebox 1.0 をブログに適用するという記事を見ました。 ... [続きを読む]

Tracked on October 3, 2006 6:58 PM

カスタマイズいろいろ from abnlog
あたらしく作り直したこのブログにちょっと手を加えました。 カイ氏伝: Movab... [続きを読む]

Tracked on October 10, 2006 6:03 PM

Lightbox→Litebox from rea@戯画
画像をクリックするとうにょんってなって、 周り暗くなってウインドウ真ん中にライト... [続きを読む]

Tracked on October 13, 2006 11:09 AM

LightBox from kisatonomori blog
いつ機能を入れたのかわかるようにメモ そんなに使わないかもしれないんだけど かっこいいので こちらを参考に私もLightBox入れてみました ... [続きを読む]

Tracked on October 18, 2006 8:21 PM

ポラロイド風画像表示「Litebox」 from gerenuk.crazyphoto.org/
class="flt_l" /> 最近よく見るサイトでカッコいい画像表示がさ... [続きを読む]

Tracked on October 18, 2006 9:08 PM

画像のサムネイル表示 from
写真サイトってわけではないので、画像表示に関しては比較的 無頓着だった。この2カラムのテンプレートにする前は、横幅700pxの1カラムのテンプレートを使っ... [続きを読む]

Tracked on October 20, 2006 8:25 AM

便利さとは? from †GMS社長|梶原吉広の決意|日本で五番目にネットを熱く語る!
最近海外では、とくにJavaScript、AJAXを使ったサイトが多い。今、ヤフーもマイクロソフトも、googleもどこもMYホームページに走っていて、A... [続きを読む]

Tracked on October 24, 2006 4:26 AM

Litebox 1.0を導入 from CEFA::Blog
3ヶ月以上遅れてLitebox 1.0を導入しました。Lightbox 2.0より格段に導入しやすくなっている感じがします。 [続きを読む]

Tracked on November 3, 2006 10:05 AM

ブログにLiteboxを導入 from 暇人STRのブログ
これまでブログに小粋空間さんで紹介されているLightboxJSを導入していましたが、同じ小粋空間さんの「Litebox... [続きを読む]

Tracked on November 12, 2006 10:01 PM

Litebox1.0でサムネイル表示 from HAPPY TALK ?
サムネイル表示は好きじゃないんですけど(サムネイルが小さいとパッと見でわからないし、 クリック→別窓になるのが面倒)、素敵なスクリプトを知ったのでカスタ... [続きを読む]

Tracked on November 21, 2006 11:58 AM

Litebox 1.0 をブログに適用しましたよっと。 from QUELTIDE
プリアがやって来た ヤァ!ヤァ!ヤァ!でたくさん写真撮ったので、ついでやしLi... [続きを読む]

Tracked on November 22, 2006 8:44 AM

Flickrを利用してMTでフォトログを作る from Walkin' On The Spiral
 1カラムのデザインにして気になっていたことがひとつ。本文にある程度の長さが無いと、レイアウト的にすごく見栄えが悪くなってしまう。記事を2つ3つ表示させれ... [続きを読む]

Tracked on November 24, 2006 9:29 PM

サムネイルをLiteboxで表示♪ from VanillaCream**BLOG
前から気になっていたLiteboxをとうとう入れました?これで通常の画像が同じ画面に表示されるので表示がスッキリするはず♪小粋空間 | Litebox 1... [続きを読む]

Tracked on December 12, 2006 10:10 AM

FireFoxもクリスマス気分 from showry's Blog
普段使用しているWebブラウザは、FireFoxを使っています。 アドオンと呼ぶ... [続きを読む]

Tracked on December 13, 2006 10:22 PM

Lightbox系オーバーレイ表示をしてくれるThickboxを導入、の巻 from ブランドって何だぁ?
いやぁ?、これでプリント広告やら屋外広 [続きを読む]

Tracked on December 30, 2006 10:20 PM

litebox 写真をカッコよく表示 from Memo for a Moment
lightbox2.0の軽量版にあたるliteboxを導入してみた。 つまづきそうな所は、、、 link,scriptタグのsrcを書き換えl... [続きを読む]

Tracked on January 3, 2007 10:44 AM

ニューブログ、発進します from さえらのバルビレ日記
テンプレートと カウンター画像は バルビレッジch. さんで DLさせていただきました。 また、エントリ内の画像を お洒落に表示してくれる スクリプ... [続きを読む]

Tracked on January 7, 2007 7:56 AM

Lightbox JS v2.0を使ってみる from Using only Java Script for ALBUM - livedoor Wiki(ウィキ)
WikiでLightbox JS v2.0を使ってみる。実装手順の詳細を解説しています。 - Ujiki.oO - http://makoto3.co... [続きを読む]

Tracked on January 15, 2007 9:13 AM

weblogカスタマイズ2・小粋空間さんより from おかち日和
SereneBachでウェブログを新しく作るにあたり、たくさんの技をお借りしました。 [続きを読む]

Tracked on January 16, 2007 5:18 PM

気になる Lightbox JavaScript from Consultant's Story - Life Hacks - by Zero Cool
私は、デジカメを持ち歩かない、携帯電話は電話であってカメラではない、といった無理やりの理由から、本ブログでは、あまり画像が掲載されていません(って、相当無... [続きを読む]

Tracked on January 19, 2007 2:36 AM

FC2ブログでLiteboxを使う & rel属性なしでLiteboxを起動 from LIFE IS LIKE A GROCERY CART.
Liteboxを導入。Liteboxて何?という方は下のサムネイル画像をクリックしてみてください。映えるし動くし,たまりません。 ことの始ま... [続きを読む]

Tracked on January 20, 2007 3:21 PM

Litebox 1.0をFC2ブログで導入する方法 from StockWeb
最近ではSoftBankのサイトでも見かけるほど広まってきた"Litebox"。Liteboxとは?と思われた方は左のサムネイルの画像をクリックしてみて下... [続きを読む]

Tracked on January 24, 2007 12:48 AM

Litebox 1.0を適用してみました。 from Imagine*JucuL
大分前(昨年半ばぐらい?)から、Movable Type仕様のブログを覗いた時に見かけた、記事本文中にあるサムネイル画像をクリックすると新しいウインドウを... [続きを読む]

Tracked on March 3, 2007 1:21 AM

Liteboxを導入してみました。 from どりぱけ。
暇だからこのブログの情報調べてみた。 で紹介したaguseというサイト。http://www.aguse.net/ ここでサイトの検索するとサイ... [続きを読む]

Tracked on March 22, 2007 9:29 PM

MT-SPA(外)とLightBox(画)をつかう  from Digital Evidence
「小粋空間」さんでLightBoxを導入する方法があったのでやってみました。 だ... [続きを読む]

Tracked on March 24, 2007 5:33 PM

LiteBox 1.0 from Jay's Room
LiteBox 1.0 を導入した。 画像を表示するときにスタイリッシュに表示し... [続きを読む]

Tracked on March 26, 2007 11:51 AM

カスタマイズメモ from PETIT TRESOR
以前から気になっていた、Liteboxの設置に挑戦。 小粋空間さん(click!)の記事を参考にさせて頂きました。 忘れないように、メモしてお... [続きを読む]

Tracked on April 11, 2007 10:27 PM

U2B Playerに新機能「Link2B」追加 from TEDDY-G本家
久々にU2B Playerに新機能を追加しました。その名も「Link2B」(リン [続きを読む]

Tracked on April 15, 2007 4:39 AM

Movable Typeに「Litebox」を導入する from サラリーマン白書
クールに写真を拡大表示させる「Litebox」を当ブログでも導入してみました(と言っても以前より導入済でこのエントリー自体が遅れてしまった訳ですが)。 ... [続きを読む]

Tracked on May 1, 2007 2:49 PM

こっそり機能追加。 from Yukix-Web
・Lightbox 1.0 画像をクリックすると、かっこよくポップアップして拡大... [続きを読む]

Tracked on May 4, 2007 3:54 AM

Liteboxを使えるようにしてみました from ti-web.net blog
画像をカッコ良く(?)表示させるツールLiteboxを使えるようにセットアップし... [続きを読む]

Tracked on May 25, 2007 9:08 PM

Litebox 1.0に変更 from 雨の日が好き
Lightbox JS v2.0のテストをしたのですが、Javascriptでエラーが出たのでLitebox 1.0に変更しました(^^; ■ファイルの... [続きを読む]

Tracked on June 3, 2007 9:10 PM

Tipsやらliteboxやら from Life with mybow -備忘録-
photoshopのいろんなtips集。GIGAZINEさんからの転載。 Photoshopは機能が多すぎて、なかなか使いこなせないでいる。 そして、い... [続きを読む]

Tracked on July 13, 2007 1:51 AM

サムネイル画像を格好良く拡大表示 from BLOG STAR
Lightbox2 ブログやホームページに貼り付けたサムネイル(縮小)画像を格好良く表示させたくありませんか?それを実現するソフトが上記リンク先にあ... [続きを読む]

Tracked on August 1, 2007 2:22 PM

liteboxを導入してみた。 - 同一画面内での画像ポップアップ from NOBODY:PLACE - MUTTER
クリックして画像がポップアップされるスクリプトが気になったので、 ほぼ日 - 気... [続きを読む]

Tracked on September 4, 2007 1:48 PM

greyboxも導入してみた。 - 同一画面内での画像/ページポップアップ from NOBODY:PLACE - MUTTER
と言うわけで、画像をポップアップできるスクリプト、 『litebox』を導入して... [続きを読む]

Tracked on September 4, 2007 1:48 PM

WordpressにLiteboxを取り入れてみた from TODOROKI
サムネイルをクリックすると、まわりが暗くなって拡大画像が浮かび上がる…そんな仕掛けがしてあるブログって結構ありますよね。 今回、うちでも取り入れてみること... [続きを読む]

Tracked on September 12, 2007 10:05 PM

Litebox from PEEKABOO
Liteboxを入れてみました。画像を表示するときに、ちょっとイカした感じにするスクリプトです。実は2ヶ月くらい前に、Lightbox Plusを入れてい... [続きを読む]

Tracked on October 24, 2007 12:37 AM

litebox導入 from 空ログ
かなり苦労しましたが、こんな感じです。。。。 これで空の写真もかっこよく見せれる... [続きを読む]

Tracked on October 27, 2007 2:54 PM

Lightbox:格好良く画像をオーバレイ from DIS is the BLOG
Lightbox2 ブログやホームページに貼り付けたサムネイルï... [続きを読む]

Tracked on December 24, 2007 12:44 AM

[web][plugin][css]Lightbox系ライブラリのまとめ from ebi's diary
Lightboxをかなり前にこのサイト導入していますがその際に若干不具合があった(ようにみえた)ので、自分なりに修正し、その内容を公開していました。 e... [続きを読む]

Tracked on December 29, 2007 6:38 PM

Litebox1.0 を採用してみました。 from こだるま日和
ぐーたら on WP の takaru さんに触発されました(笑 1個前のエン... [続きを読む]

Tracked on April 4, 2008 8:41 PM

LiteBox入れてみたものの・・・ from Element's:
Firefox・・・というか、Geckoエンジンでは動作するんだけど IEとかのトライデントエンジンでは動作せずにリンク先のファイルに移動してしまう。... [続きを読む]

Tracked on April 21, 2008 7:41 AM
コメント

 試してみました。丁寧なご説明のおかげで私でも設置する事が出来ました。ただ・・・ホントにバカで4の「テンプレート機能を利用する場合」のテンプレート修正で「:」も書き込んでしまったのです。もう直しましたけど。

 同じエントリーにこちらのテンプレートを利用するための奮闘と挫折も書いてあります。

[1] Posted by 路子 : July 10, 2006 8:04 AM

 ごめんなさい。テスト用のブログのアドレス、間違えちゃいました。修正しました。

[2] Posted by 路子 : July 10, 2006 8:06 AM

>yujiroさん
 何度かTBをトライしたのですが、受け付けてもらえないのでコメントにしました。Litebox-1.0をなんとかインスト?ルしました。
http://n-shuhei.net/blog/archives/2006/07/10-170707.php
 ありがとうございました。
ところで、 重箱の隅をつつくようで申し訳ありませんが、2.1.2 lightbox-1.0.js の修正は
正しくは litebox-1.0.j s で、その下の行の lightbox.css はlitebox.js ですよね。私でも分かるぐらいですから誰も間違わないと思いますが。

[3] Posted by n_shuhei : July 10, 2006 7:54 PM

yujiroさん
今朝、TBできました。ありがとうございました。

[4] Posted by n_shuhei : July 11, 2006 6:00 AM

>路子さん
こんにちは。
記事参照ありがとうございます。
またテンプレートご利用ありがとうございます。
間違えられた箇所は若干修正しておきました。
ではでは!

>n_shuheiさん
こんにちは。
記事参照ありがとうございます。
また併せてご指摘ありがとうございました。
早速修正させて頂きました。
トラックバックの件は原因不明です。お手数かけて申し訳ありません。

[5] Posted by yujiro : July 11, 2006 1:25 PM

こんにちは。このエントリーを拝見して、Litebox-1.0をMT3.31に導入したのですが、どうもうまくいきません。。
サムネイル画像をクリックすると、ふつうに大きい画像が表示されるだけなのです。
このエントリーを何度も何度もチェックしながらやったのですが。。。
何か他に原因があるのでしょうか?
サーバは自社で立ててます。
なかなか、モヤッとした質問になっちゃいましたが、何かヒントを頂ければ幸いです。

[6] Posted by Ichigekick : August 31, 2006 5:48 PM

おおっと、
initLightbox();を直前に記述することで、解決いたしましたー!
すいません、お騒がせしました。
やっぱり役立つ情報は最後まで、読んで、試してみることですね、教訓にしますー。

[7] Posted by Ichigekick : August 31, 2006 6:13 PM

 yujiroさん、いつもお世話になって居ます。Liteboxは設定もうまく行って機嫌良く使っていたのですが、ブログを見て下さっているメンバーのお一人からFirefoxやOperaで見ると、画面が黒くなると言う指摘を受けました。それで私もそれらのブラウザをインストールして見たのですが、その現象は再現出来ませんでした。人によって見え方が違うようで、万人に合わせる事はできないのかなぁ、と諦めかけてはいるのですが。
 上記の件についてのやりとりは、拙ブログの「PHP化」というエントリーを参照していただければ有り難いです。
 で、諦めかけたLiteboxとは別にコメントやエントリーの新着にnew!!マークを付ける設定なのですが、Internet Explorerでは赤い文字で出るのに、OperaやFirefoxではグレーの文字になってしまいます。こちらのサイトではブラウザを変えても新着マークはちゃんと赤い文字になっているので、私のところだけの固有の問題のようです。
 もしも「あれかな?」と思うような事があればアドバイスいただけると助かります。

[8] Posted by 路子 : September 1, 2006 8:53 AM

>Ichigekickさん
こんばんは。
ご利用ありがとうございます。
ご質問の件、自己解決されたようでなによりです。
また何かございましたらご連絡ください。
ではでは!

>路子さん
こんばんは。
ご利用ありがとうございます。
ご質問の件ですが、スタイルシートの

.span.new {
    color: red;
    font-weight: bold;
}

の span の前のピリオドを削除して、

span.new {
    color: red;
    font-weight: bold;
}

に変更してやってください。
それではよろしくお願い致します。

[9] Posted by yujiro : September 2, 2006 1:14 AM

 yujiroさん、Firefoxやoperaでのnewマークの赤文字表示について、解決方法を有り難うございました。早速修正したところ、Internet Explorer同様、赤く表示されました。いつもながら明快なご回答を感謝してます。
 尚、Liteboxで画面が黒くなる件は、私のところだけじゃなく http://n-shuhei.net/blog/ でも同じ現象との報告を受けました。(n_shuhei さん、勝手にサイトを紹介してごめんなさい)
 こちらの方はLiteboxの仕様とするしかないでしょうか。Liteboxについての質問までyujiroさんを頼るのは筋違いというのは分かっていますけど、つい書いてしまいました。

[10] Posted by 路子 : September 2, 2006 8:59 AM

>路子さん
こんばんは。
ご連絡ありがとうございました。
無事に直って良かったです。
画面が黒くなる件は、当方でも発生していないので実験できない状況です。
もし何か分かりましたらエントリーで反映させたいと思います。
情報ありがとうございました。

[11] Posted by yujiro : September 4, 2006 12:43 AM

初めまして、Shionと申します。
テンプレートをお借りしてデザインを統一させようと四苦八苦してる最中なんですが、ついでにLiteboxも入れてしまおうと思い、試しましたがどうしても拡大画像が左に寄ってしまっていて中央にならないのと、オーバーレイが使えない状態になってしまっています。
その場で拡大画像は表示されるので問題ないと言えば問題ないのですが、出来ればデフォルトの様に表示される方が綺麗ですのでそうしたいのです。よろしければ見ていただけますでしょうか?
どこをどういじったらまともになるのかさっぱりでお手上げです。

[12] Posted by Shion : September 18, 2006 1:53 PM

自己解決しました(^_^;

デザインの関係でbodyタグにmarginとpaddingを0に指定していたんですが、これがネックだったようでlightbox.cssの

#overlay{
position: absolute;

これを

#overlay{
position: fixed;

としたら無事overlayも表示位置も改善されました。

[13] Posted by Shion : September 18, 2006 5:27 PM

>Shionさん
こんばんは。
ご質問の件、自己解決されたようでなによりです。
またなにかございましたらご連絡ください。可能な範囲であればお答えしたいと思います。
ではでは!

[14] Posted by yujiro : September 19, 2006 2:06 AM

こんばんは。
お返事ありがとうございました。
あの方法でトップページは問題なく(エラー表示もなく)効果を得られることが出来ましたが、今度はエントリーアーカイブで使用できなくなっています。
何が悪いのか(Javascriptはさっぱり(ノД`)なので)わかりませんが、IEで見るとスクリプトエラーのダイアログが出て、一見問題なく表示されてるように見えても画像は別に開きます。
どうぞお知恵をお貸し下さいませ<(_ _)>
デザインに凝る余り何か変なことしてるかもしれないので何かご指摘ありましたらどうぞよろしくお願いいたします。

[15] Posted by Shion : September 19, 2006 8:25 PM

またまた自己解決です(^_^;
コメントちゃんと読めばよかったorz
Ichigekickさんのコメントを見て、追加部分を

onload="initLightbox();individualArchivesOnLoad(commenter_name);" 

としたら、無事表示出来ました。
何度も済みません(;_;)

[16] Posted by Shion : September 20, 2006 9:54 AM

>Shionさん
こんばんは。
ご質問の件、こちらも自己解決されたようでなによりです。
ではでは!

[17] Posted by yujiro : September 20, 2006 10:56 AM

はじめまして。
忍者ブログでカスタマイズしようとしている素人ですが、うまく表示できないのです。
画像をクリックすると普通に別画面で表示されてしまいます。
できればお知恵を借りたいのですが。。。
宜しくお願いします。

[18] Posted by tama : October 12, 2006 6:13 PM

> tamaさん
はじめまして。
記事参照ありがとうございます。
ご質問の件ですが、4項に掲載しているリストがh不足しておりました(Movable Type 以外の例を掲載しておりませんでした)。
先程修正しましたので、「その他のテンプレートで利用する場合」を参考に修正してみて頂けますでしょうか。
それではよろしくお願い致します。

[19] Posted by yujiro : October 12, 2006 11:43 PM

記事を修正して頂きありがとうごさいます。
バカな頭で一生懸命やったのですが、
やはり無理でした。
以下修正を見てやったのを載せますと

#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(http://file.ninnjyatama.blog.shinobi.jp/blank.gifimages/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(http://file.ninnjyatama.blog.shinobi.jp/prevlabel.gifimages/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://file.ninnjyatama.blog.shinobi.jp/nextlabel.gifimages/nextlabel.gif) right 15% no-repeat; }


//
// Configuration
//
var fileLoadingImage = "loading.gifimages/loading.gif";
var fileBottomNavCloseImage = "closelabel.gifimages/closelabel.gif";


<link rel="stylesheet" href="http://file.ninnjyatama.blog.shinobi.jp/lightbox.css" type="text/css" media="screen" />
             :
            (略)
             :
<script type="text/javascript" src="http://file.ninnjyatama.blog.shinobi.jp/prototype.lite.js"></script>
<script type="text/javascript" src="http://file.ninnjyatama.blog.shinobi.jp/moo.fx.js"></script>
<script type="http://file.ninnjyatama.blog.shinobi.jp/litebox-1.0.js"></script>

あとはbodyのとはそのまま青い部分をコピーしました。
ニンブロではファイルのデェレクトリはできないのでそのままアップロードして使ったのですが。。。
書き方を間違えているのでしょうか?
ご迷惑をお掛けしますが、どうしても使ってみたいと思いコメントしてしまいました。
どうか宜しくお願いします。

[20] Posted by tama : October 13, 2006 9:10 PM

”ニンブロラボ”さんのとこで解決して頂けました。
迷惑なコメントを書いて本当にすみませんでした。
この記事に出会えてほんとよかったです。
ありがとうごさいました。

[21] Posted by tama : October 14, 2006 3:22 PM

>tamaさん
こんばんは。
ご質問の件、自己解決されたようでよかったです。
またなにかございましたらご連絡ください。
ではでは!

[22] Posted by yujiro : October 16, 2006 1:06 AM

記事を参考させていただきました。
ありがとうごさいました。

[23] Posted by きくみ : October 22, 2006 9:18 PM

>きくみさん
こんにちは。
ご利用&コメントありがとうございました。
うまくできたようで良かったです。
ではでは!

[24] Posted by yujiro : October 23, 2006 12:49 PM

ナビゲーションバーでお世話になったしゅうです。

Lightboxに挑戦しているのですが、何故か起動したりしなかったりするのです(泣)

他のブログから引っ越して来たばかりだったので、一部、画像が以前のブログの画像ファイルのままだった所為もあるかと思い、以前のブログエントリーの画像をMTのエントリーにアップロードし直して、『Movable Type のテンプレート機能を利用する方法』を試してみたのですが起動しないのです。
どこが間違っているのかも分からなくてお手上げです。
考えられる事などがありましたらお教え願えないでしょうか?

[25] Posted by shu : October 24, 2006 1:11 PM

>shuさん
こんにちは。
ご質問の件ですが、下記の2点を修正ください。

1.lightbox.css の必要な行がかなり削除されています(本記事では変更箇所を抜粋して示しており、非表示部分の削除を意味するものではありません)。
ということで、lightbox.css のバックアップ(または再ダウンロード)から再度カスタマイズしてください。

2.右カラムの U2B Player のスクリプトを削除してください。

ソースを拝借して確認した限りでは上記の修正で動作しました。上記以外のカスタマイズについては問題ないと思います。
それではよろしくお願い致します。

[26] Posted by yujiro : October 25, 2006 5:18 PM

yujiroさん

わ?い、出来ました!!
お忙しい所、本当に有難うございました!!単純な間違いをしていたんですね、すみません!(苦笑)
実は色々といじっているウチに、ぐちゃぐちゃになったりして、その所為で何度もやり直していたので、しまいにはワケ分からなくなっていました。
(物凄い言い訳・汗)
焦っていたので、そんな事にも全く気付きませんでした。最悪です。
起動したりしなかったり、と言うのはU2B Playerの所為だったんですかね?・・・考えてみれば作り直している中で、『さっきまでLightboxが動いたいたのに、何で急に動かないの?』って事があったんです。ご指導の通り、削除したらちゃんと動くようになりました!

お忙しい所有難うございました、早とちり、大マヌケですみません。
また躓いたら伺いに来ます、その時はまた教えて下さいませ。
失礼致します!

[27] Posted by しゅう : October 26, 2006 9:53 AM

>しゅうさん
こんにちは。
ご連絡ありがとうございました。
無事に直ったようでよかったです。
ではでは!

[28] Posted by yujiro : October 26, 2006 12:45 PM

yujiroさん、こんにちわ。

Liteboxを導入したいのですが、上手くいきません。MT用のテンプレートを使用する設定で何度も見直しているのですが、画像をクリックするとただ単に他のページに表示されてしまいます。対処策や確認すべき点があればお教え下さい。お願いします。

[29] Posted by Kunio : October 30, 2006 2:04 PM

>Kunioさん
こんばんは。
記事参照ありがとうございます。
ご質問の件ですが設定を拝見させて頂いて気がついた点をいくつか。

・rel 属性の前には半角空白をいれてください。
 × <a href="hoge.jpg"rel="lightbox">
 ○ <a href="hoge.jpg" rel="lightbox">

・script タグで指定している http://kunio.net/blog/js/litebox-1.0.js が 404 Not Found になります("js"が抜けている模様)。

・js 配下の litebox-1.0.js ですが、MTタグが展開されずにそのまま表示されてしまっています。MTタグを利用する場合は litebox-1.0.js をインデックステンプレートとして登録する必要があります。

それではよろしくお願い致します。

[30] Posted by yujiro : October 31, 2006 12:07 AM

yujiroさん、
お返事有難うございます。

画像リンクの属性の前の空白は入れました。
litebox-1.0.jsの所在ですが、jsというフォルダを作成してその中に入れれば良いのですよね?
インデックステンプレートとしてlitebox用jsとlightbox用cssは登録しているのですが、念のためもう一度登録し直しました。
$MTBlogURL$や$MTBlogRelativeURL$の部分はこのまま置き換えれば良いのですよね?
また、テンプレートの修正(head 部分)ですが、メインページ/カテゴリー・アーカイブ/日付アーカイブ/エントリー・アーカイブの head?/head の間に下のMovable Type でテンプレート機能を利用する場合の枠の中身を追加すれば良いのですよね?1つ分からないのが(略)とその前後の・・なのですが、これは削除して構わないのですか?
色々質問して申し訳ありませんが、宜しくお願いします。

[31] Posted by Kunio : October 31, 2006 6:21 AM

yujiroさん、
お返事有難うございます。

画像リンクの属性の前の空白は入れました。
litebox-1.0.jsの所在ですが、jsというフォルダを作成してその中に入れれば良いのですよね?
インデックステンプレートとしてlitebox用jsとlightbox用cssは登録しているのですが、念のためもう一度登録し直しました。
<$MTBlogURL$>や<$MTBlogRelativeURL$>の部分はこのまま置き換えれば良いのですよね?
また、テンプレートの修正(head 部分)ですが、メインページ/カテゴリー・アーカイブ/日付アーカイブ/エントリー・アーカイブの <head?/head> の間に下のMovable Type でテンプレート機能を利用する場合の枠の中身を追加すれば良いのですよね?1つ分からないのが(略)とその前後の・・なのですが、これは削除して構わないのですか?
最後に、私のブログを読み込むと、左下にページでエラーが発生しました。とjavaのエラーメッセージが表示されるのですが、何か関係がありますか?
色々質問して申し訳ありませんが、宜しくお願いします。

[32] Posted by Kunio : October 31, 2006 6:25 AM

>Kunioさん
こんにちは。
回答の補足ですが、前回拝見させていただいた限りでは、例えばメインページのヘッダ部分に設定されている

<script type="text/javascript" src="<$MTBlogURL$>litebox-1.0.js"></script>

の src 属性のURL(実際には "http://kunio.net/blog/litebox-1.0.js")をブラウザに入力したところ 404 になりました(2番目の回答)。その後、試しに URL を "http://kunio.net/blog/js/litebox-1.0.js" に変更してみたところ litebox-1.0.js が表示されましたが、MTタグがそのまま表示されていました(3番目の回答)。

つまり、「MTタグを記述した litebox-1.0.js を単に js フォルダにアップロードした(ように見えた)」というのが前回の私の回答の背景です。

それで、誤解を招く回答でしたので、改めて申し上げますと、litebox-1.0.js をインデックステンプレートとして登録する場合、本文記事の通りに作業すれば、litebox-1.0.js は index.html と同じフォルダに生成される筈ですので、js フォルダの中ではなくて結構です。

また、本文記事中のリストは必要最小限しか抜粋、あるいは掲載しておりませんので、「書かれていない=削除」とか「(略)や":"は削除」といった解釈は行わないよう、お願い致します。

あと、本日のご質問の回答ですが、左下に表示されているエラーは本カスタマイズと関係があります。
エラーになる事象は、body タグに追加した initLightbox() を呼び出そうとしていますが、このプログラムがみつからないためです。プログラムが見つからない原因は、このプログラムが litebox-1.0.js に含まれており、やはり http://kunio.net/blog/litebox-1.0.js が 404 エラーになっているためです。

ということで、カスタマイズ後、ブラウザで http://kunio.net/blog/litebox-1.0.js をブラウザのアドレスに入力してエラーにならないことを確認してください。「ページがみつかりません」というエラーになるようであれば、FTPツールで index.html が置かれているディレクトリに移動し、同じ場所に litebox1.0.js があることをご確認ください。
ファイルがないのであれば、新たに作成した litebox1.0.js のインデックステンプレートが再構築されていない等の原因が考えられます。

2.2項がうまくできないようであれば、2.1項もお試しください。
それではよろしくお願い致します。

[33] Posted by yujiro : October 31, 2006 2:16 PM

yujiroさん、

大変丁寧なお返事有難うございます。

初めからやり直したところ、2.2で何とか表示まではこぎつけました。ただ、2,3点不具合があるので、再度教え下さい。

1. Loading中のアニメーションが表示されません。
2. 表示された画像の右下の閉じるボタンが表示されません。
3. 白い写真の枠がたまに大き過ぎたりします。
4. 他のJAVA(右メニューにある天気予報)の下に枠が隠れてしまいます。

以上、お手数ですがお教え下さい。
宜しくお願いします。

[34] Posted by Kunio : November 1, 2006 11:46 AM

yujiroさん、

自己レスです。

上記質問の3についてはyujiroさんの他のページを参考に解決できました。また、3の枠についてはときたま出るといった感じです。原因は分かりません。
1.2.についての対処策を教えて下さい。

以上、宜しくお願いします。

[35] Posted by kunio : November 1, 2006 2:23 PM

>Kunioさん
こんにちは。
1と2については、2.2.2の変更について、下記のように MTタグと images の間に "/" を追加してみてください(例によって省略しています)。

var fileLoadingImage = 
<$MTBlogRelativeURL$>/images/loading.gif";
var fileBottomNavCloseImage =
<$MTBlogRelativeURL$>/images/closelabel.gif";

4(解決済でしたらすいません)については「Lightbox JS でブログパーツ等の Flash を PNG 背景画像の下に隠す」が参考になれば幸いです。

3は原因不明です。対象の画像が常に同じものであれば、併せてご連絡頂ければ幸いです。

それではよろしくお願い致します。

[36] Posted by yujiro : November 1, 2006 3:00 PM

yujiroさん、

"/"を入れてみましたが、逆に画像が以前の不具合の時のようにただ単に別のウィンドウに表示されてしまいます。元通りに"/"を外すと一応画像は表示されるようになります。
3.については現在発生していません。

再度、対処策をお教え下さい。
宜しくお願いします。

[37] Posted by kunio : November 1, 2006 3:32 PM

>kunioさん
こんばんは。
再び前の回答の背景ですが、現在拝見させて頂いた litebox1.0.js の2.2.2項の設定(実際に配置されているファイルの内容)は

var fileLoadingImage = "/blogimages/loading.gif";		
var fileBottomNavCloseImage = "/blogimages/closelabel.gif";

となっています。
この中にある「/blogimages」の部分が「/blog/images」になっていないので、正常なパスとして認識されず、loading.gif や closelabel.gif は表示されません(そのため、「"/" を付与してください」という回答を致しました)。

できましたら前の回答の設定("/"を付与)を再度行って、実際に配置された litebox1.0.js の内容をご確認頂けますでしょうか。

もし、

var fileLoadingImage = "/blog/images/loading.gif";		
var fileBottomNavCloseImage = "/blog/images/closelabel.gif";

となっていて、gif 画像が正常に表示されないのであれば、

var fileLoadingImage = "http://kunio.net/blog/images/loading.gif";	
var fileBottomNavCloseImage = "http://kunio.net/blog/images/closelabel.gif";

と、URLで指定してみてください。
こちらでソースを拝借して動作させた限りでは正常に表示されました。

それではよろしくお願い致します。

[38] Posted by yujiro : November 1, 2006 11:37 PM

yujiroさん、

/blog/image/...と区切ったら正常に表示されるようになりました。何度もご迷惑をお掛けしましたが、丁寧に教えて頂きまして本当に有難うございました。また、何かありましたらご質問させて頂くと思いますが、宜しくお願いします。

[39] Posted by kunio : November 2, 2006 10:31 AM

上記問題は解決されて一件落着したのですが、先日リリースされたIE7での表示を確認したところ、ブログが崩れて表示されてしまいます。
試したところ、<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" />を削除すると同じ表示になります。
3コラムのスタイルが1コラムの縦表示になってしまいます。
上記4.テンプレートの修正(head 部分)のところで、
<link rel="stylesheet" href="<$MTBlogURL$>lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="<$MTBlogURL$>js/prototype.lite.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>js/moo.fx.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>litebox-1.0.js"></script>
は追加するだけで良いのですか?
或いは
<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" />
<link rel="alternate" type="application/atom+xml" title="Atom" href="<$MTBlogURL$>atom.xml" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<$MTBlogURL$>index.xml" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="<$MTBlogURL$>rsd.xml" />
<link rel="index" href="<$MTBlogURL$>" />
<link rev="made" href="mailto:user@domain" />
<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" />
にも何か手を加えるのですか?

[40] Posted by Kunio : November 3, 2006 9:47 AM

>Kunioさん
こんばんは。
ご質問の件ですが、このカスタマイズ自体は問題ありません。またそれ以外で修正が必要な場合は(記載もれがない限り)、必ず明記していますのでご心配なく。
表示が崩れる原因はAnother HTML-lint gatewayでサイトを確認したところ、HTMLマークアップが正しくないためです。IE7以外にも Firefox / Opera でも同じ結果になります(IE6は多少の誤ったマークアップでも正常に表示されるようです)。
上記のサイトで結果を確認して、致命的なエラー(HTMLタグの開始?終了がきちんとできていない等)を先に解決していくことをお勧めします(Flash関連のタグはとりあえず無視しても良いでしょう)。

それではよろしくお願い致します。

[41] Posted by yujiro : November 4, 2006 9:33 PM

yujiroさん、

ありがとうございます。
修正できるまで時間が掛かりそうなので、とりあえずお礼だけさせて頂きます。
以前、ブログを訪問されたある方から私のブログが見難いと言われた意味が分かりました。恐らくIE6以外で見たのでしょうね。修正できたらまたご連絡させて頂きます。

[42] Posted by Kunio : November 6, 2006 6:06 AM

>Kunioさん
こんばんは。
ご連絡ありがとうございました。
ではでは!

[43] Posted by yujiro : November 6, 2006 11:23 PM

yujiroさん、こんにちは。
いつもお世話になります。
毎度ですが、こちらのカスタマイズを参考に色々とMTを素人がいじっているので、相変わらすの悪戦苦闘中です。
今回もlitebox1.0を使わせてもらおうと頑張っている最中です。
で、画像をクリックすると、中央に画像とcloseのgifはでてくるんですが、背景とローディング画像がでない状態なんです・・・。
こちらのコメントやらトラックバックを参考に色々見てはいるんですが、底をついてしまい、これ以上どうしたらいいのか分からない状態です。
背景とローディングがでてこない状態は何が考えられるでしょうか?

[44] Posted by ナツ : November 8, 2006 2:33 PM

yujiroさん、こんばんわ

先日IE6以外のブラウザ(IE7など)で自分のブログが崩れる件について質問したものですが、その後何とかエラーを600強から200弱まで減らすところまでは到達したのですが、いまだに崩れて表示されてしまいます。どこが問題なのか、残ったエラーの修正の仕方が分かりません。お手数ですが、今一度対処策を教えて下さい。

宜しくお願いします。

[45] Posted by kunio : November 11, 2006 10:25 PM

こんにちは。いつも参考にさせていただきお世話になっています。
InternetExplorer7でLiteboxを適用した自分のブログを確認したところ、拡大画像表示時に、ブラウザのスクロールバーを一番上に持っていっている領域のみ背景が暗くなり、それ以外の領域では背景色のまま拡大画像が表示されてしまいます。
LightboxJSでも同じような症状だったのですが、IE6ではどちらも正常に動作しています。
調べてみたところ、ブログのDOCTYPE宣言はXHTML1.0に設定しているのですが、これを削除することで正常動作するようになりました。
スタイルシートやJSファイルの変更など、DOCTYPEを削除せずに正常動作させることは可能でしょうか?
もしお分かりでしたらご教授いただきたいと思います。
よろしくお願いします。

[46] Posted by STR : November 12, 2006 10:28 PM

>kunioさん
こんにちは。
作業お疲れ様です。
ご質問の件ですが、再度確認したところ、CSSに誤りがありました。
確認不足で申し訳ございません。

スタイルシートの

/* すべて */
* {
    margin: 0;
    padding: 0;
    font-family: Verdana, Arial, sans-serif;
    h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}

/* すべて */
* {
    margin: 0;
    padding: 0;
    font-family: Verdana, Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}

に修正してください。

なおHTMLマークアップは、引き続き改善されることをお勧めします。
それではよろしくお願い致します。

>STRさん
こんにちは。
ご質問の件ですが、とりあえずIE7をインストールしているマシンで確認してみます。
何かありましたらエントリーにて報告します(情報がなければこのままということでお許しください)。
それではよろしくお願い致します。

[47] Posted by yujiro : November 13, 2006 2:50 PM

Yujiroさん、

ありがとうございます!
無事IE7でも表示されました。
HTMLのエラーは引き続き修正していきます。
本当にありがとうございました。

[48] Posted by kunio : November 13, 2006 5:17 PM

はじめまして。
設置方法を参考にさせていただいているのですが2つ質問させてくださいm(__)m
通常動作は確認できております。

1.NEXT,PREVなどの機能を廃止して画像リンク(javascriptによるrel=lightboxへの書き換え等はせず)は問答無用でliteboxで開くようにする方法

2.ページ内のどこをクリックしても画像をclose出来るようにする方法。

よろしくお願いいたしますm(__)m

[49] Posted by oss : November 13, 2006 6:28 PM

>yujiroさん
DOCTYPEをXHTML1.0で宣言している他の方のブログをIE7で閲覧したとろこ、正常に動作しているのを確認しました。
なぜ自分のブログだけそのようになるのか、自分でももう少し調べてみようと思います。
どうもありがとうございました。

[50] Posted by STR : November 13, 2006 11:07 PM

yujiroさん、こんにちは。
お忙しいようで、大変ですね。
先日、ローディングと背景が表示されないとコメントをたてましたが、スタイルシートの設定を変更したら、なんとか、背景は表示できました。
見た目はよくなったので、なんとか一安心です。また、ローディングも色々見てやってみようと思います。
ありがとうございました。

[51] Posted by ナツ : November 14, 2006 1:03 PM

>kunioさん
こんばんは。
ご連絡ありがとうございました。
無事に直ったようでよかったです。
ではでは!

>ossさん
こんばんは。
一つ目の質問については動作を確認して別途エントリーしたいと思います。すいませんがお時間ください。
二つ目の質問につきましては暇をみて調査してみます。
それではよろしくお願い致します。

>STRさん
こんばんは。
ご連絡ありがとうございました。
なお「W3C CSS 検証サービス」でスタイルシートをチェックしたところ、エラーがありましたので、修正すれば改善されるかもしれません。
それではよろしくお願い致します。

>ナツさん
こんばんは。
ご返事遅くなって申し訳ありません。
背景は解決されてよかったです。
なおローディング画像はこちらで拝見したところ、表示されているようです。
それではよろしくお願い致します。

[52] Posted by yujiro : November 14, 2006 7:00 PM

Yujiroさん、

また質問させて下さい。
3カラムスタイルの両サイドの文字がIE7で表示すると、IE6で表示されるのよりも大きくなります。これを小さくするにはどこをどう修正すれば良いのですか?スタイルシートをいくらかいじってみたのですが変わりません。

[53] Posted by kunio : November 16, 2006 3:21 PM

>kunioさん
こんにちは。
ご質問の件につきましては別途エントリーさせてください。
それではよろしくお願い致します。

[54] Posted by yujiro : November 16, 2006 5:38 PM

こんにちわ。
FC2ブログなのですが、こちらの解説で無事にカスタマイズできました!
ありがとうございます^^

[55] Posted by さくら : November 21, 2006 12:14 PM

>さくらさん
こんにちは。
記事参照&ご連絡ありがとうございました。
うまく設定できたようで良かったです。
ではでは!

[56] Posted by yujiro : November 21, 2006 2:03 PM

先日IE7でのLitebox不具合についてコメントさせていただいた者です。
アドバイスをいただきありがとうございました。
HTMLのタグやスタイルシートを少しずつ削りながら原因を調べてみました。
私のブログは3カラムで左サイドバー・エントリー・右サイドバーを表示し、それぞれのカラムにスタイルシートでクラスを割り当てています。
実際のブラウズ時にはエントリー・左サイドバー・右サイドバーの順に描画させるため、それぞれのクラスにposition:absoluteで表示位置の指定を行っていたのですが、これを削除することで正常に動作するようになりました。
しかし当然、カラムの表示順が変わりレイアウトが崩れることになりますので、HTMLを変更し、左サイドバー・エントリー・右サイドバーの順で描画するようにしました。
スタイルシートについてまったくの素人なので他に変更・追加することで解決する方法があるのかもしれませんが、とりあえずは正常動作するようになったので満足しています。
ありがとうございました。

[57] Posted by STR : November 23, 2006 3:52 PM

>STRさん
こんにちは。
ご連絡&情報ありがとうございました。
とりあえず無事に表示されるようになって良かったです。
ではでは!

[58] Posted by yujiro : November 24, 2006 3:16 PM

Yujiroさん、こんにちわ。

コメントする際に上記の「情報を保存する?」とは何の情報を保存するのでしょうか?コメント投稿者から情報が保存されないと言われたのですが、もともとここをチェックすると何が保存されるのかを理解しておりませんでした。ご教授下さい。

[59] Posted by kunio : December 4, 2006 12:31 PM

>kunioさん
こんにちは。
「情報を保存する」はコメント投稿者情報(名前・メールアドレス・URL)をコメント投稿後、クッキーに保存し、同じサイトで次回コメントする際に、同じ情報が表示されます。コメントを投稿しなければ保存はされません。

またチェックを外すとそれまで入力していた情報はクリアされます。これについては「mt-site.js について(その3:cookie登録の改善)」で改善案を提示しています。

以上です。それではよろしくお願い致します。

[60] Posted by yujiro : December 4, 2006 11:37 PM

Yujiroさん、回答ありがとうございます。

私のブログはYujiroさんのテンプレート(MT3.2ja)で作成したのですが、コメント投稿しても情報が保存されません。また、mt-site.jsについても変更してみましたが、変わりません。何が原因でしょうか?

[61] Posted by kunio : December 5, 2006 12:00 PM

Yujiroさん、こんにちは。
調べてみたのですが、スタイルシートのfloatプロパティで各カラムの回り込みを設定することで、サイドバーやエントリー部分の表示場所を指定できることがわかりました。
これについてスタイルシートやHTMLを変更したところ、IE7でLiteboxが正常動作することを確認しました。
テンプレートについてはこちらのサイトで配布されているものをお借りし、floatプロパティで表示場所を指定するように変更しました。
配布されているテンプレートについてですが、ヘッダ以外に手を加えず3カラム固定レイアウトでLiteboxの動作を確認したところ、#boxの外側の下端のみ画面が暗くなりませんでした。
body.layout-three-columnのmargin-bottomに割り当てられている領域分だけそのような状態になるようです。
私の場合と症状が違いますが、いろいろな原因があるようです。
自分の思うような表示方法・動作になったことで一安心しました。
ありがとうございました。

[62] Posted by STR : December 6, 2006 9:32 PM

>kunioさん
こんばんは。
ご質問の件ですが、エントリーアーカイブの body タグに下記の青色部分を追加願えますでしょうか。

<body class="..." onload="individualArchivesOnLoad(commenter_name)">

それではよろしくお願い致します。

>STRさん
こんばんは。
情報ご連絡ありがとうございました。
ではでは!

[63] Posted by yujiro : December 10, 2006 2:55 AM

Yujiroさん、

有難うございました。
無事情報が保存できるようになりました。

[64] Posted by kunio : December 10, 2006 1:45 PM

>kunioさん
こんにちは。
ご連絡ありがとうございました。
無事に直ったようでよかったです。
ではでは!

[65] Posted by yujiro : December 13, 2006 12:48 PM

どうも・・・いつもお世話になっております&大変御無沙汰しております(笑)。

lightboxのバージョンアップを知って、早速トライしてみたのですが、firefoxでは何の問題もなく機能通り思い通りに表示されるものの、IE及びSleipnirでは白バックに単に写真が表示されるだけになってしまいます。最近は写真エントリーしてないので、カテゴリーアーカイブの“トイコレ”あたりでかなり試行錯誤してみたのですが、どうもウマくいかない状況です(汗)。

恐らくは、久々にド素人のポカをやらかしてそうな予感はするのですが(笑)、何か思い当たるトコロ、アドバイス等いただけますと喜びマスト(笑)。

忙しいトコロすみませんデス。

[66] Posted by toycozy : December 19, 2006 2:09 AM

すみませんデス・・・自己レスです。

scriptの記述位置をアチコチと変えているうちに、表示出来ましたデス。“initLightbox();”を後ろにしたのが良かったのかどうか・・・アレコレをアチコチに変えているうちに(笑)・・・でした。そのアタリはとっくに試していたつもりだったのですが・・・おかしいおかしい・・と早々に深みにハマッしまったようです(汗)。

ムダコメントになってしまい申し訳ありません。

[67] Posted by toycozy : December 20, 2006 1:39 AM

>toycozyさん
こんばんは。
ごぶさたしてます!
ご返事遅くなってすいません。
無事に自己解決されたようでよかったです。

今後もマイペースでお続けになってください。
ではでは!

[68] Posted by yujiro : December 20, 2006 1:50 AM

こんにちは?。
今、バルビレッジっていう とってもかわいいオンラインゲームに はまりにはまってて
このところの熱の入りようったら・・・MTのカスタマイズに燃えてた頃並みの マイブームですよぉw
それで、バルビレッジ用に 新しく作ったブログで こちらのエントリを参考に lightbox 入れてみました。
前のヴァージョンより 写真の表示のされ方が さらにかっこよくなってますね。

[69] Posted by さえら : January 7, 2007 7:52 AM

>さえらさん
こんばんは。
ブログ開設、おめでとうございます。
夢中になれるものがあるのはいいことですね。
ということで、記事参照ありがとうございました!

[70] Posted by yujiro : January 8, 2007 3:39 AM

Yujiroさん、

前回IE7での表示不具合について質問させて頂き、無事解決して頂いたのですが、配色を以前のコーディネートにしようとMt3.2用テンプレートに再度変更したところ、また不具合が発生してしまいました。前回の問題ではなさそうなのですが、どこをいじれば良いのでしょうか?せっかく解決して頂いたのに、何度もすみません。

宜しくお願いします。

[71] Posted by kunio : January 9, 2007 5:00 PM

>kunioさん
こんばんは。
ご質問の件ですが、不具合の具体的な内容をお知らせ頂けますでしょうか。
それではよろしくお願い致します。

[72] Posted by yujiro : January 9, 2007 11:49 PM

下記不具合点です。

1. ブログタイトルの部分の画像の高さが合わなず、余白が生じてしまう。
2. ブログタイトルより下の部分の影だけが表示されない。

以上、宜しくお願いします。

[73] Posted by kunio : January 10, 2007 10:05 AM

Yujiroさん、

自己レスです。
上記問題点1はバナーの高さを調整することで解決しました。ただ、問題点2の方が未解決です。
宜しくお願いします。

[74] Posted by kunio : January 11, 2007 8:16 AM

>kunioさん
2の回答につきましては、下記を参照願います。
http://www.koikikukan.com/archives/2006/11/29-015555.php#c9494

[75] Posted by yujiro : January 11, 2007 11:47 PM

Yujiroさん、

ありがとうございます。
無事解決できました。

[76] Posted by kunio : January 12, 2007 9:07 AM

いつも参考にさせていただいております

Liteboxですがこちらを3カラムの幅が可変式のタイプに導入したのですが幅を縮めるとオーバーレイの幅が縮まり過ぎて右から下地が見えてしまいます。

この場合の解決方法はあるのでしょうか?

[77] Posted by CHOBI : January 26, 2007 1:56 AM

>CHOBIさん
こんばんは。
ご質問の件ですが、とりあえず不具合の状態を拝見させて頂けないでしょうか(該当のURLをご連絡ください)。
なお解決できるかどうかは分かりませんので、予めご了承ください。
それではよろしくお願い致します。

[78] Posted by yujiro : January 27, 2007 10:54 PM

初めまして。いつも参考にさせて頂いております。
今回、ここの記事を参考にLightboxの導入を試みたのですが、どうも上手くいきません…。
画像も表示されるのですが、2、3秒すると自然に消えてしまいます。
というか、写真以外の半透明な部分?の表示も明らかにおかしいです。
一応、ここの記事通りに設定はしたつもりなのですが…。
何か原因があるのでしょうか?宜しくお願いします。

[79] Posted by Dan : February 16, 2007 11:41 AM

ごめんなさい。BLOGのURLはこっちです。

[80] Posted by Dan : February 16, 2007 11:48 AM

>Danさん
こんにちは。
ご質問の件ですが、ようやく分かりました。CSS の下記の赤色部分の設定が影響しているようです。

* {
    margin: 0;
    padding: 0;
    background-color: #F0EEDF;
    font-family: Verdana, Arial, sans-serif;
}

全称セレクタに背景色は設定しない方が良さそうです。
それではよろしくお願い致します。

[81] Posted by yujiro : February 19, 2007 2:20 PM

yujiroさん、こんにちは。
なるほど、そういうことだったんですね。
お手数お掛けして申し訳ありませんでした。
無事に設置する事ができました!感謝です!
本当にありがとうございました!

[82] Posted by Dan : February 19, 2007 3:08 PM

>Danさん
こんにちは。
ご連絡ありがとうございました。
正常に表示されるようになって良かったです。
ではでは!

[83] Posted by yujiro : February 20, 2007 2:08 PM

yujiroさん、こんばんわ?♪
コチラの記事を参考にlightboxの設置やってみたんですが、IEだとカッコよくなってFireFoxだとカッコよくならないんです。最初テンプレートを利用する方法で試したんで利用しない方法でもやってみてもダメ。他にもコチラのコメントを参考に、いろいろやってみたんですがダメでした。なるべく忙しいyujiroさんに質問しないように自分で考えたんですが行き詰りました。どうかお願いします。どこが間違っているのか教えてください。

[84] Posted by yum : February 20, 2007 10:48 PM

すみせん、yujiroさん。
なんか流れが早くてyujiroさんが気付くことが出来なかったようですねw
↑にある質問でまたお願いします。
今度はどうか気付いてくださいませww

[85] Posted by yum : February 25, 2007 8:35 PM

yujiroさん、こんばんわ。お世話になっております。

実は教えてもらったんですがFirefoxには凄く便利な拡張機能があるらしく、それで見るとlitebox-1.0.jsの129行目でエラーが出てるらしいんです。。

anchor.getAttribute("href") has no properties

意味は分からないんですが、これが何かヒントになるでしょうか?

[86] Posted by yum : February 28, 2007 10:16 PM

>yumさん
こんばんは。
情報ありがとうございました。
こちらでもそこまでは確認できておりまして、その先で行き詰ってます(通常であればこのエラーで原因が判明するのですが…)。
遅くなり申し訳ありません。まとまった時間がとれないため、すいませんがもうしばらくお待ちください。

[87] Posted by yujiro : March 1, 2007 8:40 PM

>yumさん
こんばんは。
分かりました。
おそらく「http://www.koikikukan.com/archives/2007/01/08-020018.php」のカスタマイズをされていたと思うのですが、提供しているスクリプトにバグがありました。
現在その部分は削除されているので正常に動作していると思いますが、とり急ぎご連絡まで。
それではよろしくお願い致します。

[88] Posted by yujiro : March 2, 2007 12:49 AM

yujiroさん、(。・o・。)ノ こんばんゎぁ♪
この度はワタシが悪いのに悩ませてしまいましたね。ごめんなさい。
<a name?のこと初めて知りました。
これ↑のせいでFireFoxではカッコよくならなかったなんて。
代替のことも考えましたが、yujiroさんのおかげでせっかくFireFoxでもカッコよくなったんですもの、とりあえず今のままで行きますわ州´∀`*州 ウフ♪
本当にありがとうございました!!感謝w

[89] Posted by yum : March 2, 2007 9:27 PM

yujiroさんはじめてまして。この記事のお陰で
litebox導入することができましたm(_ _)m!

しばらく使ってみて思ったのですが、特定のカテゴリだけ
jsを読み込むようにすることってできないのでしょうか。
写真の多いカテゴリでは良いんですけど、文書メインの
カテゴリでまで読み込むのは無駄だよなあ、、と思いまして。

もしなにかヒントがありましたらお手隙の際に
教えていただけるとうれしいです!

[90] Posted by aiko : March 4, 2007 9:10 AM

>yumさん
こんばんは。
ご連絡ありがとうございました。
こちらこそすいませんでした。
とりあえず無事に直ってなによりです。
ではでは!

>aikoさん
はじめまして。
ご質問の件ですが、下記のようにMTIfCatefory タグを使えば可能です。
カテゴリー・アーカイブテンプレートの場合のみ、4項の設定を下記のようにしてみてください。
赤色部分に litebox を利用したいカテゴリー名を記述します。

<MTIfCategory name="[カテゴリー名]">
<link rel="stylesheet" ? />
<script type="text/javascript" src="..."></script>
<script type="text/javascript" src="..."></script>
<script type="text/javascript" src="..."></script>
</MTIfCategory>

利用したいカテゴリーが複数ある場合は、上記と同じ内容のタグを並べて記述し、MTIfCategory タグの name 属性のみ書き換えてください。
それではよろしくお願い致します。

[91] Posted by yujiro : March 5, 2007 6:41 PM

はじめまして。
写真の公開方法について、JAlbumにしようかなと考えていたのですが、このページを拝読してすぐにLiteBoxに決め、さっそく導入いたしました。懇切丁寧な説明をありがとうございます。

作動中のナビ画像ですが、images/closelabel.gif とimages/loading.gif