■CSS(スタイルシート)で文字の基本設定

スポンサードリンク

■CSS(スタイルシート)で文字の基本設定

今回は、CSS(スタイルシート)を編集して、文字の基本設定をしてみましょう！

この設定をすれば、文字の大きさ、太さ、色、マージン・パディング(文字のつまり具合や余白)、行間、枠線、幅を設定できます。

CSS編集がまだよく分からない人は､行間の設定だけはするようにしましょう！

行間の幅を広げるだけで､かなり文章が読みやすくなります。

アフィリエイトをされている方は､文章が読みにくいのは致命的です。

頑張ってCSS編集していきましょう！

分からない部分がありましたら、遠慮なく言ってください。

但し､何度も言っておりますが､Seesaaカスタマイズに関しては､自己責任でお願いします。

スタイルシートの編集をするときは、メモ帳などにバックアップを取っておきましょう。

それでは、具体的に説明していきます。

Seesaaブログ にはもう登録した？

私のCSSを該当部分のみ参考のために載せておきます。

今回、設定する部分は、以下の9個です。結構多いですが、この設定は、とても大事なので頑張っていきましょう！

時間がない方は､text、blogbody、coments-bodyだけでもCSS編集したらだいぶ違うと思います。

セレクタに関しては、「スタイルシートの基本その１〜セレクタについて〜」を参考にして下さい。

1. h1(ブログタイトル)
2. description(ブログ説明)
3. blogbody(記事のタイトルの除く部分)
4. date(日付)
5. title(記事タイトル)
6. text(記事本文)
7. sidetitle(サイドバータイトル)
8. side(サイドバー本文)
9. comments-body(コメント部分全体)

■h1(ブログタイトル)

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

ここを編集する事で、ブログタイトルを編集できます。

marginは、0に設定する方がいいとおもいます。

私は、font-sizeを30pxに設定していますが、タイトルが長い人はそれに対応させて設定する必要があると思います。

私は、font-weight:bolderにしていますが、太字にしたくない人は、normalにして下さい。

paddingは、やはりある程度とったほうが、見やすいと思います。

これを0としてしまうと、タイトルが詰まった感じになります。


■description(ブログ説明)

.description {
color:blue;
margin-left:30px;
font-size:16px;
font-weight:bold;
line-height:140%;
}

descriptionでは、color(色)、margin(余白)、fon-size(文字の大きさ)、font-weight(文字の太さ)、line-height(行間)を設定します。


■blogbody(記事のタイトルの除く部分)

.blogbody {
font-size: 16px;
font-weight:normal;
margin-bottom:15px;
border:1px dashed #003366;
}

blogbody(記事のタイトルの除く部分)では、font-size(文字の大きさ)、font-weight(文字の太さ)、margin(余白)、border(枠線)を設定します。

font-sizeは、pxで設定するようにして下さい。
理由は､後から出てくるセレクタtextのところに書いています。

■date(日付)

.date {
border-top :1px solid #666;
border-left:1px solid #666;
border-right:1px solid #666;
color:green;
margin-top:0px;
margin-bottom:0px;
padding:5px;
background:#94ff72;
}

date(日付)では、border(枠線)、color(色)、margin(余白)、padding(つまり具合)、backgroud(背景色)を設定します。


■title(記事タイトル)

.title {
font-size: 16px;
font-weight:bold;
color:#0000ff;
padding-left:5px;
padding-top:5px;
padding-right:10px;
padding-bottom:5px;
margin:0px;
}

title(記事タイトル)では、font-size(大きさ)、color(色)、padding(つまり具合)、margin(余白)を設定します。


■text(記事本文)

.text{
font-size: 100%;
color: #000000;
padding-left:10px;
padding-top:5px;
padding-right:15px;
margin-top:5px;
}

text(記事本文)では、font-size(大きさ)、color(色)、padding(つまり具合)、margin(余白)を設定します。

ちょっとここで、font-sizeに注目してください。

設定が100％となっているのが、分かると思います。

他のfont-sizeは、すべてpxで設定してあります。

なぜ、ここだけ％で設定しているかというと、textというセレクタは、たくさんでてきます。

ですので、ここで絶対値(px)に設定してしまうと、後で融通が利きません。

例えば、blogbody(記事本文)以外にもcomments-body(コメントの部分)でも出てきます。

％で設定してないと、記事本文の文字は、でかくしたいんだけど、コメント部分は、小さい文字のままでいいというときに困ります。

ですので、textで文字の大きさを調整するのではなく、blogbodyやcomments-bodyで文字の大きさは、調整するようにしましょう。


■sidetitle(サイドバータイトル)

.sidetitle {
color:green;
font-size:15px;
font-weight:bold;
padding:5px; margin-top:0px;
width:100%;
background:#94ff72;
border:1px solid #666;
text-align:center;
}

sidetitle(サイドバータイトル)では、color(色)、font-size(大きさ)、font-weight(太さ)、padding(つまり具合)、widht(幅)、background(背景色)、border(枠線)、text-align(文章の配置)を設定します。


■side(サイドバー本文)

.side {
color:#333333;
border-right:1px solid #666;
border-left:1px solid #666;
border-bottom:1px solid #666;
font-size:13px;
line-height:120%;
padding:5px;
margin-bottom:10px;
width:100%;
}

side(サイドバー本文)では、color(色)、border(枠線)、font-size(大きさ)、line-height(行間)、padding(つまり具合)、margin(余白)、widht(幅)を設定します。


■comments-body(コメント部分全体)

.comments-body {
width:100%;
color: #555555;
font-size:13px;
font-weight:normal;
padding-bottom:10px;
padding-top:10px;
padding-left:10px;
border-bottom:1px dotted #999;
}

comments-body(コメント全体)では、widht(幅)、color(色)、font-size(大きさ )、font-weight(太さ)、padding(つまり具合)、border(枠線)を設定します。

それでは、カスタマイズしたい皆さんは自分で手を動かして、CSS(スタイルシート)の編集をやってみてください。

久々に言いますが、「習うより慣れろ」です。

ランキング参加中！応援お願いします！

■CSS(スタイルシート)で文字の基本設定

ブログは読むだけでも楽しいですが、自分で作るともっと楽しくなること間違いなし。登録はこちらから簡単にできます→→ Seesaaブログ

スポンサードリンク

最後まで、読んで頂いてありがとうございます。お気に入りに追加してくれたら嬉しいです。
→→

RSSをRSSリーダーに登録しても便利だと思います。