2004年11月13日

記事の見出しと文字の改造

今回は記事の見出しと文字をいじります。記事の見出しについてはホワイト以外のテンプレートでは使えないかも…

今回の変更箇所は全部「#content {}」の中です。

今回は先に画像(クリックで拡大)を見てください。変更箇所に番号がふってあります。この番号順に変更点を書いていこうと思うので、変更したいところがあればそこを見てください。


変更4・記事の見出しと文字の変更



1.日付の前の縦線
 「.date{}」の中の「border-left:5px solid #000;」の方の色コード(下線部分)を好きな色に変えます。「5px」の部分を好きな数字にすれば縦線の太さも変えることが出来ます。

2.日付
 同じく「.date{}」の中の今度は「color:#000;」を好きな色コードに変更しましょう。その下の「margin」や「padding」の値を変更すれば、文字の間隔等の変更ができます。

3.日付の下のライン
 「.title{}」の中の「border-top:1px solid #000;」の色コード(下線部分)を変更すればOKです。「1px」を好きな値に変更で太さも変わります。

4.タイトルの下のライン
 同じく「.title{}」の中の「border-bottom:1px solid #000;」の色コードを変更してください。ピクセル変更で太さ変更可能です。

5.記事の文字
 「.text{}」の中を変更します。
 文字の大きさの変更→→→「font-size: 90%;」を好きなパーセントに。
 文字の色の変更→→→→→「color: #333S;」を好きな色コードに。
 左側と文字との間隔→→→「padding-left:10px;」を好きなピクセルに。
 上側と文字との間隔→→→「padding-top:5px;」を好きなピクセルに。
 右側と文字との間隔→→→「padding-right:15px;」をすきなピクセルに。

あと「margin」で段落同士の間隔を指定できる…はずなんですが、paddingとの違いがよくわかりませんでした…
例えば今の部分の「padding」をひとまとめに100px指定するのと「margin」をひとまとめに100px指定した場合のプレビューがどっちも外側と文章の距離になってしまう…
ということで段落同士の間隔についてはひとまず保留。「padding」か「margin」をいじれば外側と文章の距離については変更できます。


今回はここまで。
お付き合いありがとうございました!
ラベル:CSS
posted by 四葉屋 at 22:55| Comment(5) | TrackBack(0) | CSSいじり | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
こんにちは、はじめまして。
携帯電話のシーザーサイトの新着記事から飛んで来た葉月と言います。
いつも読ませてもらっています。

cssいじりは難しそうでなかなか手が出せないのですが、こちらを拝見させていただいて、出来るかもと思いつつあります。
これからもがんばってください。応援しています。
Posted by はづき at 2004年11月15日 09:52
葉月さんはじめまして! ご訪問ありがとうございます。

CSS、文字だらけでややこしいですよね(^^;
変更箇所のメモのようなものなのでわかりにくいところもあるかと思いますが、少しでもカスタマイズの参考になれば嬉しいです(^-^)
葉月さんも是非挑戦してみてくださいね。
これからもよろしくおねがいしますm(__)m
Posted by 四葉屋 at 2004年11月15日 12:07
すっごい!
おかげで、「seesaaってもちょと文字が大きければなぁ・・・」って長年の悩みが解決されました

恩人です!!
Posted by くるしお at 2005年11月14日 02:55
全然知識も無いのに、弄繰り回していたら、記事の文字がどうしても小さくならないんです・・・。

文字が大きくなりすぎて、絵本みたいになってます--;

.text{の中のfont-size: ○○%;」
が、どうしても見つかりません。

.text
padding:0px 25px 0px 0px;
margin-top:0px;
line-height:1.8em;;
font-family:Verdana;
}

の中のどれを変えれば良いでしょうか
よろしくお願いします
Posted by くるしお at 2005年11月15日 01:04
>くるしおさん
はじめまして!コメントありがとうございます。お返事がかなり遅くなってしまって本当にすみません。

「font-size〜」がない場合は.text{}の中に書き足していただければ反映されると思います。
「font-size」以外の指定(background〜とかcolorとか)も書き足せばたいていは反映されると思いますので色々試してお好みのデザインを見つけてくださいね(^-^)
Posted by 四葉屋 at 2005年12月19日 00:39
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]


この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。