Linuxからアホ話まで、何でもありでござる

2004年07月14日

Stylesheetの変更 その1

[MovableType]
さて、このたびデザインを一新したわけですが、変更する為にMovableTypeのTemplateについていろいろ調べました。たぶんしばらくすると忘れちゃうので、備忘録として書いておきましょう。あくまで個人的に理解した範囲なので、おかしいところがありましたら教えてチョンマゲ。

スタイルシートなどについては、CSS Dencitieってサイトにとても詳しく出ていますので、一度ご覧あれ。また、サンプルとしてはすちゃらかCSS素材集がとても参考になります。

stylesheetは、MovableTypeの全体の書式を定義するものと考えて差し支えないでしょう。
標準のStylesheetを元に、どこを変更すればどうなるかを書いていきましょう。
@charset "UTF-8";

ここは、文字コードの設定です。特にいじる必要はないでしょう。
body {
margin:0px 0px 20px 0px;
background:#FFF;
}

全体の設定です。
・margin 上、右、下、左の順に余白の設定をします。ここでは下に余白を20px設けて、後は余白なしです。
・background HTMLコードでバックのカラーを指定します。HTMLコードは、PaintShopやホームページビルダーなどで確認できるでしょう。デフォルトは白ですね。
A { color: #003366; text-decoration: underline; }
A:link { color: #003366; text-decoration: underline; }
A:visited { color: #003366; text-decoration: underline; }
A:active { color: #999999; }
A:hover { color: #999999; }

ここは、リンク表示の設定です。
・A(全般) 色を#003366、表示は下線をつけて表示するよう設定しています
・A:link 未訪問のリンク表示
・A:visited 訪問済みのリンク表示
・A:active クリックしたときの表示
・A:hover カーソルが乗ったときの表示
Aで設定した情報は、A:link,Avisited,A:active,A:hoverで別途設定しない限り引き継がれます。例えば全てのリンクを下線表示したい場合、
A { color: #003366: text-decoration: underline; }
A:link     { color: #003366; }
A:visited { color: #003366; }
A:active { color: #999999; }
A:hover { color: #999999; }
でOKです。
h1, h2, h3 {
margin: 0px;
padding: 0px;
}

h1,h2,h3タグの設定です。通常、あまりいじる必要はなさそうです。
#banner {
font-family:palatino, georgia,"ヒラギノ角ゴ Pro W3", "MS Pゴシック", "Osaka", verdana, arial, sans-serif;
color:#333;
font-size:x-large;
font-weight:normal;
padding:15px;
border-top:4px double #666;
}

ブログの名前を表示させる段落の設定です。
・font-family OS等によってフォントが違うので、使うフォントをここで指定してやります。フォントの種類等については省略。
・color 名前表示の色です。
・font-size 表示させる文字のサイズです。小さい順にxx-small x-small small medium large x-large xx-large となっていますので、お望みのサイズを指定します。1.2倍ずつ大きくなっていくのが標準のようです。
・font-weight 文字の太さです。normal bold bolder lighter といった設定と 100 200 300 400 500 600 700 800 900といった設定が使えます。normal=400,bold=700で、bolderでは前の設定から100増やし、lighterでは100減らします。通常はnormal boldで設定していることが多いようです。
・padding 名前を表示させる部分の余白を設定します。ここでは上下左右とも15pxの余白を取っています。
・border-top 順に 線の太さ 種類 色 の設定です。ここでは名前を表示させる枠の上部に4pxの幅の二重線を表示させています。種類には none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outsetがあります。
#banner a,
#banner a:link,
#banner a:visited,
#banner a:active,
#banner a:hover {
font-family: palatino, georgia,"ヒラギノ角ゴ Pro W3", "MS Pゴシック", "Osaka", verdana, arial, sans-serif;
font-size: xx-large;
color: #333;
text-decoration: none;
}

ブログの名前のリンクの設定です。#banner a,のように、特に設定しない場合、最初の方で設定したリンク表示設定が引き継がれます。ここではhover(カーソルが乗った場合)のみ、下線が表示されないよう変更しています。
.description {
font-family:palatino, georgia,"ヒラギノ角ゴ Pro W3", "MS Pゴシック", "Osaka", times new roman, serif;
color:#333;
font-size:small;
text-transform:none;
}

ウェブログの説明の表示設定です。


今日はここまで。残念!!

ブログランキング・にほんブログ村へ
posted by oyajiman at 2004年07月14日 22:52:16



コメント

kn-go

おやじまん さん どうもです。
悪戦苦闘中ですね。
スタールシートいじり、私は途中で挫折しましたが。。
とりあえず、Mozillaでちゃんと見えていればO.K.
ということで(笑)
(そのせつは、ありがとうございました)

おやじまん さん のように丁寧に解説、記述してあると
後々他の人にとっても参考になりますので
頑張ってください。(… ヾ(--;)ぉぃぉぃ他力本願)
デザインのセンスは別として・・・(^^ゞ
2004年07月14日 23:56:51

おやじまん

kn-goさん、コメントありがとうございます。
しかし、MozillaとIEって、微妙に表示が違うんですよね。困っちゃいます。他のブラウザはどうなってるのかなぁ。確認してないので、不安だ。

私の解説、少しは役に立ちますかね~。個人的な備忘録なんですが、役に立ってるとしたらうれC。

デザインのセンスは…いいっこなしね(>_<)
2004年07月15日 17:09:52

トラックバック

トラックバック
このエントリにトラックバックはありません
このトラックバックURLを使ってこの記事にトラックバックを送ることができます。 もしあなたのブログがトラックバック送信に対応していない場合にはこちらのフォームからトラックバックを送信することができます。.

コメントする