カテゴリーごとのデザイン変更
MovableTypeでカテゴリーごとのデザインを変えられないだろうか？前々から、思っていたので、良い機会！？なのでとりあえず、タイトルの前にカテゴリーごとの画像をくっつけようと実験しました。
この段階では、あくまで自分のメモとして記事を書いているので、まだあまり参考にしないで下さい（笑）
注）それでも試すんだーという方はソースのバックアップをとった上で、あくまで自己責任にてお願いします。
とりあえずは、カテゴリー「moblog」「MaxMSP_Jiter」「iroiro」です。
まず、MainIndexの編集です。現状ではトップページのみの変更ということで、他のテンプレートにも同じようにすれば反映されると予測。
以下の
の”下に”次の一文をいれる
<div class="blog">
<MTEntries lastn="10">
<div class="<$MTEntryCategory$>">
こうすると、div classの名前がカテゴリー名になります。ここで、問題だったのが日本語だと駄目だろうという点と、/とかはいってるとだめでした。（例 Max/MSP）
それで、当然divをいれたのだから閉じるために
以下の
</MTEntries>
の一文の”上に”次の一文をいれる
</div>
つぎにスタイルシートの変更ですが、その前にファイルのアップロードで画像をアップしておきます。
以下の例ではmoblog2.gifというファイルです。
それで、スタイルシートファイルのしかるべきころに！？以下のようなものを記述します。
.moblog h3{
font-family: palatino, georgia, times new roman, serif;
font-size: medium;
color: #666666;
height: 30px;
background: url(archives/icons/moblog2.gif) no-repeat;
background-position: 0% 50%;
padding-left: 35px;
text-shadow: #666666 2px 2px 1.3px;
}
ちなみに、画像のサイズが30pxなので、padding-leftで35pxにしてかぶらないようになっています。
ここで手こずったのは画像のサイズです。最初は画像のサイズが大きすぎてバランスが悪く、結局３０ｐｘ×３０ｐｘにしてheightを３０ｐｘとわざわざ指定して解決です。でも文字の位置を画像の真ん中にもって行きたかったのですが、この方法では無理のようです。
とこのように今回はタイトルの前に画像をはっただけですが、応用すればタイトルだけでなくカテゴリイーごとに、本文の色から大きさ、枠の色、背景の色と個別に設定できるかと思います。
次は、このような方法をTypePadで実践してみたいと思います。日本語のカテゴリーの時のために呼び出すのはカテゴリーIDにしたいけど、それだといろいろと問題があったりと・・・問題山積みですがトライです！
| | 
| | 
コメント