ブログ内の画像を表組み（EntryImagesプラグイン）

以前とりあげたEntryImagesプラグインでエントリー内の画像を表組みで表示する方法です。

実際に設置した場合はこんな感じになります。（ThickBoxと組み合わせて使ってます。） http://wh.nosusume.com/photo.html

プラグインの導入は前のエントリーを参照して下さい。

手順は下記のとおりです。

１．表示用テンプレートを作成

２．画像を表示する位置に下記を挿入

<table class="image-list" cellspacing="0" cellpadding="0">
<MTEntryImages img_lastn="999" columns="3">
   <MTEntryImageRowHeader><tr></MTEntryImageRowHeader>
      <td>
      <MTEntryImageIfEmptyCell>
      &nbsp;
      <MTElse>
         <table>
            <tr>
               <td bgcolor="#F3F3F3" class="image-list-item"><a href="<$MTEntryImageSrc regex="s/(.*)-thumb\.(.*)/$1.$2/"$ >" title="<$MTEntryTitle$>" class="thickbox"><img src="<$MTEntryImageSrc$>" width="<$MTEntryImageWidth cell_size="120,90"$>" height="<$MTEntryImageHeight cell_size="120,90"$>" alt="<$MTEntryImageAlt$>" /></a></td>
            </tr>
         </table>
      </MTElse>
      </MTEntryImageIfEmptyCell>
      </td>
   <MTEntryImageRowFooter></tr></MTEntryImageRowFooter>
</MTEntryImages>
</table>

上の例は当サイトの設置例に基づいたものです。

・エントリー内の画像を３列で表示
・画像をクリックするとThickBoxで表示
・写真のキャプションとしてエントリーのタイトルを表示

３．スタイルシートを追加・再構築

table.image-list {
    width : 390px;
    margin-left : auto;
    margin-right : auto;
    margin-top : 0px;
    padding : 0px;
}
table.image-list tr td {
    width : 130px;
    vertical-align : top;
}
table.image-list tr td table {
    margin-bottom : 10px;
}
table.image-list tr td table tr td.image-list-item {
    height : 90px;
    text-align : center;
    vertical-align : middle;
    padding : 0px;
    margin : 0px;
}
table.image-list tr td table tr td.image-list-caption {
    text-align : left;
    vertical-align : top;
    padding : 0px;
    margin : 0px;
}