Litebox 1.0 をブログに適用する

Litebox 1.0 をブログに適用する

Posted at July 7,2006 1:35 AM
Tag:[Customize, Litebox]

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 ではカラー表示のままですが下線表示に切り替わります。なお設定の都合上、リンクとテキスト表示が判断できなくなりますので予めご容赦ください。

関連記事
トラックバック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/
最近よく見るサイトでカッコいい画像表示がさ... [続きを読む]

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
ブログやホームページに貼り付けた画像のサムネイル... [続きを読む]

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

画像のポップアップを行う その2 Javascript + CSS 編 from Luv Design
今回は、Javascriptライブラリーを利用した、画像のポップアップの作成方法を説明します。 使用するのは『Litebox』で、クリックして画像が... [続きを読む]

Tracked on May 16, 2008 1:16 AM

備忘録:lightboxを使う from BCLRADIO.COM
小粋空間さんを参考にlightboxを設置する [続きを読む]

Tracked on January 15, 2009 6:30 PM

litebox 1.0導入 from MT4TESTBLOG
Movable TypeにLitebox 1.0を導入する方法 [続きを読む]

Tracked on March 3, 2009 6:50 PM

Movable Type Liteboxを導入 from ブロッけんJr
ウェブでおなじみのLiteboxを導入してみました。↓画像をクリックす... [続きを読む]

Tracked on September 22, 2009 12:10 PM
コメント

 試してみました。丁寧なご説明のおかげで私でも設置する事が出来ました。ただ・・・ホントにバカで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だけ表示されません(他の正常表示される画像と同じ場所に置いています)。なにか調べるべき点などご教授いただければ幸いです。よろしくお願いいたします。

[92] Posted by ラズベリーファーム : March 12, 2007 6:10 AM

すみませんっ! 自己解決しましたのでご報告を。

litebox-1.0.jsのMTテンプレート使用者用編集で、
/images/loading.gif"
$MTBlogRelativeURL$>/images/closelabel.gif"
のように”/”を入れると解決しました。おさがわせいたしました。ご参考まで。

[93] Posted by ラズベリーファーム : March 12, 2007 6:32 AM

>ラズベリーファームさん
こんにちは。
ご連絡ありがとうございました。
ご質問の件、自己解決されたようで良かったです。
ではでは!

[94] Posted by yujiro : March 12, 2007 3:58 PM

こんばんわ?
昨日まで、 Lightboxもうまく設置できていたんですが、急に作動しなくなっています。
何度かやり直してみたんですが、全くだめです。
なんとかお力をお借りできませんでしょうか;;

[95] Posted by ななこ : March 18, 2007 9:04 PM

>ななこさん
こんばんは。
ご質問の件ですが、IE6 で動作を確認したところ、BBS の iframe タグ

<IFRAME src="http://complacency.oops.jp/cgi/bbs/apeboard_plus.cgi" border="0px" " frameborder="0" width="170" height="250" scrolling="AUTO" name="i"></IFRAME>

が影響しているようです(それ以上の原因はつかめておりません)。
Firefox では正常に動作しているようです。
それではよろしくお願い致します。

[96] Posted by yujiro : March 19, 2007 12:13 AM

