Movable Type 2.6 CSS デザイン

iandeth で使っている style-site.css について。
いろんなサイトで Movable Type のデザインテンプレートが紹介／提供されているけれど、やはりここは我流自作するでしょ.... と、 style-site.css と格闘した結果、それなりにCSSの構成が整理できたのでご紹介します。

まず最初にコメント付きの style-site.css をさくっと公開： @charset "EUC-JP"; /* ################################################################# ## Main Index.html ################################################################# */ /* HTML BODY */ BODY { BACKGROUND: #91AB36; MARGIN: 0px; } /* それぞれヘッダタグの余計なマージン設定を除去 */ H1 { MARGIN: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; } H2 { MARGIN: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; } H3 { MARGIN: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; } /* コンテンツ全体の格納箱 */ #container { width: 760px; BACKGROUND: #FFFFFF; border-style: solid; border-color: #FFFFFF; border-top-width: 5px; border-right-width: 5px; border-bottom-width: 5px; border-left-width: 5px; margin-left: auto; margin-right: auto; } /* ヘッダーの格納箱 */ #banner { background-color: #6F5E31; padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; border-color: #000000; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; } /* ヘッダー : サイト名 */ #banner A { FONT-FAMILY: georgia, verdana, arial, sans-serif; FONT-WEIGHT: bold; FONT-SIZE: x-large; TEXT-DECORATION: none; COLOR: #FFFFFF; } /* ヘッダー : 詳細コメント */ .description { FONT-FAMILY: verdana, arial, sans-serif; FONT-WEIGHT: bold; FONT-SIZE: x-small; TEXT-DECORATION: none; COLOR: #FFFFFF; } /* エントリコンテンツの格納箱 outer */ #content { width: 560px; float: left; border-style: solid; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; } /* エントリコンテンツの格納箱 inner */ .blog { padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 0px; } /* エントリコンテンツ中のリンク文字列 */ .blog A { TEXT-DECORATION: none; color : #A46702; } .blog A:hover { color : #E79203; } /* 各エントリの日付帯 */ .date { FONT-FAMILY: verdana, arial, sans-serif; FONT-WEIGHT: normal; FONT-SIZE: x-small; LETTER-SPACING: 0.1em; COLOR: #FFFFFF; margin-bottom: 5px; margin-top: 0px; margin-right: 0px; margin-left: 0px; padding-top: 2px; padding-right: 2px; padding-bottom: 3px; padding-left: 5px; border-style: solid; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-color: #CCCCCC; background: #91AB36; } /* 各エントリのタイトル */ .title { FONT-FAMILY: "ヒラギノ角ゴ Pro W3", "Osaka−等幅", "ＭＳ ゴシック", verdena; FONT-WEIGHT: bold; FONT-SIZE: large; COLOR: #b57202; } /* 各エントリの格納箱 */ .blogbody { BACKGROUND: #FFFFFF; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; margin-bottom: 5px; margin-top: 0px; margin-right: 0px; margin-left: 0px; border-color: #CCCCCC; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; } /* 各エントリの本文 */ p { font-family: "ヒラギノ角ゴ Pro W3", "Osaka−等幅", "ＭＳ ゴシック", verdena; FONT-WEIGHT: normal; FONT-SIZE: x-small; COLOR: #000000; LINE-HEIGHT: 140%; margin-bottom: 10px; margin-top: 10px; margin-right: 10px; margin-left: 10px; } /* 各エントリの本文内 特殊体裁１*/ pre { font-family: Monaco, "ヒラギノ角ゴ Pro W3", "Osaka−等幅", "ＭＳ ゴシック", verdena; FONT-WEIGHT: normal; FONT-SIZE: x-small; COLOR: #000000; LINE-HEIGHT: 140%; margin-bottom: 10px; margin-top: 10px; margin-right: 20px; margin-left: 20px; background: #DDDDDD; PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; PADDING-TOP: 10px; border-style: solid; border-color: #BBBBBB; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; } /* 各エントリの本文内 引用文*/ blockquote { font-family: Monaco, "ヒラギノ角ゴ Pro W3", "Osaka−等幅", "ＭＳ ゴシック", verdena; FONT-WEIGHT: normal; FONT-SIZE: x-small; COLOR: #000000; LINE-HEIGHT: 140%; margin-bottom: 5px; margin-top: 5px; margin-right: 20px; margin-left: 20px; background: #FCE083; PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px; } /* TEXTAREA */ textarea { font-family: Monaco, "ヒラギノ角ゴ Pro W3", "Osaka−等幅", "ＭＳ ゴシック", verdena; color: #333; background-color: #FFF; font-size: x-small; width: 95%; } /* 各エントリの"続きを読む"リンク文字列 */ .extended{ FONT-FAMILY: verdana, arial, sans-serif; FONT-SIZE: x-small; FONT-WEIGHT: bold; } /* 各エントリの投稿者情報他 */ .posted { FONT-FAMILY: verdana, arial, sans-serif; FONT-SIZE: x-small; TEXT-ALIGN: right; font-weight: normal; COLOR: #000000; margin-bottom: 0px; margin-top: 10px; margin-right: 0px; margin-left: 0px; } /* サブコンテンツの格納箱 */ #links { background-color: #FFFFFF; border-style: solid; border-color: #91AB36; border-top-width: 0px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; float: left; width: 198px; } /* サブコンテンツのリンク文字列 */ #links A { TEXT-DECORATION: none; color : #A46702; } #links A:hover { color : #E79203; } /* カレンダーの格納箱 兼 カレンダー文字体裁 */ .calendar { FONT-WEIGHT: normal; FONT-SIZE: x-small; BACKGROUND: #229966; COLOR: #FFFFFF; FONT-FAMILY: georgia, verdana, arial, sans-serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } /* カレンダーのヘッダー */ .calendarhead { PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; PADDING-TOP: 12px; FONT-WEIGHT: bold; FONT-SIZE: x-small; BACKGROUND: #ee9933; COLOR: #FFFFFF; FONT-FAMILY: georgia, verdana, arial, sans-serif; } /* 各サブコンテンツのヘッダー */ .sidetitle { PADDING-RIGHT: 2px; PADDING-LEFT: 2px; PADDING-BOTTOM: 3px; PADDING-TOP: 2px; margin-bottom: 0px; margin-top: 5px; margin-right: 5px; margin-left: 5px; FONT-WEIGHT: normal; FONT-SIZE: xx-small; BACKGROUND: #91AB36; COLOR: #FFFFFF; border-style: solid; border-color: #000000; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; FONT-FAMILY: verdana, arial, sans-serif; TEXT-ALIGN: center; LETTER-SPACING: 0.1em; } /* 各サブコンテンツの中身 */ .side { FONT-FAMILY: verdana, arial, sans-serif; LINE-HEIGHT: 160%; PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px; margin-bottom: 0px; margin-top: 0px; margin-right: 5px; margin-left: 5px; FONT-WEIGHT: normal; FONT-SIZE: xx-small; COLOR: #000000; LETTER-SPACING: 0.1em; } /* SYNDICATE THIS SITE */ .syndicate { FONT-FAMILY: verdana, arial, sans-serif; TEXT-ALIGN: center; PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px; margin-bottom: 0px; margin-top: 10px; margin-right: 10px; margin-left: 10px; FONT-WEIGHT: normal; FONT-SIZE: xx-small; BACKGROUND: #FFFFFF; COLOR: #000000; text-transform: lowercase; LETTER-SPACING: 0.1em; } /* POWERED BY */ .powered { FONT-FAMILY: verdana, arial, sans-serif; TEXT-ALIGN: center; PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px; margin-bottom: 10px; margin-top: 5px; margin-right: 10px; margin-left: 10px; FONT-WEIGHT: normal; FONT-SIZE: 8px; BACKGROUND: #FFFFFF; COLOR: #000000; text-transform: uppercase; LETTER-SPACING: 0.1em; } /* ################################################################# ## Category Archive / Data-Based Archive 他 ################################################################# */ /* ページ送り制御部分 */ #menu { margin-bottom: 5px; margin-top: 10px; margin-right: 0px; margin-left: 0px; FONT-FAMILY: verdana, arial, sans-serif; FONT-WEIGHT: normal; FONT-SIZE: x-small; LETTER-SPACING: 0.1em; text-align: center; } /* コメント部分のヘッダー帯 */ .comments-head { FONT-FAMILY: verdana, arial, sans-serif; FONT-WEIGHT: normal; FONT-SIZE: x-small; LETTER-SPACING: 0.1em; COLOR: #FFFFFF; margin-bottom: 5px; margin-top: 10px; margin-right: 0px; margin-left: 0px; padding-top: 2px; padding-right: 2px; padding-bottom: 3px; padding-left: 5px; border-style: solid; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-color: #CCCCCC; background: #91AB36; } /* 各コメントの本文 */ .comments-body { FONT-FAMILY: "ヒラギノ角ゴ Pro W3", "Osaka−等幅", "ＭＳ ゴシック", verdena; FONT-SIZE: x-small; Line-Height: 140%; PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; } /* 各コメントの投稿者情報他 */ .comments-post { FONT-FAMILY: verdana, arial, sans-serif; FONT-SIZE: x-small; font-weight: normal; LETTER-SPACING: 0.1em; COLOR: #6F5E31; margin-bottom: 0px; margin-top: 10px; margin-right: 0px; margin-left: 10px; } /* ################################################################# ## TrackBack Listing Template ################################################################# */ /* ヘッダー帯 */ #banner-commentspop { FONT-FAMILY: verdana, arial, sans-serif; FONT-WEIGHT: normal; FONT-SIZE: x-small; LETTER-SPACING: 0.1em; COLOR: #FFFFFF; margin-bottom: 0px; margin-top: 10px; margin-right: 0px; margin-left: 0px; padding-top: 2px; padding-right: 2px; padding-bottom: 3px; padding-left: 5px; border-style: solid; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-color: #CCCCCC; background: #6F5E31; } /* TBアドレス表示枠 */ .trackback-url { FONT-FAMILY: verdana, arial, sans-serif; FONT-WEIGHT: normal; FONT-SIZE: small; LETTER-SPACING: 0.1em; COLOR: #000000; margin-bottom: 5px; margin-top: 5px; margin-right: 0px; margin-left: 0px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-color: #000000; background: #91AB36; LINE-HEIGHT: 160%; } /* TB一覧の格納箱 */ .trackback-body { background: #FFFFFF; padding-top: 5px; padding-right: 15px; padding-bottom: 5px; padding-left: 15px; } /* TB項目 */ .trackback-post { LINE-HEIGHT: 140%; FONT-WEIGHT: normal; FONT-SIZE: x-small; FONT-FAMILY: "ヒラギノ角ゴ Pro W3", "Osaka−等幅", "ＭＳ ゴシック", verdena; } 各カスタムクラスが画面上のどの部分に該当しているのかはTRIGGERS スタイルシートガイドを参考にするとヨイです。TRIGGERSで語られていない、

Category Archive
Indivisual Entry Archive
Data-Based Archive
Comment-Listing 他

についても、iandeth の site-style.css 中のコメントで把握可能かと思います。本当はイラストで説明するのがベストなんだろうけど...面倒くさいので省略 (/w)。
なお、iandethのレイアウトは幅760px／中央寄せ になっていますが、これはデフォルトのstyle-site.cssでは厳しかった為 別途 カスタムクラス CSS を定義した上で それらを各種 HTML テンプレートに適応しています。詳しくは次回。