TopMovable Typeカスタマイズアイテム > 2010年9月
2010年9月 6日

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

September 6,2010 2:55 AM
Tag:[, , , ]
Permalink

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>
Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3