yujiroさん
ありがとうございました;;
サイドのBBSはずしたら、戻りました・・・
やっと眠れます。おやすみなさい~(=^‥^A アセアセ・・・

[97] Posted by ななこ : March 19, 2007 12:43 AM

はじめまして!
何かと参考にさせていただいております。
今回こちらのLiteboxの記事。を参考にさせていただき、無事に設置できました。ありがとうございます!
記事からリンク・トラバさせていただきましたのでお知らせまでに・・・
これからも役立つ情報、頼りにしています!

[98] Posted by ami : March 28, 2007 1:09 AM

>amiさん
はじめまして。
記事参照&トラックバックありがとうございました。背景もピンク系に変更されてバッチリですね。
ではでは!

[99] Posted by yujiro : April 1, 2007 1:21 AM

すみません!全然わからずはじめたのですが。。
右の二つが表示されません。。
何かわかれば教えてくださーい。

[100] Posted by yui : June 8, 2007 5:12 PM

>yuiさん
こんばんは。
ご質問の件ですが、元画像が指定したURLに存在しないようです。
それではよろしくお願い致します。

[101] Posted by yujiro : June 11, 2007 12:35 AM

>yujiro様

こんにちは、Mixiの小粋さんのコミュについ先日、質問させて頂いたものです。
その節はとても丁寧にお教え頂き、ありがとうございました。

今回はLiteboxの導入を行うにあたり、以下の点でつまづいております。
もし可能なようでしたら、原因をお教え頂ければ幸いです。

1.「4.テンプレートの修正(head 部分)」にあります、?とは、
テンプレートのどの部分に記載されていますでしょうか。
例えばMT4.0「ブログのテンプレート」の中にあります、「メインページ」
「アーカイブインデックス」を参照しておりますが、?と書かれた
箇所が見つかりません。

2.「4.テンプレートの修正(head 部分)」の「Movable Type でテンプレート
機能を利用する場合」の枠内にあります、「・・(略)・・」の部分には何を
記載すればよろしいでしょうか。

まだCSSの勉強を始めたばかりで、おかしな質問をしていないかとても
心配ですが、何卒よろしくお願い致します。

[102] Posted by toriiro : November 25, 2007 11:59 PM

>toriiroさん
こんにちは。
ご質問の件ですが、

1.当方の説明文の誤字です。正しくは「<head>~</head>」です。 (サーバ移転の際に「~」がすべて「?」に変換されてしまったようです)
head 要素は、「テンプレートモジュール」→「ヘッダー」にありますので、head 終了タグの直前に追加してください。

2.「・・(略)・・」の部分は、すでにテンプレート上に記載されているものを想定しています。つまり、新たに追加する link 要素は、ヘッダーに記載されている link 要素と並べ、script 要素は、head 終了タグの直前に追加してください。
(head 要素内にある同一要素は並べて記述しておくと分かりやすいでです)

「・・(略)・・」としているのは、MT利用者によって設定内容が異なることが想定されるので、このようにしています(デフォルトテンプレートの内容をそのまま転記しても良いのですが、「私の設定と違うのですが…」と逆に質問される場合がありますので)。

他の記事も「略」と書かれている場合は、同様の解釈をしてください。何かを書かなければいけない部分を「略」としていることは(多分)ありませんのでご心配なく。

なお、MT4のデフォルトテンプレートであれば、

<link rel="stylesheet" href="<$MTLink template="styles"$>" type="text/css" />

のすぐ下に link 要素を追加し、

<MTIf name="main_template">
    <$MTCCLicenseRDF$>
</MTIf>
</head>

とある、</head> のすぐ上に、script 要素を追加します。

なお、この記事は MT3 の時に書いた内容のため、5項については MT4 にうまくあてはめられません。
この部分については、5.1をとばして、5.2の「</body> の直前に追加する方法」を「テンプレートモジュール」→「フッター」に設定すれば大丈夫だと思います。

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

[103] Posted by yujiro logo : November 27, 2007 11:32 AM

>yujiro様

いつもご丁寧にお教えくださりありがとうございます。

お教え頂いた内容は全て理解し、1から5.2までの設定を行いました。2に関しては2.2項のテンプレート機能を利用する方法を選択し、拡張子が"lightbox.css"と"litebox-1.0.js"のアップロードは行っておりません。

そして、記事内に画像を貼り(rel属性の前には半角空白を入れました)、クリックしましたが、Lightboxは起動せず、画像のあるurlにリンクする(Lightbox設置前と同様の状態)といった状況です。

この原因をお教え頂ければ幸いです。尚、自分で調べてみて気になった点は、

・http://toriiro.hustle.ne.jp/toriiro/js/litebox-1.0.js
・http://toriiro.hustle.ne.jp/toriiro/litebox-1.0.js

がいずれも404エラーとなる点です。

お手数をおかけしますが、何卒よろしくお願い致します。

[104] Posted by toriiro : November 30, 2007 4:09 PM

>toriiroさん
こんにちは。
ご質問の件ですが、3項で示した js ディレクトリ配下に必要なファイルがないようです。
その代わり、

http://toriiro.hustle.ne.jp/toriiro/prototype.lite.js
http://toriiro.hustle.ne.jp/toriiro/moo.fx.js
http://toriiro.hustle.ne.jp/toriiro/litebox-1.0.js

は正常にアクセスできますので、各 script 要素の src 属性を書き換えて("/js"を削除)ください。

また、
http://toriiro.hustle.ne.jp/toriiro/css/lightbox.css
は 404 Not Found になります。

FTPツールでアップロード先を確認して、link 属性の href 属性を書き換えてください。

すべてのファイルが正常にアクセスできれば litebox が動作します。
それではよろしくお願いいたします。

[105] Posted by yujiro logo : November 30, 2007 4:54 PM

>yujiro様

すぐにお教え下さりありがとうございます。
手順通り修正しましたところ、正常に動作しました。ありがとうございました。

ただ、今度は何か何かを行った拍子に、スタイルシート(メイン)で以下の設定を
しているにも関わらず、ロゴ画像が表示されなくなってしまいました。

もし原因をお教え頂けるようでしたらとても嬉しいのですが、何度もお尋ねするのも申し訳ないので、無理なようでしたら無視して下さい。

/* ヘッダ */
#header {
border-bottom:1px solid #ffffff;
height:106px;
background:url(images/movtest.gif)no-repeat;
text-indent:-9999px;
outline-width:0;
}

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

