モブログ記事テンプレートの変更

モブログを使って投稿したときのレイアウトを変更しました。

• 例1
• 例2

このブログのモブログは moblog mail gateway を使わせていただいています。まずは、ここの設定で記事の投稿フォーマット(template)を

<div class=\"moblog\">%(imagecontent)s\n%(caption)s</div><br clear=\"all\" />

にしました。これで、投稿された記事が moblog class として扱うことが出来るようになります。また、テキストの回りこみをすることを考慮して、最後に <br> タグの clear 属性で元に戻します。

次はスタイルシートです。これは Movable Type の Stylesheet テンプレートを編集します。テンプレートの最後に、

.moblog img {
background: #fff;
border-top: 1px solid #ccc;
border-right: 1px solid #666;
border-bottom: 1px solid #666;
border-left: 1px solid #ccc;
float: left;
margin: 0 1em 1em 0;
padding: 10px;
}

を追加しました。これで、moblog class の img タグにこのスタイルシートが適用されます(参考: インターネットマガジン2004年8月号)。写真の周りに白い縁取りになっているんですが、IE だと見れないみたいです。まあ、一部のブラウザでの見栄えだけの問題なので、無視しましょう。:-)