北京棒球小僧トップページへ矢印:赤(右3) カープキャップ1Blog technique 矢印:赤(右3)カープユニフォーム1文字系の設定変更

2005年06月21日

カープユニフォーム1 文字系の設定変更

CSS変更解説もついに第3弾exclamation×2
今回は文字系の設定変更について解説していきます。
興味のある方は見てやってみて下さい。

ここまででサイトのサイズ設定、背景の色変更と来て
多少なりとも問題が発生してきます。
『背景色と文字色が合わない』『文字位置が合わない』
『文字の大きさ(太さ)が合わない』と言う事でしょうか。
これもCSSの変更で解決できちゃいますわーい(嬉しい顔)
まず、前回編の各セレクタの名称を参照ください。
文字系のとりあえずは変更可能なセレクタは以下の9つです。

?h1(ブログタイトル)
?description(ブログ説明)
?blogbody(記事のタイトルの除く部分)
?date(日付)
?title(記事タイトル)
?text(記事本文)
?sidetitle(サイドバータイトル)
?side(サイドバー本文)
?comments-body(コメント部分全体)

この上記のセレクタの中の設定を変更または追加するとオリジナルの設定に変更できます。
設定方法はすべて同じなので今回は?のみの変更とします。
《現状》

h1 {
margin:0px;
padding-top:0px;
font-weight:bolder;
font-size:30px;
padding: 5px;
}


この{}の中の設定を変更または追加するわけです。
また設定項目(プロパティ)は以下の通りです。
別にすべて設定する必要はありません。
設定しないと文字が表示されない事もありません。

?font-style・・・・・・・・・・・・・・・・フォントをイタリック体・斜体にする
?font-variant・・・・・・・・・・・・・・フォントをスモールキャップにする
?font-weight・・・・・・・・・・・・・・・フォントの太さを指定する
?font-size・・・・・・・・・・・・・・・・・フォントのサイズを指定する
?font-family・・・・・・・・・・・・・・・フォントの種類を指定する

ここで上記の8項目(プロパティ)をどうやって設定するか説明します。
表記方法は

プロパティ:設定値;

と表記してください。

たとえば
?font-styleの場合
設定値:標準(normal)、イタリック体(italic)、斜体(oblique)
よって
font-style:normal;
と記述すれば標準の文字スタイルになります。
このように変更していく上で分からないのは設定値でしょう。
プロパティの設定値を分かる範囲で説明します。

?font-variant:標準(normal)、スモールキャップ(small-caps)

?font-weight
《数値設定》100、200、300、400、500、600、700、800、900で
フォントの太さを指定します。
太さが9種類用意されているフォントはあまりないため、
数値を上下させても太さが変化しないことがあります。
標準の太さは400で、数値が小さくなるほど細く、
大きくなるほど太くなります。
《キーワード設定》
normal・・・・・・・標準の太さです。(数値で400を指定した場合と同じ)
bold・・・・・・・・・一般的な太字の太さです。(数値で700を指定した場合と同じ)
lighter・・・・・・・相対的に一段階細くします。
bolder・・・・・・・相対的に一段階太くします。

?font-size
《数値設定》pxやemやexなどの単位をつけて指定します。
《%指定》%値で指定します。
《キーワード指定》
xx-small、x-small、small、medium、large、x-large、xx-largeの7段階があり、
mediumが標準サイズです。

?font-family
《フォント名指定》「MS ゴシック」や「MS 明朝」のようにフォント名で指定します。
フォント名にスペースが含まれている場合には、ダブルクォーテーション( " )またはシングルクォーテーション( ' )で囲むようにしてください。
《キーワード指定》フォントの種類を表すキーワードで指定します。
sans-serif・・・・・・ゴシック系のフォント
serif・・・・・・・・・・・・明朝系のフォント
cursive・・・・・・・・・筆記体・草書体のフォント
fantasy・・・・・・・・・装飾的なフォント
monospace・・・・・等幅フォント

少々ここら辺からは根性が必要になってきますがテキトーに数値を
変えてやってみるのも良いかもしれません。
セレクタとプロパティを理解した上でやるとかなり面白く出来ます。
と言う事で今回は特に文字系の基本設定でした。
次回はまだ何にするか考えていませんが小技系も挟んで行きたいと思います。
posted by むさC16 at 08:30 | Comment(0) | TrackBack(0) | カープキャップ1Blog technique 上へジャンプ
この記事へのコメント
上へジャンプ
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのTrackBack URL

上へジャンプ
さくらインターネット株式会社 株式会社ぐるなび 株式会社オートウェイ 損保ジャパンの海外保険 オクトパストラベル・ジャパン
中国醸造株式会社 有限会社BBシステム 日本シグマックス株式会社 日本シグマックス株式会社 株式会社コーエイプランニング OTAIRECORD株式会社