※色々と壁にぶつかりつつカスタマイズしておりますが、yujiro様の本を拝読しながら少しづつ理解していくプロセスがとても楽しいです。

[106] Posted by toriiro : November 30, 2007 6:51 PM

>toriiroさん
こんばんは。
ご連絡ありがとうございました。
無事表示されるようになりましたね。
なお現在、ロゴ画像(というのは images/movtest.gif と解釈しています)は表示されているようですが、不具合が継続しているようでしたらご連絡ください。
それではよろしくお願いいたします。

[107] Posted by yujiro logo : December 1, 2007 1:50 AM

yujiro様 >

"images/movtest.gif "はIEで非表示、SafariとFirefoxで表示といった状況なのですが、それはMTカスタマイズとは関係がないように思いましたので、別途自分で原因追求してみます。

お忙しいところありがとうございました!

[108] Posted by toriiro : December 1, 2007 3:16 PM

>toriiroさん
こんにちは。
IEでの非表示の不具合、解消されたようですね。良かったです。
ではでは!

[109] Posted by yujiro logo : December 3, 2007 2:12 PM

わたしもここで見て導入しました。
でもこれから書くのは質問じゃありません。
すごく丁寧に質問に答えてくれる、ここの主にこう言いたかっただけです。


ありがとう。

[110] Posted by kuddy : December 6, 2007 1:01 AM

>kuddyさん
こんばんは。
そんな素敵なコメントをくれたkuddyさんへ、私も「ありがとう」です。

[111] Posted by yujiro logo : December 6, 2007 2:06 AM

初めまして。
このエントリーを拝見して、何度かやり直してみたのですがスクリプトエラーが出てしまいます。
サムネイル画像をクリックすると、大きい画像が表示されるだけです。
このエントリーを何度もチェックしながらやったのですが、他に原因があるのでしょうか?
よろしくお願い致します。

[112] Posted by ハル : December 16, 2007 2:43 PM

>ハルさん
はじめまして。
ご質問の件ですが、現在liteboxを設定されている画像がみつかりません。すいませんが不具合のある状態で再度ご連絡頂けますでしょうか。

なお、ページの最後にbody要素(赤色)

   :
<div id="footer">
Copyright (c) :::UNTITLED::: All Rights Reserved.
</div><body class="layout-two-column-right main-index" onload="initLightbox()">
</body>
</html>

とありますが、これは誤りです。
ページの最後に設定する場合は、

    :
<div id="footer">
Copyright (c) :::UNTITLED::: All Rights Reserved.
</div>
<script type="text/javascript">
<!--
initLightbox();
//-->
</script>
</body>
</html>

としてください。
それではよろしくお願い致します。

