MovableType 3.0 Stylesheet Guide
いよいよ新ヴァージョンが登場するMovableType 3.0。スタイルシートのカスタマイズ方法も変わっています。このエントリーでは新しいシステムを先取りして、そのスタイルシートガイドを公開。
デフォルト
これがMovableType 3.0のデフォルトデザイン。TypePad（MovableTypeベースのblogホスティングサービス）を思わせるデザインは初期状態でもかなりカワイイものになっています。それでは順番に見ていきましょう。
#container
一番下敷きになっているのが「#container」という領域。スタイルシートの「body」タグで背景色を指定した場合、blogが書き込まれる領域を囲います。この#containerの中は、3つに分かれています。
各領域を見ていきましょう。
#banner
「#banner」領域にはblogのタイトルと概要が入ります。「#banner h1」がblogのタイトル文字、「#banner h2」がblogの説明の文字に対応します。MovableType 3.0では、既存のHTMLタグを出来る限り再利用していくというルールになっているようです。
#center
blogの文章が流し込まれるのが「#center」領域。この中に「.content」が含まれます。「.content h2」は日付の見出し、「.content h3」はエントリーのタイトルに対応します。また「p.posted」は投稿者・時間・comment・trackbackを表示するため部分に対応します。
#right
右側のメニューに当たるのが「#right」。ここには「.sidebar」が含まれています。「.sidebar h2」が、メニューの見出し、「.link-note」はRSSへのリンクや検索ボックスなどのテキストに対応しています。そしてアーカイブやエントリーのリストには、「ul」タグが使われるようになりました。「ul」タグと「li」タグによって、リストの表示方法を設定出来ます。
このあたりをつかんでおけば、カスタマイズしていく事が出来ます。また、ブラッシュアップしていきたいと思います。
2004年06月14日 03:11
Trackback Pings
このエントリーのトラックバックURL:
http://blog.sfc.keio.ac.jp/MT3/mt-tb.cgi/9
このリストは、次のエントリーを参照しています: MovableType 3.0 Stylesheet Guide: