20050730 1824: [MT]モブログのサムネイルを表示
時々みかける、モブログのサムネイル表示。私もやりたいなぁと思って色々試行錯誤をしていました。
まずやったのは、
「写真以外のものを、スタイルシートで表示させない」
かなり強引なやりくちです（汗
見た目は成功しました。しかし、ソースを見たら大変なことになっておりました。そりゃそうだ、ブラウザに表示させないだけで、ソースはまるっと存在するわけですから・・・
そして、写真に記事へのリンクを貼れないという、ちょっとサムネイルとしてはどうなんだということが起きておりました。
で、何かいいプラグインはないかなぁと思っていたら、ありました。
V.J.Catkick@: 最初の img タグ抽出プラグイン
ブログ本文の中の、最初にでてくるimgタグを抽出してくれるプラグインです。
手順はカンタン。pluginsホルダに、ダウンロードしてきたプラグインをほりこみ、
<MTEntries>
<$MTEntryBodyForPhotolog$>
</MTEntries>
というタグで写真を表示させるだけです。
V.J.Catkick さんのところでは、imgの幅とかをJavaスクリプトで追記表示させるようにしていましたが、私の場合、本文ですでにwidth指定をしている写真などもあって、Javascriptでwidth指定をしてもきかない場合もあったので、スタイルシートで表示を制御する方式をとっております。
以下、私のサイドバーのソース
<MTEntries category="モブログ" lastn="4">
<div class="moblog">
<h3><a href="<$MTEntryPermalink$>"><$MTEntryDate format="%x"$><br>
<$MTEntryTitle$></a></h3>
<a href="<$MTEntryPermalink$>"><$MTEntryBodyForPhotolog$></a>
</div>
</MTEntries>
「moblog」というクラス指定で、サムネイルのときだけ写真を小さく表示するようにしています。
写真のサイズを指定するスタイルシートはこんなかんじ
.moblog img{
background-color: #FFFFFF;
padding: 5px;
border: 1px solid #CCCCCC;
width: 80px; height: 60px;
}
私の場合は白い余白をつけて、プリント風に見せるようにしていて、なおかつ段組にして並べる都合上、写真の比率無視でサイズを揃えているので、こんな感じになっておりますが、ただサムネイルとして表示する場合で、写真の縦横比率を変えない場合だったら
.moblog img{
border-width:0px; /* 枠線を表示させない*/
width: 80px; /* 写真幅指定 ここの数字はお好みですな*/
}
こんなかんじかな。
2005年07月30日 18:24
