top

サイドバーのサムネイルを全部正方形にする square="1"編 (MT4.25~)

わざわざ記事にするほどの内容ではないのですが(カスタマイズというより基本の使い方なので)、以前サイドバーのサムネイルを全部正方形にする (MT4用)という記事を書いたので、そのフォロー用ということでエントリしました。

MT4になってしばらくしてからMTAssetThumbnailURL/MTAssetThumbnailLinkにsquare="1"というモディファイアが出来ました。これをつけると複雑なカスタマイズをしなくても簡単にサムネイルを正方形に出来る…はずだったんですが、ダイナミックで上手く動作しなかったため(静的でも一部動作がおかしかった)、このモディファイアがまともに使えるようになったのは4.25になってからでした。

<$MTAssetThumbnailURL width="70" square="1"$>
<$MTAssetThumbnailLink width="70" square="1"$>

ということで、以下は4.25~向けですが、具体例としてサムネイルリストからブログ記事(エントリー)にリンクを張る(2) MT4.1完成版のタグをsquare="1"を使って書き直したものを載せておきます。

<MTIfNonZero tag="AssetCount">
<div class="widget-recent-assets widget">
<h3 class="widget-header">Photos</h3>
<div class="widget-content">
<ul class="widget-list">
<MTSetvar name="imgcount" value="0">
<MTEntries lastn="0">
<MTEntryAssets type="image" lastn="1">
<MTSetVar name="imgcount" op="++">
<MTIf name="imgcount" le="10">
<li class="item">
<a class="asset-image" href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>">
<img src="<$MTAssetThumbnailURL height="70" square="1"$>" class="asset-img-thumb" alt="<$MTEntryTitle$>" title="<$MTEntryTitle$>" />
</a></li>
</MTIf>
</MTEntryAssets>
</MTEntries>
</ul>
</div>
</div>
</MTIfNonZero>

ずいぶんサッパリしました。^^ この方法ならcssの追加も要らないので簡単です。4.25にアップした方は試してみられるといいかと。

■cssカット版とsquare="1"版との違い
これまでの正方形にするカスタマイズは、実際のサムネイルを正方形にしているのではなく、長方形のサムネイルをcssを使って「見た目カット」していたものです。そのため、指定したサイズからはみ出した分がカットされるので、下もしくは右をカットした形になります。
一方、square="1"では長方形の真ん中を切り取ってサムネイルを作ります。そのため、上下もしくは左右がカットされる形になり、これまでのカスタマイズとは出来るサムネイルが少し違ってきます。以下に比較を載せてみました。

090325_1.jpg

左がcssカット版です。これまでのカスタマイズで行ってきた正方形化です。下部がカットされているのが分かると思います。
右がsquare="1"版です。ご覧のように上下がカットされるので、灯台が上から映らず、真ん中部分だけになっています。

090325_2.jpg

こちらは横長画像です。左がcss版、右がsquare="1"版です。正方形になる範囲が違っているのが分かると思います。画像によっては真ん中ではない方がいい、ということもあるかもしれないので、好みの別れるところですね。

端をカットか、中央をカットか。好みに合わせて使い分けるのも面白いのではと思います。

 

トラックバックURL

トラックバックされる際にはこの記事へのリンクをお願い致します

トラックバックの一覧

トラックバック 記事写真のサムネイル表示、サイドバーの背景色。  »» 2009年9月22日 23:09
今日は二つ目のエントリー。サイドバーにサムネイルを表示させたのと、オマケで背景色...

コメントを投稿

 


 <注意>
 ご利用のブラウザ、設定ではコメントのプレビューおよび投稿はご利用になれません。
 コメント投稿の際はお手数ですがjavascriptをオンにして下さい。
 *javascriptオフのまま投稿ボタンを押すと送信内容が消えますのでご注意下さい。