何も言わずにクリックしてみて
あ、それからもうひとつ。（コロンボさんみたいでしょ？）
画像だけでなくhtmlなんかもHigtslideできちゃいます。
上の”コロンボさん”をクリックしてみてね。
 |
では導入です。
サイトHighslide.jsへ行き、左のメニューからDownloadを選びましょう。
Latestバージョンが表示されるので”今すぐダウンロード”ボタンを押します。
ライセンスメッセージを確認してOKならYesボタンをクリックします。
あなたはHighslideを手にいれました。
ローカルのzipファイルを解凍して、フォルダを開きましょう。index.htmlをダブルクリックします。
味も素っ気もないトップ画面が表示されます。
Highslide JS core、Highslide HTML extensionにあるサンプルを試してみてください。
自分のサイトに導入したいもが決まったら、そのソースを表示させましょう。
ソースに従ってあなたのサイトに導入すれば出来上がりです。
ここから先はxillion.netへの設置方法です。
ソースの通りやれば簡単に設置できますので、
初めからこんな細かく見なくてよいと思います。。。
まぁ参考になれば。。
xillionが選んだのは、画像としてはexample-white-rounded-outline.html、
Html拡張としてインラインのexample-html.htmlです。
なお、下記の番号はサンプルソースにある番号と一致しまています。
１）Javascriptの実装について
まずサンプルのhtmlソースをみます。
example-white-rounded-outline.htmlではhighslide.jsを、
example-html.htmlではhighslide-with-html.jsを使用しています。
ダウンロードしたパッケージのhighslideフォルダにjsファイルがあるので、
両方のソースをみてみましょう。
コメントのconfigに実装する機能の記述があります。
そのコメントをみるとhighslide-with-html.jsはhighslide.jsを包括していることがわかるので、
highslide-with-html.jsを使用することにします。
（ただし、めんどくさかったのでサーバにはhighslideのフォルダごと設置）
a.ダウンロードしたパッケージのhighslideフォルダをサーバの適当な場所に設置します
ダウンロードしたパッケージのHighslideフォルダをそのまま自分のサーバにコピーします。
（コピーされるファイルはjsファイルとgraphicsフォルダにあるイメージファイルです。）
さて、いよいよ実際にhighslideを稼働させるページの作成です。
サンプルのexample-html.htmをコピーして改変しましょう。
b.htmlに実装するJavascriptのパスを記述します
< script type="text/javascript" src="highslide/highslide-with-html.js"></script> の
src=に、a.で設置した場所を記述します。
MTのブログルートフォルダに設置した場合は、
MTのアーカイブテンプレートにsrc="<$MTBlogURL$>highslide/highslide-with-html.js"として
埋め込むことができます。
c. htmlにあるその他の"highslide/"を変更します
js以外にもhislideフォルダを参照しているものがあるので、b.と同様に変更します。
22行目のgraphicsDir、59行目のbackground-imageのurl、118行目のbackgroundのurlです。
２）Javascriptのパラメータの変更
オプションとしてjsの設定をかえることができます。
サンプルhtmlでは下記の設定を上書きしています。
< script type="text/javascript" >
hs.graphicsDir = 'highslide/graphics/';
hs.outlineType = 'rounded-white';
hs.outlineWhileAnimating = true;
< /script >
jsファイルでは、より細かいパラメータが設定できます。
各パラメータのデフォルトがjsファイルの上部に列記してありますので、
メッセージやマージン、デュレーションなどのカスタマイズが可能です。
クレジットをオフにしても良いだなんて、フリーソフトの鑑ですね。
xillionが行ったjsファイルへの変更
graphicsDirのデフォルトをサイト用に変更。
outilneTypeのデフォルトを'rounded-white'に変更。
こうすると、個々のアーカイブでの設定が不要になります。
jsの方に設定したのでhtmlから削除します。
また、メッセージは日本語にすると文字化けの恐れがあるのでやめました。
３）CSSファイルの埋め込み
mtのスタイルシートであるstyle-site.cssに埋め込んでしまいました。
サンプルのhtmlからコピーして、
mtのテンプレート編集でstyle-site.cssにペーストします。
勿論スタイルをアレンジすることも可能です。
これもサンプルhtmlからは削除します。
４）、５）はhtmlの書き方なので、自分の準備した画像に変更すればOKです
これでテスト用htmlができました。
うまく動きましたか？
６）MTテンプレートの変更
これはHighslide.jsには関係ありません。MTでの設定です。
エントリーアーカイブ、カテゴリーアーカイブ、日付アーカイブのheadに
highslide-with-html.jsを実装します。
あとは、新規のエントリーを書く際に、４）と５）のhtmlを記入するだけでOKです。