Movable Type 4 で Highslideを利用する

2007年10月27日 14:57 Maru-J（管理人） | 個別ページ | コメント(2) | トラックバック(0)

サムネイル画像をクールに拡大表示する『Highslide JS』を利用する方法です。

拡大ツールでは、『Lightbox JS』が有名ですが、この『Highslide JS』には、下記の特徴があります。

拡大画像の下にキャプション（タイトル）の挿入が可能
ウィンドウサイズに収まるように拡大（右下のアイコンをクリックすると 100% 表示）
拡大画像のドラッグが可能

下記画像をクリックして下さい。ドラッグも可能です。

★テスト画像　まろん★

以下、カスタマイズ方法です。

ダウンロード

Highslide JSからダウンロード

「Download」をクリックします。

ダウンロードページ

無料・Ver選択で「Download now!」をクリックします

アップロード

ダウンロードしたファイルを解凍

「highslide」フォルダがありますので、これをblog直下（javascriptが動作する場所ならOK：scriptフォルダを間違えずに記述の事）に置く。
images/example内のhtmlファイル等は動作には不要ですが、サンプルの動作確認を行いたい場合に必要
UTF-8使用の場合は、「highslide.js」ファイルを『UTF-8』で再保存。

ヘッダー修正

「デザイン」→「テンプレート」→「テンプレートモジュール」→「ヘッダ」を選択します。
<head></head>の間に、下記コードを追加します。
<script type="text/javascript" src="<$MTBlogURL$>/highslide/highslide.js"></script>
<script type="text/javascript">hs.graphicsDir = '<$MTBlogURL$>/highslide/graphics/';</script>
（URLは、http://～始まるフルアドレスで記入でもOK）

スタイルシート修正

「デザイン」→「テンプレート」→「スタイルシート(ベーステーマ)」を選択します。
サンプル内のhtmlファイル（ソース）よりコピーして、下記コードを追加します。（長いですけど．．．．．）
今回は、「White outline with rounded corners」を使用しました。
.highslide {
    cursor: url(highslide/graphics/zoomin.cur), pointer;
    outline: none;
}
.highslide img {
    border: 2px solid gray;
}
.highslide:hover img {
    border: 2px solid white;
}
.highslide-image {
    border: 2px solid white;
}
.highslide-image-blur {
}
.highslide-caption {
    display: none;
    border: 2px solid white;
    border-top: none;
    font-family: Verdana, Helvetica;
    font-size: 10pt;
    padding: 5px;
    background-color: white;
}
.highslide-display-block {
    display: block;
}
.highslide-display-none {
    display: none;
}
.highslide-loading {
    display: block;
    color: white;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    padding: 3px;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    background-color: black;
    /*
    padding-left: 22px;
    background-image: url(highslide/graphics/loader.gif);
    background-repeat: no-repeat;
    background-position: 3px 1px;
    */
}
a.highslide-credits,
a.highslide-credits i {
    padding: 2px;
    color: silver;
    text-decoration: none;
    font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
    color: white;
    background-color: gray;
}

タグ設定

下記は、画像にキャプション（タイトル）を表示する場合です。
<a href="画像ファイルのURL" class="highslide" onclick="return hs.expand(this)" onkeypress="return hs.expand(this)"><img src="サムネイル画像のURL" alt="..." /></a>
<div class="highslide-caption" id="caption-for-image"><p>タイトル</p></div>
1ページに複数の画像を表示する場合は、画像とキャプションの対応のために、<a>要素に<id>属性を付与し、キャプション用の<div>要素の<id>属性名を、対応するネーミングにします。
<a href="1枚目の画像ファイルのURL" id="thumb1" class="highslide" onclick="return hs.expand(this)"><img src="1枚目のサムネイル画像のURL" alt="..." /></a>
<div class="highslide-caption" id="caption-for-thumb1"><p>1枚目のタイトル</p></div>
<a href="2枚目の画像ファイルのURL" id="thumb2" class="highslide" onclick="return hs.expand(this)"><img src="2枚目のサムネイル画像のURL" alt="..." /></a>
<div class="highslide-caption" id="caption-for-thumb2"><p>2枚目のタイトル</p></div>

以上で設定は終わりです。

今回の「highslide」カスタマイズには、かなり手こずリました。

『Movable Type』のカスタマイズでは、お世話になっている小粋空間さんのサイトを参考にさせて頂きました。

毎度の事ながら、ありがとうございます。

トラックバック(0)

このブログ記事を参照しているブログ一覧: Movable Type 4 で Highslideを利用する

このブログ記事に対するトラックバックURL: http://maru-j.com/mt/mt-tb.cgi/38

コメント(2)

Satoshi Sato :

はじめまして、MT超初心者です。

このサイトの説明がとても素晴らしく参考にしました。
可能であれば、是非ともカスタマイズ方法をお教えて頂きたいのですが？

ご説明のありましたスタイルシート修正まで理解できたのですが、5タグ設定はどこで追加したらよろしいのでしょうか？ちなみにMT4.12を使用しています。

よろしくお願い申し上げます。

2008年7月 2日 08:46

Maru-J（管理人） :

はじめまして、Satoshi Satoさん。
本日までコメントに気が付きませんでした。申し訳ないです。

タグ設定ですが、記事（エントリー）本文中に記載します。

このエントリーを作成した時点では、"body"要素の直後に、空の内容の"div"要素の設定が必要でした。

バージョンアップが行われ、新バージョンでは、設定が簡単になっているみたいです。
・空の内容の""要素設定は、不要みたいです。
・１ページ内で、キャプション付き画像を設定する場合は、説明のように"id"属性が必要でしたが、"a"要素の直後に記述した要素にclass="highslide-caption"が設定されていればキャプションと認識するみたいです。

返答が遅く、すでに理解されているかと思いますが、宜しくお願いします。

2008年9月 4日 17:40