スタイルシート生成ページ
3.2公開テンプレートのスタイルシートについて、任意の配色を設定できるページを作りました。
セールスポイントは、このページ自体に公開テンプレートを用いておりまして、設定した配色をこのページに反映させることができます。つまり実際の出来具合いを確認しながら配色を決めることができるという訳です。またスタイルシートの変更方法が分からない方でもある程度のデザイン変更が可能です。
使い方は、まず上記のページでフォームの各項目を設定します。「配色を確認する」をクリックすると設定した配色がページに反映されますので、これで気に入った配色になるまで作業を繰り返します。配色が決まったら「CSSを生成する」をクリックしてスタイルシートを生成します。テキストエリアに生成されたスタイルシートをコピーし、ご自身のブログのテンプレートにペーストします。
設定可能な項目は下記の通りです。
- カラム横の背景（固定または1カラムのみ有効）
- 背景
- リンク（a:link）
- リンク（a:visited）
- リンク（a:hover）
- リンク（a:active）
- タイトルバナー背景
- タイトルバナータイトル
- タイトルバナー説明
- エントリー背景
- エントリー日付
- エントリー日付背景
- エントリータイトル
- エントリー文字
- エントリー投稿者欄
- カレンダー月
- カレンダー日付
- カレンダー本日 *リンクでない場合のみ
- サイドメニュータイトル
- サイドメニュータイトル背景
- サイドメニュータイトル枠
- サイドメニュー
色の設定はRGB指定（#xxxxxx）または色の名前を直接設定してください。
Firefox/Netscape では3カラムリキッドと固定を切り替えて確認することが可能です（IEでは表示に不具合があるため切り替え用ラジオボタンを表示していません）。
サイドメニューのタイトル枠の設定は他と異なり、
1px solid #666666という風に設定します（セミコロンは不要）。枠自体が不要な場合は
noneと入力してください。
スクリプトについてのご質問・ご要望等はこのエントリーへお願い致します。
2005.10.10 追記
リキッドレイアウトで背景色が変更されない不具合を修正しました。
- Movable Typeのコンテンツデータで公開日を比較する方法
- MT7テンプレート作成画面に表示される「コンテンツタイプ」「コンテンツフィールド」の意味
- Movable Typeでテンプレートの動作を簡単に確認する方法
- Movable Typeでスマホサイト用トップページをPCサイト用トップページと異なるURLにする方法
- Movable TypeでCSSファイルやJavaScriptファイルなどを管理するためのTips
- Movable Type 4.2 テンプレートセット（コミュニティ用）修正
- Movable Type 4.2 テンプレートセット（コミュニティブログ対応版）修正
- Movable Type 4.2 テンプレートセット（コミュニティブログ対応版）
- Movable Type 4.2 配布テンプレートセット修正（カテゴリーアーカイブ・コメント完了）
- Movable Type 4.2 テンプレートセット修正（アーカイブインデックス追加等）
- Movable Type 4.2 テンプレートセット修正
- Movable Type 4.1 テンプレートセット修正
- 「iPhoneテンプレートfor MT」 by cremadesign
- Movable Type 4.1 テンプレートセット（スタイル対応版）
- 小粋空間テンプレートセットのカラムレイアウト変更方法
≫ テンプレートの作成、 from ka-aroma
テンプレートの作成、編集 [続きを読む]
素敵ですねー。早速使わせていただきました。
おもしろいので、あれこれ色指定して遊んじゃいました。
ここで目で見て確かめられるのがいいですね。
＞さえらさん
こんばんは。
お試し＆コメントありがとうございます。
もうちょっと項目を増やして、テンプレートのカラム指定もできるといいのですが、そこまで手が回ってません。
いつもお世話になっております。現在、３カラムリキッドタイプを使わせて頂いております。そこで、エントリー範囲以外にスタイルシートで画像固定で背景に設定したいのですがどの部分をどのように変更すればいいでしょうか？ http://e-sheepdogs.ciao.jp/blog/のようにしたいのですが・・・・ お手数おかけしますが宜しくお願いします
＞panserさん
こんばんは。
ご質問の件ですが、スタイルシートの下記の部分に青色のプロパティを追加してください。
.layout-three-column-liquid #content { margin: 0 185px 10px; border-bottom: 1px solid #666699; border-left: 1px solid #666699; border-right: 1px solid #666699; background-color: #ffffff; }
以上です。
それではよろしくお願い致します。
スタイルシートをダウンロードさせて使わせていただいております。大変感謝しています。m(_ _)m
さて、初歩的な質問で恐縮です。
3カラムリキッドを使っていますが、サイドバーのバックグラウンドカラーを変えようと、
.layout-three-column-liquid #links-left{
にbackground-color: #FF0000;
などと書き足してみますが、文字のバックグラウンドのみ変わって、マージンのところまで含めてかわってくれません。どこをいじればいいのでしょうか。
＞aranさん
こんにちは。
ご利用ありがとうございます。
ご質問の件につきましては生成ページでサポートできておりませんので、変更方法を別エントリーさせて頂きます。
あと勝手ながらBlogPeopleに登録させて頂きました。
以上です。
それではどうぞよろしくお願い致します。
スタイルシート生成ページ へのリンクが切れてますね、
配色確認するのに便利だったのですが・・・
＞カヒロさん
こんにちは。
リンク切れのご連絡ありがとうございました。
可能であれば本日中に回復させますので、申し訳ありませんがお待ちください。
: November 5, 2007 1:37 PM