[113] Posted by yujiro logo : December 17, 2007 2:00 PM

こんにちは。
先日は迅速な対応をありがとうございました。
あれから何度かやり直したら、ちゃんと表示されるようになりました。
ありがとうございました。

[114] Posted by ハル : December 23, 2007 4:04 PM

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

[115] Posted by yujiro logo : December 27, 2007 1:48 AM

はじめまして。
いつも 密かに大変お世話になっております。

なんとかMT4.1にAjaxを2つ設置しました。Firefoxでは2つ供に動くのですが、IEでは1つしか動きません。IEで1つづつ設置すると、それぞれ動きます、こんな事ってあるんですね。
どうしたら、IEでも動くようになりますか?お手上げです。どうかご指導下さい。
よろしくお願いします。

■image menu
http://www.phatfusion.net/imagemenu/
■lightbox
http://www.doknowevil.net/litebox/

なんだか上手くいかなくてjs、cssは、テンプレは止めて、リンク式にしました。

以下のスクリプトを追記しています。
<script type="text/javascript">
<!--
initLightbox();
//-->
</script>
</body>

※今だけ、使わせてもらっているサーバーです。完成し、サーバー借りたら引越します。

[116] Posted by webrin : February 2, 2008 9:29 PM

>webrinさん
こんばんは。
ご質問の件ですが、「Ajaxを2つ設置しました」というのは、「image menu」と「lightbox」をひとつのブログに設置したということでしょうか。
その前提であれば、こちらで
http://naowebfactory.sakura.ne.jp/blog/blog/
を確認させて頂いたところ、どちらも正常に動作していますが、質問の解釈が間違ってましたら再度具体的な状況をご連絡ください。
それではよろしくお願い致します。

[117] Posted by yujiro logo : February 4, 2008 12:13 AM

昨日質問させて頂いた者です。
結果、未だに上手くできないのですが、
知識が無いなりに試行錯誤してみましたので、レポートします。
その方が、御手間を取らせないかなぁ?と思いまして。
MT4.1です。
ココで、lightbox 1.5をダウンロードしました。
http://www.phatfusion.net/lightbox/
同じくココでImage menuをダウンロードしました。
http://www.phatfusion.net/imagemenu/

mootools.jsが共通だったので共有しました。
なんだか上手くできたっぽかったのですが、
lightbox:IEで、overlayが短く位置も変です。
Firefoxは上手く表示できました。

しかし、
アーカイブページになると表示ができません。リンクが変なようですが、
何だかわかりません。MT4.1のテンプレ構成で頭がコンガラガッテいます。
構成は↓
index.html
archives.html
image/画像いろいろ
lightbox/js/ダウンロードした.js
      css/ダウンロードした.css

ブログ記事に書いた画像リンクは<a href="images/26.jpg"

mootools.jsとlightbox1.0のmoo.fx.jsって姉妹品?だから動かなかった??と知識が全く無い私は勘だけで動いてしまいました。

お忙しい所申し訳ございませんが、どうかよろしくお願いします。

[118] Posted by webrin : February 4, 2008 12:15 AM

昨日質問させて頂いた者です。
結果、未だに上手くできないのですが、
知識が無いなりに試行錯誤してみましたので、レポートします。
その方が、御手間を取らせないかなぁ?と思いまして。
MT4.1です。
ココで、lightbox 1.5をダウンロードしました。
http://www.phatfusion.net/lightbox/
同じくココでImage menuをダウンロードしました。
http://www.phatfusion.net/imagemenu/

mootools.jsが共通だったので共有しました。
なんだか上手くできたっぽかったのですが、
lightbox:IEで、overlayが短く位置も変です。
Firefoxは上手く表示できました。

しかし、
アーカイブページになると表示ができません。リンクが変なようですが、
何だかわかりません。MT4.1のテンプレ構成で頭がコンガラガッテいます。
構成は↓
index.html
archives.html
image/画像いろいろ
lightbox/js/ダウンロードした.js
      css/ダウンロードした.css

ブログ記事に書いた画像リンクは<a href="images/26.jpg"

mootools.jsとlightbox1.0のmoo.fx.jsって姉妹品?だから動かなかった??と知識が全く無い私は勘だけで動いてしまいました。

