MovableTypeのスタイルシートをいじって、エントリーごとに囲みをつけるようなデザインを作りたいと思ったのですが、MTのデフォルトのテンプレートではなかなか難しい、と思いました。
background-imageの画像を組み合わせて使って、やってみたのですが、MovableTypeのデフォルトのテンプレートの微妙な違いがネックになってます。

一体コイツは何を囲みたいと言っているのか？と、お思いの方もいらっしゃると思います。
なかなか文章で説明するのは難しいので、画像で説明します。

こんな感じにエントリーを囲みたいわけです。
これは、スタイルシートのbackground-imageで画像を組み合わせて使って、エントリー･アーカイブの記事を囲んだものです。

できてるじゃん、と思われるかもしれませんが、できてないんです。
これをメインページやカテゴリーアーカイブ、日付アーカイブで見るとこのようになっております。

一番下の囲みが、見事にずれちゃってますね。

どうしてこういうことが起こるのか。
原因を探ってみました。

スタイルシートで、「囲み」にかかわっているクラスを色分けしてみました。

まずはエントリー･アーカイブ。

.entry-headerの下に.entry-content、さらにその下に.entry-footerがきています。
HTMLの該当部分のみ抜き出すと、こんな感じになっています。

<h3 class="entry-header"><$MTEntryTitle$></h3>

<div class="entry-content">
</div>

<p class="entry-footer">
</p>

HTMLではこういう構造になっています。

これを踏まえて、スタイルシートで、
.entry-headerに「囲み」の上の部分、
.entry-contentに「囲み」の本体部分、
.entry-footerに「囲み」の下の部分、
という感じに、それぞれのクラスのbackground-imageに画像を設定すると、きれいに囲えるわけです。

しかし、メインページやカテゴリーアーカイブ、日付アーカイブではそうは行きません。

.entry-headerの下に.entry-contentがありますが、
この.entry-contentの中に.entry-footerがあるんです。

該当部分のみ抜き出したHTMLで見るとこんな感じです。

<h3 class="entry-header"><$MTEntryTitle$></h3>
<div class="entry-content">

<p class="entry-footer">
</p>

</div>

このような違いがあるため、エントリーアーカイブではうまく行っても、メインページでは背景画像がずれちゃうわけです。

エントリーアーカイブのHTMLとメインページなどのHTMLで.entry-footerの位置がちょっとだけ違う、という些細な問題ですが、囲みができるかできないかという点においては、痛い問題だったりします。

どっちでもいいけど、なんとなくフィーリングで.entry-footerの位置を変えてます、という事だったらちょっぴり悲しいです。
エントリー・アーカイブの方のHTMLに統一しておいてくれたら、エントリーごとに囲うテンプレートができるんですが。

もちろん、自分でHTMLをいじればエントリーごとに背景画像で囲うようなテンプレートはできます。
ですが、StyleCatcherで使う事を前提とした場合、なるべくデフォルトのHTMLはいじりたくないのです。
スタイルシートのみで、デザインを変えたいのですよねえ・・・。

他に方法は無いものかとスタイルシート、HTMLを眺めていたら、
.entryというクラスを発見。
このクラスは、普段は何の指定もしていませんでした。
スタイルシートの/* page layout */の部分に出てこないからです。

早速、この.entryクラスに背景色をつけてみました。

エントリー・アーカイブ。




メインページ

おお、これは良い感じです。

.entryというクラス、目立ちませんが、実は使えるヤツかも。
背景画像とborderを組み合わせれば、かなりバリエーションもできそう。
いろいろ試して、これを利用した新たなデザインテンプレートを作ってみたいと思います。

＠2006年03月08日