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

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

Posted at September 28,2005 11:50 PM
Tag:[CGI, CSS, MovableType, Template]

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 追記
リキッドレイアウトで背景色が変更されない不具合を修正しました。

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

テンプレートの作成、 from ka-aroma
テンプレートの作成、編集 [続きを読む]

Tracked on November 19, 2005 7:52 AM
コメント

素敵ですねー。早速使わせていただきました。
おもしろいので、あれこれ色指定して遊んじゃいました。
ここで目で見て確かめられるのがいいですね。

[1] Posted by さえら : September 29, 2005 4:58 AM

>さえらさん
こんばんは。
お試し&コメントありがとうございます。

もうちょっと項目を増やして、テンプレートのカラム指定もできるといいのですが、そこまで手が回ってません。

[2] Posted by yujiro : September 29, 2005 10:55 PM

いつもお世話になっております。現在、3カラムリキッドタイプを使わせて頂いております。そこで、エントリー範囲以外にスタイルシートで画像固定で背景に設定したいのですがどの部分をどのように変更すればいいでしょうか? http://e-sheepdogs.ciao.jp/blog/のようにしたいのですが・・・・ お手数おかけしますが宜しくお願いします

[3] Posted by panser : January 23, 2006 5:24 PM

>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; }

以上です。
それではよろしくお願い致します。

[4] Posted by yujiro : January 23, 2006 11:41 PM

スタイルシートをダウンロードさせて使わせていただいております。大変感謝しています。m(_ _)m
さて、初歩的な質問で恐縮です。
3カラムリキッドを使っていますが、サイドバーのバックグラウンドカラーを変えようと、
.layout-three-column-liquid #links-left{
にbackground-color: #FF0000;
などと書き足してみますが、文字のバックグラウンドのみ変わって、マージンのところまで含めてかわってくれません。どこをいじればいいのでしょうか。

[5] Posted by aran : January 29, 2006 7:52 PM

>aranさん
こんにちは。
ご利用ありがとうございます。
ご質問の件につきましては生成ページでサポートできておりませんので、変更方法を別エントリーさせて頂きます。

あと勝手ながらBlogPeopleに登録させて頂きました。
以上です。
それではどうぞよろしくお願い致します。

[6] Posted by yujiro : January 31, 2006 9:46 AM

スタイルシート生成ページ へのリンクが切れてますね、
配色確認するのに便利だったのですが・・・

[7] Posted by カヒロ : November 5, 2007 2:22 AM

>カヒロさん
こんにちは。
リンク切れのご連絡ありがとうございました。
可能であれば本日中に回復させますので、申し訳ありませんがお待ちください。

[8] Posted by yujiro logo : November 5, 2007 1:37 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)