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)を参照下さい。

サブカテゴリまで表示できるパンくずリストの設置方法です。

最大２階層（トップ＞親カテゴリ＞子カテゴリ）までのカテゴリ表示ができます。

デザイン > テンプレート > アーカイブテンプレート > ブログ記事
を選択し、パンくずリストを設置する場所に下記を挿入。

<a href="<$MTBlogURL$>">TOP</a>
<MTParentCategories exclude_current="1">
<MTIfNonZero tag="MTCategoryCount"> &gt; <a href="<$MTCategoryArchiveLink$>"><MTCategoryLabel></a>
<MTElse>
&gt; <MTCategoryLabel>
</MTElse>
</MTIfNonZero>
</MTParentCategories>
&gt; <MTEntryCategories glue=", "><a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$>
</a></MTEntryCategories>
&gt; <$MTEntryTitle$>

デザイン > テンプレート > アーカイブテンプレート > ブログ記事リスト
を選択し、パンくずリストを設置する場所に下記を挿入。

<a href="<$MTBlogURL$>">TOP</a>
<MTHasParentCategory>
&gt;
<MTParentCategories exclude_current="1">
<MTIfNonZero tag="MTCategoryCount">
<a href="<$MTCategoryArchiveLink$>"><MTCategoryLabel></a>
<MTElse>
<MTCategoryLabel>
</MTElse>
</MTIfNonZero>
</MTParentCategories>
</MTHasParentCategory>
&gt; <$MTArchiveTitle$>

デザイン > テンプレート > インデックステンプレート > メインページ
を選択し、パンくずリストを設置する場所に下記を挿入。

<a href="<$MTBlogURL$>">TOP</a>

以上です。

再構築時にエラーがでるようであれば、下記を試してみて下さい。

デザイン > テンプレート > アーカイブテンプレート > ブログ記事リスト
を選択し、パンくずリストを設置する場所に下記を挿入。

<a href="<$MTBlogURL$>">TOP</a>
<MTHasNoParentCategory>
<MTElse>
&gt;
<MTParentCategories exclude_current="1">
<MTIfNonZero tag="MTCategoryCount">
<a href="<$MTCategoryArchiveLink$>"><MTCategoryLabel></a>
<MTElse>
<MTCategoryLabel>
</MTElse>
</MTIfNonZero>
</MTParentCategories>
</MTElse>
</MTHasNoParentCategory>
&gt; <$MTArchiveTitle$>

これはMT4でMTHasParentCategoryを使うとエラーが出るというバグの回避策として<MTHasNoParentCategory><MTElse>を用いたものです。

ちなみに、MovableType4.01Betaでは修正済みのようです。

当サイトではバージョンアップ済みにも関わらずエラーが出てしまいます。
何で？？？（苦笑）