お忙しい所申し訳ございませんが、どうかよろしくお願いします。

[119] Posted by webrin : February 4, 2008 12:15 AM

こんばんは。
2回に渡り、ご相談させて頂きましたが、なんとか解決する事ができました。

必要無いかもしれませんが、ご参考までに。

使用していたテンプレートDOCTYPEよりも上にHTMLの記述があった為、IE6ではきちんと表示できないという問題があったようです。

http://www.digitalia.be/software/slimbox

お騒がせ致しました。

[120] Posted by weblin : February 10, 2008 12:03 AM

>weblinさん
こんばんは。
ご連絡ありがとうございました。
ご質問の件、自己解決されたようでなによりです。
情報、ありがたく参考にさせて頂きます。
ではでは!

[121] Posted by yujiro logo : February 12, 2008 2:16 AM

はじめまして。
MT4を使っています。
テンプレートはスタイル対応版のtemplate_4_1_utf8_1_2_style.zipを使わせて頂いています。
liteboxを導入したいのですが、4以降の項目でheadやbodyの位置がどこにあるか良く理解出来ないのでタグを挿入できません。。。
初心者な質問ですいません。
詳しく教えて頂ければ幸いです。

[122] Posted by 14 : April 1, 2008 6:12 AM

>14さん
はじめまして。
ご質問の件ですが、この記事はMT3の時の内容のため、MT4に適用する場合は、4項は、ブログ管理画面の「デザイン」→「テンプレート」→「テンプレートモジュール」→「ヘッダー」で、「Movable Type でテンプレート機能を利用しない場合」あるいは「Movable Type でテンプレート機能を利用する場合」のいずれかの設定を行ってください。

5項は、「デザイン」→「テンプレート」→「テンプレートモジュール」→「フッター」で、下記のタグをbody終了タグの直前に追加してください。

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

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

[123] Posted by yujiro logo : April 4, 2008 3:35 PM

>yujiroさん
丁寧な説明ありがとうございます。無事導入する事が出来ました!
ちょっと勉強しようと思いMTの本も買わせて頂きました!
また、お世話になるかもしれませんが、その時は宜しくお願いします。

[124] Posted by 14 : April 11, 2008 5:28 AM

>14さん
こんばんは。
ご連絡ありがとうございました。
うまくできたようでよかったです。
また拙著もお買い上げくださりありがとうございます。
ではでは!

[125] Posted by yujiro logo : April 13, 2008 3:20 AM

こんばんわ
いつも色々と参考にさせていただいています。

先日、この記事を見てLiteboxを導入してみたのですが
FirefoxやLunascapeのGeckoモードでは動作するのですが
IEエンジンではLiteboxがまったく動作せず、リンク先のファイルが開いてしまいます。

色々と試しては見たのですが、さっぱりわかりません。
お忙しいところ恐れ入りますが
対処法を教えていただけますでしょうか。
宜しくお願いいたします。

[126] Posted by Tachibana : April 21, 2008 10:14 PM

こんばんわ
先日質問させていただいたTachibanaですが
なんとか自己解決できました。

ブログパーツのFLO:Qが何らかの形で影響していたようです。

3つくらいjavaScriptを読み込んでいたようなので
どれが競合していたのかは分かりませんが
外してみたところ正常に動作しました。

FLO:QとLiteBoxを共存させることは僕のスキルでは無理なので
とりあえず諦めることにしておきます。

お騒がせいたしました。

[127] Posted by Tachibana : April 25, 2008 7:59 PM

>Tachibanaさん
こんばんは。
ご連絡ありがとうございました。
ご質問の件、自己解決されたようで良かったです。
原因が分からなくて悩んでいたので助かりました。
ではでは!

[128] Posted by yujiro logo : April 25, 2008 8:33 PM

こんばんは、はじめまして。
この記事を見てLiteboxを導入してみたのですが
liteboxが作動しないで リンク先の画像がでるだけに
なってしまいます。

毎晩頑張ってみているんですが
もうお手上げです。

どうすればliteboxが作動してくれるのか
教えていただけないでしょうか?

