MTでフォトギャラリーを作成する

アップロードした写真を使ってフォトギャラリーを作りたい場合のテンプレートソースは「Movable Type 4.x 本格的CMSサイトを構築するためのMTスーパーテクニック」(以下、書籍)に書かれている通りです。テンプレートソースは、「デザイン»テンプレート」から公開しているテンプレートの表示したい部分に埋め込むだけで表示されると思います。

このソースで写真が見えるために、まずは、メニューにある「一覧»アイテム」で開くページに写真があるか確認しておきます。

アイテムがない場合は、メニューから「新規作成»ファイルアップロード」で開くページから写真をアップロードします。

アイテムがある場合は、このテンプレートソースを公開しているテンプレートの表示したい部分に埋め込むだけでギャラリーができます(今回は、「デザイン»テンプレート」からメインページの１行目にこのテンプレートソースを入れています)。

テンプレートソースの確認ボタンを押すと、プレビューされ反映されているかわかります。問題がなければ、「保存と再構築」ボタンを押し、設定を公開します。書籍に書かれているソースをそのまま利用すると、以下のように表示され、アップロードした写真が正しくリスト化されていることが確認できます。

出力されたHTMLソースはこのようになります。http://mydomains/path/to/MT-4.22-ja/blogs/は公開しているブログのURLとしています。

写真の縦横比を1:1(正方形)にしてサムネイルの大きさを揃える

書籍には、写真の縦横比を1:1(正方形)にしてサムネイルの大きさを揃えたい時、squareモディファイアを指定することで不要な部分を自動的にトリミング(切り抜き)してくれるとあります。

しかし、MT-4.22-jaで試しましたが、正方形になるようなHTMLを出力してくれませんでした。本家リファレンスにも1:1で出力とありますから、もしかすると、私の環境だけかもしれません。もし、正方形で出力されない場合、以下のプラグインを追加してみましょう。

zipファイルを解凍すると、pluginsフォルダが出てきますから、その中にある「AssetThumbnailPlus」を下図のようにMTのpluginsフォルダに入れます。これだけで、自動的に不要な部分をトリミングしてくれるようになります。

テンプレートの編集で確認ボタンを押してみると、以下のように表示され、正方形になっていることを確認できます(ただし、不要な部分をトリミングはしてくれないようです)。

FlickrスタイルをCSSで実現する

Flickrでは、写真(imgタグ)の上にレイアウト要素(pタグ)を入れて、ポラロイド写真風に見せています。最も簡単にFlickrを実現するHTMLソースは以下のようになります(写真は、上記のFlickrのを使っています。勝手に使っているのであまりよくありませんが＾＾；)

<p style="text-indent:0;border:1px solid #DDDDDD;display:inline;float:left;margin:8px;padding:4px 4px 12px;">
    <img src="flickr/1523200977_ae5c8c3128_s.jpg" /></p>
<p style="text-indent:0;border:1px solid #DDDDDD;display:inline;float:left;margin:8px;padding:4px 4px 12px;">
    <img src="flickr/1524130842_d835f00fac_s.jpg" /></p>
<p style="text-indent:0;border:1px solid #DDDDDD;display:inline;float:left;margin:8px;padding:4px 4px 12px;">
    <img src="flickr/1524139262_ca92944a1e_s.jpg" /></p>

この場合、以下のように見えます(ブラウザにより表示が異なる可能性があります)。

赤の太字で書いてある部分がCSSになります。通常は、CSSファイルに分離して記述する部分です。

MTでは、「デザイン»テンプレート」からスタイルシートを選択しこれを記述することになるでしょう。書籍に記述されているテンプレートソースを使うと、ul要素にクラスimageListが定義され、その中にli要素が列挙されます。さらに、li要素にimg要素が入ります。HTMLを簡単に表すと以下のようになります。

つまり、img要素のすぐ上にあるli要素に対して、先のスタイルを適用してあげれば、Flickrと同様のフォトギャラリーが実現できることがわかります。

<ul style="list-style-type:none;">
<li style="text-indent:0;border:1px solid #DDDDDD;display:inline;float:left;margin:8px;padding:4px 4px 12px;">
    <img src="flickr/1523200977_ae5c8c3128_s.jpg" /></li>
<li style="text-indent:0;border:1px solid #DDDDDD;display:inline;float:left;margin:8px;padding:4px 4px 12px;">
    <img src="flickr/1524130842_d835f00fac_s.jpg" /></li>
<li style="text-indent:0;border:1px solid #DDDDDD;display:inline;float:left;margin:8px;padding:4px 4px 12px;">
    <img src="flickr/1524139262_ca92944a1e_s.jpg" /></li>
</ul>

このスタイルでもっとも重要なのは、floatプロパティです。通常は、上から順番に配置されるli要素を左に回り込んで表示してくれます。したがって、横に配置されたギャラリーができるということです。スタイル設定した場合の見え方のイメージを以下に示します。

CSSファイルにスタイルを記述する

これまでは、HTMLの要素にCSSを直接記述していましたが、通常は、スタイルシート(外部ファイル)に記述してスタイルを適用させます。テンプレートソースで得られるHTMLは、クラスimageListのul要素の中にli要素があり、その中にimg要素があるという構造なので、スタイルシートの記述としては、以下のようになるでしょう。

別の見方をすれば、クラスimageListのul要素の中にimg要素があるとも見えますから、以下のようにしても同様の効果が期待できます。

この辺りは、あらかじめHTMLの構造を決めておかなければ、後々スタイルを変更したい場合などで困ることになると思います。例えば、フォトギャラリーの写真には、全てfoto-galleryというクラスをつけておくと決めておけば、以下のようになります。

CSSプロパティ	設定値	意味
float	left, right	leftを指定した要素の後に続く内容を左に回り込ませます。rightは右に回り込ませます。
text-indent	1px,1emなど	文章の段落などの一行目のインデント幅を指定します。今回は、p要素にtext-indent:1em;を設定していたので、それを上書きする意味で付けています。

この場合、写真を配置すべき要素(前はul要素)は何でもかまいませんから、下手をするとレイアウトが崩れてしまう恐れもありますので気をつけてください。

まとめ

「書籍のテンプレートソースをどこに入れれば表示されるか確認 » 正方形のサムネイル表示するにはどうすればいいか » 縦ではなく横に配置する方法(フォトギャラリーっぽく)はどうすればいいか » CSSを記述する」という内容です。書籍は簡単に読んだだけですから、MTがCSSの記述までしてくれているのかもしれません。それをしてくれないのであれば、自分でCSSを書く必要があります。

何かわからない点がありましたら、加筆修正しますので、よろしくお願い致します。

小粋空間のスタイル適用はやっておりませんが、今回のフォトギャラリーのテンプレートをどこにいれればいいかという問題に対しては、おそらく関係ない(分離されているため)と考えられるので、割愛しています。

目次

写真のフォトギャラリー

写真の縦横比を1:1(正方形)にしてサムネイルの大きさを揃える

FlickrスタイルをCSSで実現する

CSSファイルにスタイルを記述する

まとめ