スタイルシート生成ページ

このページで公開テンプレートのスタイルシート（styles-site.css）の配色を変更することができます。 下記のフォームのそれぞれの項目について配色（RGB値または色の名前）を設定し、「配色を確認する」をクリックと、このページの配色が指定したスタイルに変わります。
配色が決まったら「CSSを生成する」をクリックしてください。設定が反映されたスタイルシートが下のテキストエリアに生成されます。
「設定を全て戻す」をクリックするとデフォルトの設定状態に戻ります。

スタイルシート（styles-site.css）
@charset "<$MTPublishCharset$>"; /* PublishCharset into mt-config.cgi */ /* * File : styles-site.css * Version : 2.04 * Update : * 2.00 2005.09.01: Update for Movable Type 3.2. * 2.01 2005.09.03: add font-size to content-nav. * 2.02 2005.09.27: correct the capital letter to the small letter. * 2.03 2005.09.28: for CGI. * 2.04 2005.10.10: fix bug. * * Copyright (C) 2005-2006 www.koikikukan.com All rights reserved. */ /* すべて */ * { margin: 0; padding: 0; font-family: Verdana, Arial, sans-serif; font-weight: normal; } /* リンク */ a, a:link { color: #006699; text-decoration: none; } a:visited { color: #006699; text-decoration: none; } a:hover { color: #006699; text-decoration: underline; } a:active { color: #e50003; text-decoration: none; } /* リンクつき画像 */ a img { border: 0; } /* 段落 */ p { margin-top: 15px; margin-bottom: 15px; } /* 順序なしリスト */ ul { padding-left: 16px; } ul li { list-style-type: circle; } /* 定義リスト */ dl {} dt {} dd { padding-left: 8px; } /* フォーム */ form { margin: 0px; } input { padding: 1px; font-size: 12px; } /* 引用 */ blockquote { width: auto; margin: 15px 20px 0 20px; padding: 10px; border: 1px solid #666666; background: #f6f6f6; font-size: 10px; line-height: 150%; } .quotetitle { /* 引用文タイトル */ font-size: 10px; border-bottom: 1px solid #666666; padding: 3px; } /* タイトルバナー */ #banner { padding: 15px; border-bottom: 1px solid #666699; color: #999999; background: #8fabbe; background-position: right top; background-repeat: no-repeat; background-image: url(".gif"); text-align: left; } #banner a, #banner a:link, #banner a:visited { color: #ffffff; font-size: 32px; text-decoration: none; } #banner a:hover {} #banner a:active {} /* タイトルバナー下の説明 */ #banner h2 { color: #ffffff; font-size: 12px; } /* エントリー全体 */ .blog { padding: 10px; font-size: small; color: #36414d; background: none; } /* エントリー日付 */ .date { margin: 6px 5px 0; padding: 2px 0 2px 5px; color: #ffffff; background: #8fabbe; background-position: left; background-repeat: no-repeat; background-image: url(".gif"); font-size: 11px; font-weight: bold; } /* エントリー */ .entry { width: auto; margin: 0 5px 15px; color: #444444; background: #ffffff; background-position: right; background-repeat: repeat-y; background-image: url(".gif"); font-size: 12px; line-height:150%; word-break: break-all; } .entry a:active {} .entry img { margin-right: 8px; margin-bottom: 5px; } /* エントリーのテキストエリア可変長指定 */ .entry textarea { width: 97%; } /* 追記 */ .entry.extended {} /* エントリータイトル */ .entry-header { margin: 15px 0 0; color: #444444; font-size: 12px; font-weight: bold; } /* 投稿者 */ .entry-footer { margin: 10px 0 0 0; border-top: 1px dotted #36414d; text-align: right; color: #444444; font-size: 9px; } /* Typekeyコメンタ－画像 */ .commenter-profile img { vertical-align: middle; border-width: 0; } /* アーカイブページの前後リンク */ .content-nav { margin: 10px; text-align: center; font-size: 12px; } /* カレンダー */ .calendarhead { padding-bottom: 5px; text-align: center; color: #444444; font-size: 9px; background: none; letter-spacing: 0.2em; } .calendar { text-align: center; color: #444444; background: none; } .calendar table { text-align: center; padding: 0px; border-collapse: collapse; } .calendar th { padding-bottom: 3px; font-size: 8px; width: 23px; } .calendar td { padding: 2px 0; font-size: 9px; line-height: 120%; } .today { display: block; text-align: center; color: #444444; border: 1px solid #444444; } .red { color: #e50003; } .blue { color: blue; } /* サイドメニュータイトル */ .sidetitle { margin-top: 3px; padding: 2px 0 1px; _padding: 1px 0 2px; border: 1px solid #666666; text-align: center; color: #666666; background: #f6f6f6; font-size: 10px; line-height: 140%; } /* サイドメニュー */ .side { margin: 3px 0 20px; background: none; color: #444444; font-size: 10px; _font-size: 9px; line-height: 150%; } /* サイドメニュー(サブカテゴリー用) */ .side #categories ul { padding-left: 16px; } .side #categories ul ul { padding-left: 10px; } .side #categories li { list-style-type: circle; } /* カウンター */ .counter { margin: 8px 0 25px; padding: 2px; background: none; font-size: 9px; } /* RSSフィード */ .syndicate { margin-bottom: 5px; text-align: left; color: #666666; font-size: 9px; line-height: 150%; } /* クレジットバナー */ .powered { margin-top: 50px; text-align: left; color: #666666; font-size: 9px; line-height: 150%; } .powered img { margin-top: 3px; } .clear { clear: both; } /* コメント・トラックバック */ #comments-open-data p { margin-bottom: 10px; } #comment-post { font-weight: bold; } #comment-author, #comment-email, #comment-url, #comment-text { width: 220px; } #comment-text { width: 266px; } #comment-bake-cookie { margin-left: 2px; vertical-align: middle; } #comments-open-footer { text-align: center; } .trackbacks, .comments { margin: 10px 5px; color: #36414d; } .trackbacks-header, .comments-header, .comments-open-header { margin: 15px 0; padding: 2px 0 2px 5px; color: #ffffff; background: #8fabbe; font-size: 11px; } #trackbacks-info, .trackback-content, .comment-content, .comments-open-content { margin: 0; padding: 0; font-size: 12px; line-height: 150%; word-break: break-all; } .trackback-content p, .comment-content p { margin-top: 10px; margin-bottom: 5px; } .trackback-footer, .comment-footer { font-size: 9px; border-top: 1px dotted #36414d; text-align: right; padding-top: 3px; margin-right: 2px; } .comments-open label { display: block; } .comments-head { font-size: 11px; color: #ffffff; background: #8fabbe; padding: 2px 0 2px 5px; margin: 15px 0; } /* カラム切り替え */ /* 3カラム用 */ body.layout-three-column, body.layout-two-column-left, body.layout-two-column-right, body.layout-one-column { margin-bottom: 20px; text-align: center; background: #36414d; } .layout-three-column #container, .layout-two-column-left #container, .layout-two-column-right #container { margin-bottom: 10px; } .layout-three-column #box { width: 850px; margin-right: auto; margin-left: auto; padding: 0 0 15px 0; border-bottom: 1px solid #666699; border-left: 1px solid #666699; border-right: 1px solid #666699; text-align: left; background-color: #ffffff; } /* 2カラム用 */ .layout-two-column-left #box, .layout-two-column-right #box { width: 665px; margin-right: auto; margin-left: auto; padding: 0 0 15px 0; border-bottom: 1px solid #666699; border-left: 1px solid #666699; border-right: 1px solid #666699; text-align: left; background-color: #ffffff; } /* 2カラム用 */ .layout-one-column #container { margin-bottom: 0; } /* 1カラム用 */ .layout-one-column #box { width: 478px; margin-right: auto; margin-left: auto; margin-bottom: 0; padding: 0; border-bottom: 1px solid #666699; border-left: 1px solid #666699; border-right: 1px solid #666699; text-align: left; background-color: #ffffff; } /* 1カラム・リキッドレイアウト用 */ /* タイトルバナー */ .layout-one-column-liquid #banner { margin-right: 100px; margin-left : 100px; border-left: 1px solid #666699; border-right: 1px solid #666699; } body.layout-one-column-liquid { background: #36414d; } /* フッタ */ .layout-one-column #footer { text-align: center; } .layout-one-column-liquid #footer { padding-bottom: 15px; text-align: center; } /* 3カラム(リキッドレイアウト) */ body.layout-three-column-liquid { background-color: #ffffff; } .layout-three-column-liquid #content { margin: 0 185px 10px; border-bottom: 1px solid #666699; border-left: 1px solid #666699; border-right: 1px solid #666699; } .layout-three-column-liquid #links-left{ position: absolute; width: 155px; top: 95px; left: 15px; color: #ffffff; } .layout-three-column-liquid #links-right{ position: absolute; width: 155px; top: 95px; right: 15px; color: #ffffff; } /* 2カラム(リキッドレイアウト：右サイドバー) */ body.layout-two-column-liquid-right { background-color: #ffffff; } .layout-two-column-liquid-right #content { margin: 0 185px 10px 0; border-bottom: 1px solid #666699; border-right: 1px solid #666699; } .layout-two-column-liquid-right #links-right { position: absolute; width: 155px; top: 95px; right: 15px; color: #ffffff; } /* 2カラム(リキッドレイアウト：左サイドバー) */ body.layout-two-column-liquid-left { background-color: #ffffff; } .layout-two-column-liquid-left #content { margin: 0 0 10px 185px; border-bottom: 1px solid #666699; border-left: 1px solid #666699; } .layout-two-column-liquid-left #links-left { position: absolute; width: 155px; top: 95px; left: 15px; color: #ffffff; } /* 1カラム(リキッドレイアウト) */ .layout-one-column-liquid #content { margin: 0 100px 10px; border-bottom: 1px solid #666699; border-left: 1px solid #666699; border-right: 1px solid #666699; background: #ffffff; } /* 3カラム */ .layout-three-column #content { float: left; width: 478px; margin: 0 0 10px 0; border-bottom: 1px solid #666699; border-left: 1px solid #666699; border-right: 1px solid #666699; } .layout-three-column #links-left-box, .layout-three-column #links-right-box { float: left; width: 185px; } .layout-three-column #links-left, .layout-three-column #links-right { padding: 15px 15px 0 15px; color: #ffffff; } /* 2カラム(右サイドバー) */ .layout-two-column-right #content { float: left; width: 478px; margin: 0 0 10px 0; border-bottom: 1px solid #666699; border-right: 1px solid #666699; } .layout-two-column-right #links-right-box { float: left; width: 185px; } .layout-two-column-right #links-right { padding: 15px 15px 0; color: #ffffff; } /* 2カラム(左サイドバー) */ .layout-two-column-left #content { float: left; width: 478px; margin: 0 0 10px 0; border-bottom: 1px solid #666699; border-left: 1px solid #666699; } .layout-two-column-left #links-left-box { float: left; width: 185px; } .layout-two-column-left #links-left { padding: 15px 15px 0; color: #ffffff; } /* 1カラム */ .layout-one-column #content {} input,textarea { font-family: "Osaka", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", arial, sans-serif; }