mippe | Shared With: Everyone - May 27 2008 | Movable Type, CSS, MTEntryIfCategoryMovable Type 4 で、カテゴリー別にブログ記事ページのデザインを切り替える方法を、2回に分けて紹介します。
やりたいことは、ひとつのブログ記事アーカイブを使った、カテゴリー別のブログ記事ページのデザイン（HTMLマークアップやCSS）の切り替えです。
- mippe | Shared With: Everyone - Jun 09 2008 | Movable Type, CSS, Javascript, Lightbox JS
サムネールをクリックすると同一ウィンドウ上に画像を表示するという Lightbox JS です。ご質問を頂いて知ったのですが結構広まっているようです。
ということでこのエントリーにてご紹介したいと思います。ShareViewed: 9 Times - mippe | Shared With: Everyone - Jun 09 2008 | Movable Type, CSS, Javascript
とりあえず loading.gif のパスにドメインを追加することでOKになりました。具体的には、当サイトの場合であれば、lightbox.js の36行目辺り
var loadingImage = 'loading.gif';
var closeButton = 'close.gif';
をvar loadingImage = 'http://www.koikikukan.com/loading.gif';
var closeButton = 'http://www.koikikukan.com/close.gif';
に変更します。なお試験サイトではドキュメントルートからのパス設定でも大丈夫でした。またIEでは overlay.png のパスもきちんと設定しないと正常に読み込めないため、lightbox.css の14行目と20行目にある overlay.png にドメインを追加します。当サイトの例は下記の通りです。
#overlay{ background-image: url(http://www.koikikukan.com/overlay.png); }
* html #overlay{
background-color: #333;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.koikikukan.com/overlay.png", sizingMethod="scale");
}
lightbox.css の内容を styles-site.css に転記している場合（かつ普通に再構築対象にしている場合）や、ligjtbox.css をインデックステンプレートとして登録している場合は、<$MTBlogURL$>overlay.png とすればOKです。こちらも試験サイトではドキュメントルートからの設定で正常に読み込めました。２．エントリー・アーカイブの修正
エントリー・アーカイブは１項の他に、onloadイベントハンドラとの競合で正常に動作しないという報告を下記のサイトで頂いています。ありがとうございました。CEFA::Blog：Lightbox JSを組み込んだのだけれど
caramel*vanilla：lightbox.jsでサムネイルをCOOLに拡大表示してみる
対処は、安直ですがエントリーアーカイブの onload イベントハンドラ（赤色部分）<body class="…" onload="individualArchivesOnLoad(commenter_name);>
を一旦削除して、<body class="…">
とし、エントリー・アーカイブの一番最後に<script type="text/javascript">
<!--
individualArchivesOnLoad(commenter_name);
//-->
</script>
を追加しています。この individualArchivesOnLoad は、サイン・イン中であれば名前とメール欄を非表示にし、各フォームにCookie情報を埋め込む動作を行っているだけですので、この対処で問題ない筈です。ちなみに onload イベントハンドラに2行書いたりしてみましたがNGでした。
３．ローディング画像・背景画像が表示されない場合
１項で修正した loading.gif のURL、および overlay.png のURLをブラウザのアドレス欄に直接入力してください。画像が表示されない場合、設定したURLが誤っていますので、１項で設定したURLを修正してください。2006.03.21 追記
１項の close.gif の設定、および３項を追記しました。ShareViewed: 2 Times - mippe | Shared With: Everyone - Apr 13 2007 | Css, Movable Type
Quoted: MovableType（ムーバブルタイプ）を使うならこのレンタルサーバーで決まり！月額1,365円のレンタルサーバー。Dr.Blogのブログテンプレートも使い放題！
ShareViewed: 1 Time
;){kind=link}
Send mippe a friend request or a personal message instead.