Home > Movable Type > Movable Type 2.6 CSS デザイン

Movable Type 2.6 CSS デザイン

2004-02-06 (金)
Movable Type

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 テンプレートに適応しています。詳しくは次回。

Newer: CombatDiGiQ タイガーI型
Older: 今日の茶豆

Comments:5

REI 2004-05-17 (月) 11:29

bashiさん、こんにちは。
Love and peachさん経由で知り、この度テンプレートをお借りしました。
原型を留めないような使い方で申し訳ありません。
でも、とてもスッキリ納まって、CSSのコメントもすごくわかりやすかったです。
ありがとうございました。

…昨夜はカスタマイズ中、何度となくヘコタレそうになった時「今日の茶豆」さんに癒されました。
もぅ涙出るほどかわいいです。

夏 2004-06-10 (木) 01:50

テンプレートをカスタマイズして使わせてもらいました。
すごい使いやすいです。
構造も理解しやすくて、時間もかけずに良い感じにできました。
ほんと感謝です！
ありがとうございました。

tokitama 2004-09-23 (木) 19:10

はじめまして、tokitamaと申します。こちらのエントリーを参考にさせていただき、CSSのテンプレを使わせていただいたので、
トラックバックをうったところ、送信時のエラーで、三回も重複してしまいました。

大変申し訳ありませんが、削除していただけますか？お手数をおかけしてすいません。

テンプレートはとても分かりやすく助かりました。ありがとうございました。（事後報告ですいません。）

zero 2004-11-23 (火) 23:44

はじめまして。zeroと申します。
このたび、MTを3.1にバージョンアップしまして、今までのデザインが大幅に崩れてしまい(汗)、これを機会に一からデザインを変える事にしました。
スッキリしていてとても素敵なサイトですので、参考にさせて頂く事にしました。
まだ、色さえそのままお借りしている状態で大変申し訳ありませんが、徐々にオリジナルに変えていこうと思っています。
本当にありがとうございました。
これからもよろしくお願い致します。

CARNIVAL 2004-12-21 (火) 07:56

初めまして。CARNIVALと申します。
シンプルなのにありそうでなかった素晴らしいデザインですね。
すっかり一目惚れしてCSSお借りしちゃいました！
今は色までデフォルトで使わせて頂いております。
大変気に入っております。ありがとうございました！

Trackback:4

TrackBack URL for this entry: http://iandeth.dyndns.org/mt/mt-tb.cgi/27
Listed below are links to weblogs that reference: Movable Type 2.6 CSS デザイン from iandeth.

デザイン変えました。 from RE:blog 2004-05-17 (月) 12:04: 見た目全然変わってませんが、スタイルシートをバッサリ変えました。と、いうのもねぇ〜、Firefoxで見たとき、ブログとサイドの表示が微妙に、 …いえ、かなりズレてたんです。(*￣(エ)￣*) もぅこの際、今のうちにやっちゃおう！ってことで、一からスタイルシートを書き...
デザイン変えてみました。 from tokitama::weblog 2004-09-23 (木) 18:58: 突然ですが、CSSいじってデザインを大幅にかえてみました。というのも、自分の求め...
テンプレートお借りしました(*^^*) from Zero start 2004-11-23 (火) 23:46: 季節に合わせ写真を配置したデザインにするつもりですが、一からcssを触るよりも...
blog模様替えの顛末 from Truth Is No Words 2004-12-21 (火) 07:58: 　思ったよりも大変な作業となりましたが、なんとか形になりました。そもそも今回模様...

Home > Movable Type > Movable Type 2.6 CSS デザイン

Categories

Archives

人気エントリー

Search

Feeds

RSS2.0
Atom

Page Top