ハコラボ.com

画像表示方法を変更


トップページの下部のinfoの記事一覧とカテゴリーページ(infoとかnoteとか)のエントリー表示は本文ではなくて概要(抜粋)を表示させていて、画像も表示させたかったので、概要に画像URLを貼り付けていたのですが、本文と同じサイズの画像が表示されるので、一覧になったときに画像サイズがバラバラで美しくないし、大きい画像の場合、ページがとても縦長に。見にくいなぁ、と思っていたけど調べるのが面倒でほっときました(^ -^;)
しかしちょっと事情が変わって、とうとうこのカスタマイズをやらねば、という訳で、地味な変更を施してみましたので、メモ。


今回利用のプラグインはMTCollectプラグイン


早速MTにアップロードしてソースを変更してみました。トップとカテゴリページでは若干ソースは違うけど、大体以下のような感じのソース。


<MTEntries>
<MTCollect tags="img">
<MTCollectThis show="0"><$MTEntryBody$></MTCollectThis>
<MTIfCollected tags="img"><MTCollected tags="img" lastn="1">
<a href="<$MTEntryLink$>"><img width="200" border="0" src="<$MTCollectedAttr attr="src"$>" /></a>
</MTCollected>
</MTIfCollected>
</MTCollect>
<$MTEntryExcerpt$>
</MTEntries>

画像の表示方法を変えてみる幅のみを揃えるためwidthのみ指定。今回は200pxにしてます。画像のリンク先はエントリーへ。上記以外の追加事項としては、当サイトでは画像を左に寄せたかったので、class指定を追加してCSSでfloat: leftを追記。あと、ウチはphp化してるんで、概要部分も本当はincludeしてますが、大体ってコトで(笑)

コメントする

コメントが表示されるために承認が必要になることがあります。
承認されるまでコメントは表示されませんのでしばらくお待ちください。
メールアドレスとURLは任意ですが、お名前にはURLがリンクされますので是非貴サイトを入力下さい。

※スパム防止の為セキュリティーコードを入力して下さい。プレビューした場合、改めて投稿前に入力が必要になりますのでご了承下さい。

トラックバック(0件)

トラックバックURL:http://hacolabo.com/cgi/mt/mt-tb.cgi/66

▲このページのトップに戻る

サイト内検索

おすすめ!
MovableType脱初心者にオススメな一冊!