ハコラボ: トップページに最新画像を表示（その２）

note

トップ »note » トップページに最新画像を表示（その２）

サイトの運営記や雑記はこちら。

トップページに最新画像を表示（その２）

　先日、トップページに最新画像を表示するカスタマイズを行いましたが、それぞれのカテゴリのトップ（というかウチの場合正確には他ブログなのですが）にも最新画像表示を行う事にしました。（これもダンナ希望カスタマイズ）
参考サイト様は先日と同じく藤本様のサイトです。

■エントリー内の画像をリストアップするプラグイン(その5)　（The blog of H.Fujimoto）

カテゴリトップにも画像を表示先日と違う点は、画像を複数アップするところ。
始めはリスト表示にして、CSSでもって制御しようかと思いましたが、画像サイズがバラバラなので、うまくいきませんというか、美しくない・・・・。（ムリヤリサイズを指定して同サイズにすると、画像が酷く歪んでしまいますし）
そこで、藤本様のサイトの表組みによる画像表示を参考にカスタマイズする事にしました。
当サイトでは横幅のみ指定にして、高さは比率を固定して表示。
画像クリックで該当エントリーへリンクにし、表示件数は最新３件で１行で表示にしました。
記事の説明等は一切なしで、シンプルに画像のみの表示になっています。
あとはaltにはカテゴリー名が表示されるようになってます。
CSSでborder等のスタイルを指定してできあがり。やはり画像が表示されるとビジュアルがにぎわいます。今回はOtherBlogを使用した箇所もありましたが、これも無事動作しています。
ちなみ画像部分のソースはこんな感じ。

<p class="pickupimage">▼ガンプラ製作レポートの最新画像▼</p>
<table class="newimage" cellspacing="0" cellpadding="0" frame="box" rules="cols" bordercolor="#cccccc">
<MTEntryImages img_lastn="3" columns="3">
<MTEntryImageRowHeader><tr></MTEntryImageRowHeader>
<td>
<MTEntryImageIfEmptyCell>
 
<MTElse>
<table>
<tr>
<td><a href="<$MTEntryPermalink$>"><img src="<$MTEntryImageSrc$>" width="<$MTEntryImageWidth cell_size="200,270"$>" height="<$MTEntryImageHeight cell_size="200,270"$>" alt="<$MTEntryCategory cutfirstchar="3"$>" /></a></td>
</tr>
</table>
</MTElse>
</MTEntryImageIfEmptyCell>
</td>
<MTEntryImageRowFooter></tr></MTEntryImageRowFooter>
</MTEntryImages>
</table>