MovableTypeのススメ

今日はEntryImagesプラグインの補足です。

エントリー内の画像をリスト表示する場合、表示したくない画像まで入ると困りますよね。 例えば、アフェリエイトの商品画像やバナーなど。

EntryImagesプラグインはその辺もよくできていてプラグインの設定で簡単に表示したくない画像を除外することが可能です。作者様＞すばらしいです。

設定方法は下記のとおりです。

１．管理画面のメニューから 設定＞プラグイン を選択

２．プラグイン一覧からEntryImagesを選択、設定タブをクリック

３．除外するイメージのURLに画像のURLを入力



上記はURLに「amazon.com」を含む画像をすべて除外する場合の設定です。 このように正規表現で指定することもできるんです。便利ですね。 もちろん直接画像のURLを指定してもOKです。

４．変更を保存し、再構築

以上です。

さらに詳しい情報はプラグイン配布元のエントリー内の画像をリストアップするプラグイン(その4)を参照下さい。

以前とりあげた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;
}

以上です。

詳しくはプラグイン配布元のエントリー内の画像をリストアップするプラグイン(その5)を参照下さい。