本サイトが推奨するHighslideJSを使ってギャラリー構築する作業内容をご紹介します。新規カテゴリにてギャラリーページを構築。カテゴリ名は”フォトギャラリー”、サブカテゴリ”flower”、”wedding”、”portrait”の3つを作成する前提で作業内容を紹介していきます。
スクリプトDL・解凍
まず、HighslideJSのスクリプトを本家サイトからダウンロードします。尚、このスクリプトは非商用サイトのみフリーで扱えるスクリプトですので使用できるサイトなど規約に注意してください。有料で商用サイトにおいて使用することができます。
ダウンロードしたスクリプトを解凍します。highslideフォルダが生成されます。
jsフォルダ・cssフォルダ作成・スクリプトアップロード
ギャラリーページを構築するブログのインデックステンプレートと同じ階層にjsフォルダ、cssフォルダを作成します。（すでにある場合は既存フォルダを使用します。これは、jsファイル、cssファイルを管理しやすくするために行います。ご自分ですでにファイル管理基準をお持ちの方はそちらに合わせて作業を行ってください。）
スクリプトアップロード
FTPソフトを使ってjsフォルダの中にhighslideフォルダをすべてをアップロードします。今回highslideJSについてはjsフォルダの中にcssファイル・imageファイルなども一緒にアップロードします。（すべてパッケージ化されていますので、異なる階層に移した場合、コード編集の手間がかかる為）
新規カテゴリ作成
ダッシュボード→[カテゴリ]にて”フォトギャラリー”で新規カテゴリ（トップカテゴリ）作成します。
出力ファイル/フォルダ名を英字にて正しいアドレス（photogallery）に修正。次に”フォトギャラリー”カテゴリの中に”flower”、”wedding”、”portrait”の名前で新規サブカテゴリ作成。先ほどと同じく出力ファイル名を正しくアドレスに修正。カテゴリ作成後に再構築。
テンプレート（カテゴリ別ブログ記事リスト）の編集
ダッシュボード→[デザイン]→[テンプレート]でテンプレートを編集します。カテゴリ毎でのテンプレートを切り替え表示させるための編集です。
アーカイブテンプレートの中の”カテゴリ別ブログ記事リスト”を編集。クリックでテンプレートを開きます。
カテゴリ毎でのテンプレート切り替えは条件分岐タグを使います。今回はjavascriptを読み込ませますので<head></head>内で条件分岐、実際にメイン部分にてイメージファイルを表示させますので<body></body>内のメイン部分で条件分岐のテンプレートタグを追加します。
変数設定（２つ）
※リリースページ開設当初誤った内容を記述しておりました。申し訳ございません。
<MTSetVarBlock name="top_cat_name"><MTTopLevelParent><$MTCategoryLabel$></MTTopLevelParent></MTSetVarBlock>
<MTSetVarBlock name="cat_name"><$MTCategoryLabel$></MTSetVarBlock>
カテゴリ別ブログ記事リストの最初の1行目に変数をセットするMTSetVerBlockを２つ追加。これはトップカテゴリ名を変数top_cat_nameの中に代入、カテゴリ名を変数cat_nameの中に代入し、以下のMTIf条件分岐タグでtop_cat_name 、cat_nameの値を検証、変数を各MTテンプレートタグ属性で使う為にセットします。
参照:
- MTSetVarBlock | テンプレートタグリファレンス
- http://www.movabletype.jp/documentation/appendices/tags/setvarblock.html
条件分岐タグ追加
<head></head>内にjsスクリプトを追加するための条件分岐タグを追加します。</head>の前に以下のコードを追加します。
<MTIf name="cat_name" eq="フォトギャラリー">
<MTElse>
<MTIfIsAncestor child="flower">
<$mt:Include module="JS_HighslideJS"$>
</MTIfIsAncestor>
<MTIfIsAncestor child="wedding">
<$mt:Include module="JS_HighslideJS"$>
</MTIfIsAncestor>
<MTIfIsAncestor child="portrait">
<$mt:Include module="JS_HighslideJS"$>
</MTIfIsAncestor>
</MTIf>
コード最上部に追加したMTSetVarBlockを使っての変数cat_nameの値とeq="カテゴリ名"でマッチするかの条件分岐を行い。<MTElse>で条件に当てはまらない場合の振る舞いも追加します。その中に<MTIfIsAncestor child="サブカテゴリー名">を使って、該当するサブカテゴリであればモジュールテンプレートの内容を挿入するという形にしています。挿入するモジュールのなかにHighslideJSのスクリプトを追加記述します。
この条件分岐でフォトギャラリー以外のカテゴリには指定するjsスクリプトは挿入されないことになります。またフォトギャラリーカテゴリにもjsスクリプトは挿入されません。（このためにこの条件分岐を行っています）
参照:
- MTIf | テンプレートタグリファレンス
- http://www.movabletype.jp/documentation/appendices/tags/if.html
- MTIfIsAncestor | テンプレートタグリファレンス
- http://www.movabletype.jp/documentation/appendices/tags/ifisancestor.html
モジュールのネーミング
後々のことを考えて管理しやすいモジュール名をつけるようにします。カテゴリ別で挿入する（以下インクルード）モジュール名には、カテゴリ名を付けることでモジュールリストをみても連想できるようにわかりやすいネーミングを。
今回body内のイメージ・Exif等のHTMLタグについては、Asset_カテゴリ名（英字）等でモジュール管理面でもわかりやすいネーミングにします。jsスクリプトはJS_スクリプト名でもしくは＋カテゴリ名（英字）で。
body内条件分岐タグ追加
body内での条件分岐を追加します。デフォルトのカテゴリ別ブログ記事リストのコードで<div id="content-inner">以下に条件分岐タグを追加します。※今回は条件分岐の変数がtop_cat_nameとなっていることに注意してください。
<div id="content">
<div id="content-inner">
<MTIf name="top_cat_name" eq="フォトギャラリー">
<MTInclude module="Asset_PhotoGallery">
<MTElse>
<div id="alpha">
<div id="alpha-inner">
<mt:If name="datebased_archive">
<mt:Ignore><!-- Title for category-monthly entry listings --></mt:Ignore>
<h1 id="page-title" class="archive-title"><$mt:ArchiveTitle$>アーカイブ</h1>
<mt:Else>
<mt:Ignore><!-- Title for category entry listings --></mt:Ignore>
<h1 id="page-title" class="archive-title"><em><$mt:ArchiveTitle$></em>の最近のブログ記事</h1>
</mt:If>
<mt:Ignore><!-- Limit number of entries to the number set in Blog Entry Settings --></mt:Ignore>
<mt:Unless name="datebased_archive"><$mt:Var name="limit" value="auto"$></mt:Unless>
<mt:Entries limit="$limit">
<mt:Ignore><!-- Use the Entry Summary module for each entry published on this page --></mt:Ignore>
<$mt:Include module="ブログ記事の概要"$>
</mt:Entries>
<div class="content-nav">
<mt:ArchivePrevious><a href="<$mt:ArchiveLink$>">« <$mt:ArchiveTitle$></a> |</mt:ArchivePrevious>
<a href="<$mt:Link template="main_index"$>">メインページ</a> |
<a href="<$mt:Link template="archive_index"$>">アーカイブ</a>
<mt:ArchiveNext>| <a href="<$mt:ArchiveLink$>"><$mt:ArchiveTitle$> »</a></mt:ArchiveNext>
</div>
</div>
</div>
<$mt:Include module="サイドバー"$>
</MTIf>
</div>
</div>
今回は、メインコンテンツ部分すべてをフォトギャラリーしますので上記のように条件分岐コードを追加します。
また、サブカテゴリも含めての個別条件分岐タグを追加してもいいのですが、今回はすべてのトップカテゴリでカテゴリ別テンプレートを切り替えるという前提で考え、あまりややこしくならないように（可読しやすいように）トップカテゴリ内での条件分岐（サブカテゴリ別テンプレートの切り替え）はインクルードするモジュールの中で行うように設定します。このようにすることで他カテゴリでの条件分岐を追加する場合、<MTElse>前に
<MTElseIf name="top_cat_name" eq="他カテゴリ名">
<$mt:Include module="Another_Category_Contents"$>
上記コードを追加するだけで見通しのいいコードを記述することができます。
<MTElse>を使って条件に合わない場合の振る舞いで元からのコードになるようにします。</MTIf>をモジュールインクルードサイドバー下に記述します。
以上で保存ボタンをクリック。保存することでレイアウト右側インクルードモジュールコンテンツに新規モジュール作成のリンクが生成されますので、そちらをクリックして新規モジュール作成作業に移ります。もしくは、テンプレートページに戻り、モジュールテンプレートで新規モジュール作成でインクルードするモジュールを作成します。
新規モジュールの作成
<head></head>内でのインクルードモジュール<$mt:Include module="JS_HighslideJS"$>の作成、以下のコードとなります。さらに詳しい設定については、Highslide JS API Referenceをご覧になって設定を変えてみてください。以下は、本ギャラリーと同じ設定コードとなります。
<link rel="stylesheet" type="text/css" href="<$MTBlogURL$>js/highslide/highslide.css" />
<script type="text/javascript" src="<$MTBlogURL$>js/highslide/highslide-with-gallery.packed.js"></script>
<script type="text/javascript">
hs.graphicsDir = '<$MTBlogURL$>js/highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.fadeInOut = true;
hs.dimmingOpacity = 0.8;
hs.captionOverlay.position = "rightpanel";
hs.captionOverlay.width = "400px";
// define the restraining box
hs.useBox = true;
hs.width = 800;
hs.height = 500;
// Add the controlbar
hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 3000,
repeat: true,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: 1,
position: 'bottom center',
hideOnMouseOut: true
}
});
</script>
<body></body>内でのインクルードモジュール<$mt:Include module="Asset_PhotoGallery"$>の作成、以下のコードとなります。
<div id="gallery">
<div id="gallery-inner">
<div id="gallery-nav">
<MTSubCategories category="フォトギャラリー">
<MTSubCatIsFirst><ul></MTSubCatIsFirst>
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryLabel$>"><$MTCategoryLabel$></a></li>
<MTSubCatIsLast></ul></MTSubCatIsLast>
</MTSubCategories>
</div>
<div id="gallery-contents">
<MTIfIsAncestor child="$cat_name">
<MTAssets type="image" tag="$cat_name">
<MTAssetsHeader>
<ul id="highslide">
</MTAssetsHeader>
<li>
<a class="highslide" href="<$MTAssetThumbnailURL width="600"$>" onclick="return hs.expand(this)"><img src="<$MTAssetThumbnailURL height="100"$>" alt="<$MTAssetLabel$>" height="100" /></a>
<ul id="assetexif">
<$MTAssetExif$>
</ul>
</li>
<MTAssetsFooter>
</ul>
</MTAssetsFooter>
</MTAssets>
</MTIfIsAncestor>
</div>
</div>
</div>
フォトギャラリーカテゴリにてサブカテゴリのナビゲーション表示を行うために<MTSubCategories category="フォトギャラリー ">カテゴリ指定でサブカテゴリリスト表示を行います。
次に<MTIfIsAncestor child="$cat_name">でchild属性にcat_nameの変数を代入できるように$をつけて$cat_nameにします。これでフォトギャラリーカテゴリのサブカテゴリ3つともにそれぞれ違う内容が表示されるようになります。
また、MTAssetsタグでtag属性に$cat_nameを指定することでサブカテゴリ名と同じタグを付けたイメージだけが生成されるようになるわけです。コードの短縮を考えた場合、このパターンがベストかと思われます。それからサブカテゴリナビゲーションもすべてのサブカテゴリに表示されるようになります。データを整理表示するのを考えた場合、サブカテゴリ名は英数字で作成することが望ましいです。
参照:
- MTSubCategories | テンプレートタグリファレンス
- http://www.movabletype.jp/documentation/appendices/tags/subcategories.html
- MTAssets | テンプレートタグリファレンス
- http://www.movabletype.jp/documentation/appendices/tags/assets.html
※ウィジット→カテゴリアーカイブでカテゴリ表示を行っている方へ。
以下カテゴリ内記事のカウントでリンク表示有無の条件分岐をはずすようにしなければ、各ページからギャラリーへのリンクが生成されませんので気をつけてください。
<mt:If tag="CategoryCount">
<mt:else>
</mt;If>
参照:
- MTCategoryCount | テンプレートタグリファレンス
- http://www.movabletype.jp/documentation/appendices/tags/categorycount.html
※カテゴリ毎でのテンプレート別表示は、さまざまな方法が考えられます。可読性やソースコードの再帰性のよいように自分なりに書き換えて実装してみるのがいいかと思います。今回ご紹介した方法はほんの一例です。
以上でカテゴリテンプレートの編集は終了です。保存ボタンをクリックし、後はギャラリーページ構築フローの通りにArchiveUploaderを使ってイメージファイルをスムーズにアップロード・登録、アイテムの管理ページにてアイテム毎にタグ付け、最後にすべてのページの再構築をすることでギャラリーページを構築することができます。