宜しくお願いします

[129] Posted by azuko : May 9, 2008 2:53 AM

>azukoさん
はじめまして。
ご質問の件ですが、4項で追加するlink要素とscript要素のsrc属性に書かれているURLにファイルがアップロードされていません(下記のURLをブラウザのアドレスに入力すると404エラーになります)。

http://sanjyumaru.blog123.fc2.com/s/a/n/sanjyumaru/css/lightbox.css
http://sanjyumaru.blog123.fc2.com/s/a/n/sanjyumaru/prototype.lite.js
http://sanjyumaru.blog123.fc2.com/s/a/n/sanjyumaru/moo.fx.js
http://sanjyumaru.blog123.fc2.com/s/a/n/sanjyumaru/litebox-1.0.js

また、script要素のsrc属性の記述が誤っているようです(3ヶ所とも)。

src="<http://~
  ↓
src="http://~

それから、link要素はmeta要素の後方に移動してください。
それではよろしくお願い致します。

[130] Posted by yujiro logo : May 9, 2008 12:46 PM

こんばんは、返信ありがとうございます。

一度 全部きれいさっぱり消して再度ダウンロードして
ここのやり方でやってみたのですが やっぱりリンク先の画像が
出てくるだけです

超ド素人質問(だと思います)ですが
>http://domain/path/to
は ワタシのブログで言うとどこの部分になるのでしょうか?


2.1.2のところの>/path/toはどこをかけばよいのでしょうか? 

素人質問ばかりですみません。
宜しくお願いします。

[131] Posted by azuko : May 9, 2008 10:25 PM

>azukoさん
こんばんは。
[131]の回答の前に、私の確認不足でしたが、FC2ブログはファイル名の中にピリオドがあるとアップロードできません(拡張子の前のピリオドは大丈夫です)。それで[130]のコメントで回答した4ファイルのうち3ファイルがアップロードに失敗しているようです(アップロード後に赤色で「ファイル名にスラッシュ(/)やピリオド(.)を入力することはできません」と表示されます)。

したがって、まず次の3つのファイル名を修正してからアップロードしてください。

 prototype.lite.js → prototype_lite.js
 moo.fx.js → moo_fx.js
 litebox-1.0.js → litebox-1_0.js

上記にあわせて、4項で追加するscript要素のsrc属性のファイル名も変更してください。

そして、[131]の回答ですが、/path/to は、FC2ブログでは無理みたいなので、画像のURLをそのまま記述してください。つまり、

var fileLoadingImage = "/path/to/images/loading.gif";
var fileBottomNavCloseImage = "/path/to/images/closelabel.gif";
var fileLoadingImage = "http://blog-imgs-40.fc2.com/s/a/n/sanjyumaru/loading.gif";
var fileBottomNavCloseImage = "http://blog-imgs-40.fc2.com/s/a/n/sanjyumaru/closelabel.gif";

みたいな感じになります。上のURLに含まれる「40」という数字は可変みたいなので、正式なURLはきちんと確認して記述してください。

一応、下記のFC2ブログ実験用サイトで動作することを確認しました。
http://koikikukan.blog42.fc2.com/

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

[132] Posted by yujiro logo : May 10, 2008 2:29 AM

こんばんは。
なんとか解決できました。

また 何かありましたら
コメントさせていただきます!

本当にありがとうございました!

[133] Posted by azuko : May 11, 2008 10:11 PM

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

[134] Posted by yujiro logo : May 17, 2008 3:58 AM

Lightbox設置できたのですが、ブラウザによって動作が異なります。

http://www.rockfield.net/rockfield_diary/

FireFox、Safari、Google Chrome、Operaでは正しい動作をするのですが、Lunascape、Sleipnir、Internet Explorerでは、画像をクリックすると、リンク先の画像が開きません。

そして、なぜかページを下に下にスクロールしていくと、リンク先画像が表示されているような状態です。たぶん、ヘッダの記述でスクリプト同士(カレンダー表示など)がバッティングしているのではないかとは思うのですが……

[135] Posted by Rockfield : September 27, 2008 5:21 PM

