MTでアーカイブテンプレートに設定される予約変数と条件分岐

Movable Type で、HTMLファイルに出力される中身を指定・変更するための変数について。

予約変数を利用し条件分岐をおこなうことで、MTではテンプレートの種類やアーカイブごとに出力結果を変えるなどのカスタマイズが可能になる。

出力対象先(ファイル)を一度に複数指定する変数や単独指定するものなど種類が豊富。

予約変数の種類については下記ホームページやPDFを参照。

アーカイブテンプレートに設定される予約変数

arcive_variable.pdf(この表に記載された変数はほんの一部。)
 (DL先URL http://www.movabletype.jp/documentation/files/arcive_variable.pdf)

 

【ホームページ画面】
ホームページ画面|MTでアーカイブテンプレートに設定される予約変数

 

例えば、次のように使うことで、「最近のブログ記事(ウィジェット)」の出力先を変更可能。

1
2
3
<mt:If name="main_index">
<$mt:Include widget="最近のブログ記事"$>
</mt:If>

この場合、「最近のブログ記事(ウィジェット)」は、main_index(メインページ)にのみ出力される。

1
2
3
<mt:If name="entry_archive">
<$mt:Include widget="最近のブログ記事"$>
</mt:If>

こうすると、「最近のブログ記事(ウィジェット)」は、entry_archive(個別のブログ記事)にのみ出力される。

 

条件分岐で行う効率的なテンプレート管理

予約変数の関わりで条件分岐についても。
次のウェブページで判りやすく説明されているので参照。

条件分岐で行う効率的なテンプレート管理 – テンプレートモジュール

 

【ホームページ画面】
ホームページ画面|MTで条件分岐で行う効率的なテンプレート管理

 

例えば、さらに条件分岐を指定することで、予約変数による出力先を2段階に分けることが簡単にできます。(ブロックタグ)

1
2
3
4
5
6
<mt:If name="main_index">
この文字は、main_index と判別されたテンプレートに有効。
<mt:Else>
この文字は、main_index 以外のテンプレートに有効。
</mt:Else>
</mt:If>

また、条件分岐は部分的に利用することもできます。

1
2
このテンプレートは main_index <mt:If name="main_index">ですね
<mt:Else>ではないですね</mt:Else></mt:If>。

なお、Movable Type のテンプレートタグには、大文字・小文字の区別はなく、「mt」の後に「 : 」を入れても構わない。

従って、次に挙げたMovable Typeのテンプレートタグは、すべて同じものとみなされます。(個人的には一番下を推奨。)

  • MTWEBSITENAME
  • MTWebsiteName
  • mtwebsitename
  • MT:WebsiteName
  • mt:WebsiteName
 

MT5の最初の階層となるウェブサイトをブログに変更する方法

Movable Type 5 を普通にインストールすると、最初にウェブサイトなる階層が設定され、通常その下の階層にブログなどの階層を作ることになります。

時に、ブログをウェブサイト階層下ではなく、最初の階層として作りたいケースがあります。そんな時は、MT5の設定で、ウェブサイトURLとウェブサイトパスの記述内容と同じ内容でブログURLとブログパスの記述をおこなえばOK。

以下のMovable Type 5 ドキュメントのページ内に解説が載っている。

ウェブサイトの直下(ルート)にブログを公開する

 

【ホームページ画面】
ホームページ画面|MT5の最初の階層となるウェブサイトをブログに変更する方法

 

qTip – The jQuery tooltip plugin(jQueryを使ったツールチップ)

jQueryを使ったツールチップのプラグイン「qTip」。

IE6でも機能するのでありがたい。
上位バージョンのブラウザーと若干表示が異なるケースもあるが、細かい点を気にしなければ充分実用的な範囲内。

カスタマイズの種類は豊富だが、
残念なことにホームページを見る限り説明不足は否めない。

また、デフォルトで、ツールチップの横幅が250pxとなっているので、
横幅を250px以上にする際は、JSファイル内の記述を変更する必要がありそう。

qTip – The jQuery tooltip plugin

 

【ホームページ画面】
ホームページ画面|qTip - The jQuery tooltip plugin(jQueryを使ったツールチップ)

 

実際に次のホームページに設定してみました。

  「山形県農林水産祭に出店しました|JA全農山形

苦心した点は、他に使っているJSのjQueryプラグインと競合してしまう点。
JSの記述順や記述位置を変更することで、なんとか無事機能するようになったという経緯。

 

クリップアートファクトリー|無料イラスト素材(EPS形式も)

結構な数の無料クリップアート素材集を提供してくれるホームページです。
どうやら(株)リコー(RICOH)の運営するサイトのよう。

無料イラストがWMF形式(Windows Meta File|Microsoft社のWindowsが標準でサポートしているベクター画像のファイル形式)とアドビイラストレータで編集可能なEPS形式で提供されています。

下記ホームページアドレスは、実際にはディレクトリのアドレス。
この他にも多くのデータ・テンプレートを提供してくれています。

クリップアートファクトリー |
  全部無料で使えるテンプレート & 素材集のダウンロードサイト

 

【ホームページ画面】
ホームページ|クリップアートファクトリー

 

ColorBox(拡張・進化型 Lightbox jQuery plugin)

画像表示エフェクトの元祖 Lightbox を拡張・進化させたjQueryプラグインとして
有名なColorBoxについてのメモ。

正直今更感もあるが、IE6できちんと機能するという点でもありがたく、しかも軽量で、優れたjQueryプラグインだということを改めて実感する。

このデザクロ-ホームページ内に設置してある「簡単ご質問フォーム」も
ColorBoxを使って作成している。

ちなみにその時のColorBoxとjQueryのバージョンは次の通り。

  ColorBox v1.3.15  jQuery 1.4.2 ( jQuery 1.3+ )

今回のブログ投稿時点のColorBoxとjQueryのバージョンは次のようになっている。

  ColorBox v1.3.17.2  jQuery 1.6.1 ( jQuery 1.3+ )

この間のバージョンアップの主な変更は、Internet Explorerのpng画像(アルファチェチャンネルをもつpng画像)の表示に関するもので、スタイルシート(colorbox.css)内の記述が、IE6、IE7・IE8、IE9用に細分化されている。

このお陰もあってか、IE6におけるColorBoxの挙動や表示が以前よりもスムーズになっている気がする。(とても好感のもてるバージョンアップと言えます。)

 

今回、敢えてColorBoxを取り上げているのは、ColorBoxの便利な機能のひとつを取り上げるためです。

jQueryプラグインを使っての画像表示では、表示される際の画像の幅に気を使う。
画像編集の技術やアプリをもたない、いわゆる画像初心者の方が投稿するようなCMSを構築する際はなおさらだ。

そんな時重宝するのが、このColorBox。
(下記ホームページにデモやダウンロードリンクがあります。)

ColorBox – customizable lightbox plugin for jQuery

 

設定オプション(maxWidth、maxHeight)で、オーバーレイ表示する画像や画像枠の最大幅や最大高をきめ細かく設定することができます。もちろん元の画像が小さければ、小さいまま、縦横比率も変わることはありません。

【ColorBoxの主な画像表示の変更パターン】

  1. ブラウザーの天地左右のサイズに合わた画像表示サイズの自動変更。
    (この場合、画像と画像枠も画像サイズに合わせて変動する。)
  2. ブラウザーの天地左右のサイズに合わた画像枠の表示サイズの自動変更(固定)と固定した枠内での画像サイズ自動変更。
    (この場合、画像枠のサイズが固定され、画像サイズがその中で調整され表示される。)

 

ただ、本家のホームページでは表示デモが5×18パターンも掲載されているにもかかわらず、今回紹介したパターンの掲載が無かったり、もともと英語サイトということもあってか、日本語で紹介・解説しているホームページでもあまり取り上げられていない機能のようです。
(画像表示幅を制限するjQueryとしては、Lightbox Plusなどもありますが、画像表示幅が常に100%、ブラウザーによってはスクロールバーが表示されてしまったり、表示されるまでの挙動がスマートとは言ないため、使うにはためらいます。等倍表示機能などは素晴らしいんですけどね。)

 

【ホームページ画面と説明】
オーバーレイ表示の画像サイズを自動変更できるjQueryプラグインcolorboxのホームページ画像

 

エラー・バグ情報 メモ1

 

ColorBoxをカスタマイズし、連続した inline 表示の設定にした際、
下記のように縦横のサイズを%で指定すると、Internet Explorer(IE6とIE8で確認済み)で、「オブジェクトは、このプロパティまたはメソッドをサポートしていません。」とホームページを表示する毎にエラーを指摘される。

$("#inline").colorbox({inline:true, width:"80%", height:"80%" });

縦横サイズの指定に px を使うとエラーが表示されなくなる。

 

エラー・バグ情報 メモ2

 

メモ1と同じように、ColorBoxをカスタマイズし、連続した inline 表示の設定にすると、連続表示の初期設定がなぜか自動的に loop になり、loop:false の設定記述を追加すると、いわゆる「次(Next)」と「前(Previous)」のボタン機能に不具合を発生するケースがある。