サムネイルリストから不要な右マージンを除去する
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 このページの先頭に戻る
- Movable Typeで特定の拡張子のファイルをアップロードする方法
- 特定のアイテムのみをブログ記事に表示する
- Movable Typeのブログ記事で未使用のアイテム一覧を表示する（本文未挿入版）
- Movable Typeの管理サイトでFTPが使えないときにファイルをアップロードする裏ワザ
- Movable Typeのブログ記事で未使用のアイテム一覧を表示する
- Movable Type 5 でスライドショーを実現する（その2：応用）
- MTAssetThumbnailLinkタグとMTAssetThumbnailURLタグのsquareモディファイアの動作
- Movable Type のブログ記事に表示する画像のサイズを制御する
- Movable Type + Windows で日本語ファイル名を扱う方法
- Movable Type 4 におけるアイテムのアップロード動作（その2）
- Movable Type 4 におけるアイテムのアップロード動作（その1）
- ブログ記事に挿入したアイテムだけのサムネイル画像一覧を表示する（その2）
- ブログ記事に挿入したアイテムだけのサムネイル画像一覧を表示する
トラックバックURL
コメントする
greeting