>Rockfieldさん
こんばんは。
ご質問の件ですが、link要素で複数のCSSを読み込んでいる部分(custom_styles02.css~custom_styles30.css)を削除すると、ある程度正常に動作するみたいです。
それではよろしくお願い致します。

[136] Posted by yujiro logo : October 5, 2008 2:09 AM

始めまして、
こちらでLiteboxの導入方法を知り早速導入しましたが
どうしても上手く表示が出来ません
参照させて頂いたのは
2.2 テンプレート機能を利用する場合の導入方法で
4.テンプレートの修正(head 部分)も
メインページ/カテゴリー・アーカイブ/日付アーカイブ/エントリー・アーカイブの head~/headの間にも
Movable Type でテンプレート機能を利用する場合の方法で導入しました。

Loading画面が表示されなくてただ単に真っ白くなり表示が出来な無かったり、
一度リロードすればまたちゃんと表示できるのですが、
今度は絵や写真に白い点々らしき点が浮かび上がります。

何度も作成したJSやCSSテンプレートを確認したのですが、
どこが自分で間違えているのかが検討つきません。
サーバーとの相性が問題なんでしょうか?

[137] Posted by 陸斗 : October 15, 2008 2:43 PM

>陸斗さん
はじめまして。
ご質問の件ですが、こちらから拝見した限りでは正常に動作しているようですが、不具合が解消していないようであれば再度ご連絡ください。
Liteboxはサーバとの相性は特にありません。
それではよろしくお願い致します。

[138] Posted by yujiro logo : October 17, 2008 10:24 PM

はじめまして。

ブログの開設からここまで、ほんとにお世話になっています。
陰ながら、とても感謝しています。

今まではなんとかやってこられたんですが、
このLitebox 1.0の設置での問題が解決できず、質問させていただきます。

いちおう、書かれている通りに記述したつもりなのですが…。
メインページ(http://inutaku.com)ではLiteboxが正常に表示されるものの、
個別のページ(http://inutaku.com/archives/2009/01/test3/)になると画像が表示されず、さらにcloselabel.gifの画像も表示されません。

これはどこが問題になっているのでしょうか?
もしお分かりになれば、教えていただけるとたいへん助かります。

ご多忙のところ恐縮ですが、どうぞよろしくお願いいたします。

[139] Posted by いぬたく : January 25, 2009 11:31 PM

こんにちは。

rel="lightbox"についてですが、
「rel="lightbox"」は手入力しないといけないのですか?

現在のところ、入力しなくてもlightboxは動作しているのですが。

御手数おかけします。

[140] Posted by hisataka logo : February 23, 2009 2:07 PM

あ、追伸です。
rel自動付与の設定は行っています。
srcを見ると、rel="lightbox"がなく、気になるので質問致しました。

[141] Posted by hisataka logo : February 23, 2009 2:18 PM

>hisatakaさん
こんばんは。
ご質問の件ですが、JavaScriptを利用して自動付与しているのであれば、src上は「rel="lightbox"」は見えません。厳密には、src(表示→ソース)で参照できるのは静的なHTMLで、JavaScriptで付与される動的な構造はalert等で参照する必要があります。
それではよろしくお願い致します。

[142] Posted by yujiro logo : February 24, 2009 8:15 PM

御回答ありがとうございます。
確認なりました。
ありがとうございました。

[143] Posted by hisataka logo : February 25, 2009 12:12 AM

はじめまして。

こちらのブログを拝見し、おかげさまでLiteboxを設置することができました。
初心者の私にもわかりやすく説明してあって、本当に感謝しております。

ただ、どうしてもLoadingのgifが表示できず、困っております。
過去のログにも同じようなケースがあったようでしたので、注意して直したつもりですが、やはり表示できません。
他のgifは表示されます。

お忙しいとは存じますが、お時間あるときで結構ですので、ご指導いただけたらと思います。
不躾なお願いで申し訳ありません。よろしくお願いいたします。

[144] Posted by ota : March 14, 2009 11:44 PM

おかげさまで、MTの設置できました。
Twitterもフォローさせていただきました。

[145] Posted by よし子 : August 20, 2009 2:02 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)