＞ ＞ ＞ ＞ サムネイルリストから不要な右マージンを除去する

サムネイルリストから不要な右マージンを除去する

Posted at September 6,2010 2:55 AM
Tag：[Asset, Customize, Image, MovableType]

Movable Typeでサムネイルリストを横並びに表示する際、(X)HTMLマークアップに順不同リストを使って、次のようにサムネイルとサムネイルの間に余白を設定することがあると思います。

サムネイルリスト

余白を設定する方法のひとつとして、スタイルシートのliセレクタに右マージンの設定を行います。

ul {
    list-style: none;
}
li {
    margin-right: 10px;
    float: left;
}

ただし、この設定だけでは、一番最後のサムネイルの右側にもマージンが設定されてしまいます。

ということで、本エントリーでは一番最後のサムネイルの右側にマージンを設定しないカスタマイズを紹介します。CSSやjQueryでも実現可能かもしれませんが、テンプレートタグを駆使します。

サムネイルを5つ並べるサブテンプレートは、ブログ記事に追加したサムネイルを5つ並べるケースを想定しています。

<mt:SetVar name="counter" value="1" />
<mt:Entries>
  <mt:EntriesHeader>
<ul>
  </mt:EntriesHeader>
  <mt:EntryAssets type="image"> 
<mt:if name="counter" le="5">
<li><a href="<mt:AssetURL />"><img src="<mt:AssetThumbnailURL width="75" square="1" />" alt="<mt:AssetLabel />" title="<mt:AssetLabel />" /></a></li>
  <mt:SetVar name="counter" op="++" />
</mt:if>
  </mt:EntryAssets>
  <mt:EntriesFooter>
<ul>
  </mt:EntriesFooter
</mt:Entries>

修正方法は簡単で、まずサブテンプレートのli要素部分に、青色で示すMTIfタグを追加します。

<mt:SetVar name="counter" value="1" />
<mt:Entries>
  <mt:EntriesHeader>
<ul>
  </mt:EntriesHeader>
  <mt:EntryAssets type="image"> 
<mt:if name="counter" le="5">
<li<mt:if name="counter" eq="5"> class="end"</mt:if>><a href="<mt:AssetURL />"><img src="<mt:AssetThumbnailURL width="75" square="1" />" alt="<mt:AssetLabel />" title="<mt:AssetLabel />" /></a></li>
  <mt:SetVar name="counter" op="++" />
</mt:if>
  </mt:EntryAssets>
  <mt:EntriesFooter>
<ul>
  </mt:EntriesFooter
</mt:Entries>

そして、スタイルシートに次のセレクタを追加します。

li.end {
    margin-right: 0;
}

全体のソースコードは次のようになります。

<html>
<head>
<style type="text/css">
ul {
    list-style: none;
}
li {
    margin-right: 10px;
    float: left;
}
li.end {
    margin-right: 0;
}
</style>
</head>
<body>
<mt:SetVar name="counter" value="1" />
<mt:Entries>
  <mt:EntriesHeader>
<ul>
  </mt:EntriesHeader>
  <mt:EntryAssets type="image">
    <mt:if name="counter" le="5">
  <li<mt:if name="counter" eq="5"> class="end"</mt:if>><a href="<mt:AssetURL />"><img src="<mt:AssetThumbnailURL width="75" square="1" />" alt="<mt:AssetLabel />" title="<mt:AssetLabel />" /></a></li>
    <mt:SetVar name="counter" op="++" />
    </mt:if>
  </mt:EntryAssets>
  <mt:EntriesFooter>
</ul>
  </mt:EntriesFooter>
</mt:Entries>
</body>
</html>
Posted by yujiro   このページの先頭に戻る
関連記事
関連記事をもっと読む
トラックバックURL


コメントする
greeting

*必須

*必須（非表示）


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り（プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り）、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります（全て半角文字）