最強?無料Seesaaブログで簡単にホームページ作成!

目次
■初めての方は、「まずはじめに」の後に、トップページをご覧下さい。お勧め記事を集めました!
  その後は、ご自分の好きなところを読まれて大丈夫です。
トップまずはじめにブログ入門編Seesaa活用方法基本的な使い方SeesaaカスタマイズQ&Aお問い合せ
ランキングCSSHTMLアフィリエイトおすすめ本便利フリーソフトブログ紹介資産運用精神論足跡
Topスタイルシート(CSS)>CSS(スタイルシート)で文字の基本設定

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

スポンサードリンク

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

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

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

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

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

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

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

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

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

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

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

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

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

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

セレクタに関しては、「スタイルシートの基本その1〜セレクタについて〜」を参考にして下さい。
  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(スタイルシート)の編集をやってみてください。

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

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

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

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

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

■人気記事ベスト5
トラックバック、コメントをする時の注意
コメントする時、ブログを持っている方はできるだけホームページアドレスを書いて頂きたいです。みんながどんな風にブログを使っているか知りたいです。宜しくお願いします。
特に、質問される方は、名前に自分のブログのリンク貼ってください。
リンクがない場合は、基本的に返事をしないつもりです。私一人で運営しておりますので、ご理解の程よろしくお願いします。

当サイトでは「トラックバック」歓迎します。ただし、相互リンクをして頂きたいと思います。
相互リンクがなく記事と関連があると判断した場合は、こちらからもトラックバックさせて頂くつもりです。お互いにとって有意義なものにしていきましょう!


トラックバックについて、まだよく分かってない方は、こちらで説明していますので参考にされてください。

特に
■記事と全く関連がないと判断される物
■「宣伝」「誘導」「誹謗中傷」を目的とした物
■リンク切れの場合
と判断したものにつきましては、「削除」させて頂こうと思いますのであらかじめご了承下さい。
同様に「コメント」も削除させて頂きます。
コメントへの返事の確認には、便利なブログコメントチェッカーを利用してください。
この記事へのコメント
ケンジさんこんにちは!
以前偽名(笑)で、こちらに質問書き込みしたものです。やっとブログが形になってきましたので、改めてご挨拶しに来ました。
スタイルシートの行間指定、やってみたらすごく読みやすくなりました!ありがとうございます。
これが私のブログです。ジャンルがマイナーなので記事じたいは何も面白くないかもしれませんけど、CSSいじりをやってみましたのでお時間ありましたら眺めてやって下さい。まだまだですけど…

記事いつも楽しみにしています!
Posted by がちゃ at 2005年04月27日 08:43
はじめまして、がちゃさん。

> 以前偽名(笑)で、こちらに質問書き込みしたものです。
> やっとブログが形になってきましたので、改めてご挨拶しに来ました。

ご丁寧にありがとうございます(●⌒∇⌒●)

> スタイルシートの行間指定、やってみたらすごく読みやすくなりました!

行間の設定いいかんじですね(^_^)

> これが私のブログです。ジャンルがマイナーなので
> 記事じたいは何も面白くないかもしれませんけど、
> CSSいじりをやってみましたのでお時間ありましたら
> 眺めてやって下さい。まだまだですけど…

「TRPG」初めて知りました。
何かすごいですね。私には、異次元空間のような話です( ̄□ ̄;)!!

想像力がめちゃくちゃいりそうですね。

今後ともよろしくお願いします(o^∇^o)ノ
Posted by Seesaa大好きケンジ(管理人) at 2005年04月27日 17:27
ケンジさん、こんばんは
いつもお世話になってますm(__)m
昨日、文字を大きくして見やすくなって
嬉しかったのですが、タイトルが〜(-_-;)
頑張って直そうと思ってケンジさんの記事を
読んでみたのですが、さっぱりわかりません。
どのように変更すれば大きくなりますか?
font-sizeの表示がないのです。
それから.title a{ってなんの事を表して
いるのでしょうか?
いつも、質問ばっかりでごめんなさい。
宜しくお願いします
↓は私のスタイルシートです

.title{
font-weight:bolder;
text-align:left;
}
.title a{
color:#D77D62;
border:none;
text-decoration: none;
font-weight:bolder;
}
Posted by おっかあ♪ at 2005年05月10日 18:55
こんはんば、おっかあ♪さん。

ミスは誰にでもありますよ(^_^)
2つは、消しておきますね。

では、質問にお答えしますね。

以下のようにすればいけると思いますよ。

.title{
font-weight:bolder;
text-align:left;
font-size:サイズpx;
}

自分でfont-sizeを付け足してください。

あと、.title a{ というのは、リンクの設定です。
このページが参考になると思います。
http://blogdehp.seesaa.net/article/3026580.html

リンクの設定は、セレクタごとにできます。

分からなければ、特に気にしなくても大丈夫です。

Posted by Seesaa大好きケンジ(管理人) at 2005年05月10日 23:21
初めまして、カピと申します。
このケンジさんのサイトはとてもわかりやすくて
初心者の私でも簡単な事ならカスタマイズできました。本当にありがとうございました。
これからもっと自分なりに色々変えてみたいと思う
ので、その時はまた参考にさせて頂きます。
これからもケンジさんのブログ楽しみにしています。
Posted by カピ at 2005年07月11日 23:04
はじめまして。
はじめたばかりでなかなかうまくいかないのですが、
ブログのタイトルの色を変えて、プレビューでは変わっているのに、
再構築しても変わっていないくて、どうしたらよいのでしょうか?
Posted by komondor at 2005年08月07日 04:27
先ほど質問した者です。
何時間か後に見てみたら
ちゃんと色が変わっていました。

申し訳ありません。解決しました。
今後もお世話になります。
Posted by komondor at 2005年08月07日 05:28
こんにちわ、カスタマイズの際にお世話になってます(笑)

ちょっと質問なんですが、本文の文字の種類を指定したい場合はbodyよりtextで指定したほうがよいのでしょうか?

bodyの中で【font-family:'MS Pゴシック',osaka】と指定してもあまりかわりが見えないのです。
指定するまえはアリエルが基本とされていて、文字を大きくすると日本語の表示が少し崩れてしまい直そうと思ったのですが(´ヘ`;)

悩んでます(笑)
Posted by はづき at 2005年08月09日 14:37
こんにちは!はじめまして。Seesaaにお引越ししてきて間もないのですがケンジさんのおかげで少しずつですが色々と分かるようになってきてます!ところで、背景の色は変更できたのですが
その他(ブログタイトル、記事タイトル、サイドバーなどなど)の文字色の変更のやり方がわかりません。編集画面のどの部分に入れればよいのでしょうか?

あと、何故かブログタイトルが上トップだけではなく、他に(左と右)にも表示されてしまっていますが何か原因があるのでしょうか??

質問だらけで申し訳ありません(^_^;)
Posted by さち at 2005年09月09日 12:49
こんばんは。
いつも参考にさせていただいています。
ありがとうございます!

ずい分前の記事なのに、すみませんです。。。
実は、行間設定に関連して、一つおしえていただければと思うのですが、
私の場合、トップに自由形式で文章と写真を入れているのですが、
ここの行間を少し広げるには、どのように設定したらいいのでしょうか?
もしご存知でしたら、どうぞおしえてください。
お願いいたします。
Posted by rukiya at 2006年02月01日 22:34
はじめまして。
初心者のわたしでもカスタム化できるガイドブログに出会えたことを今日のわたしのブログに書かせていただきました。覚えたてのリンクもはらさせて頂きました。(事後承諾ですが、ご都合悪ければ削除します)
それよりも心配なのは覚えたてのトラックバックをはったつもりが、どこへ飛んでいったのか不明です。
アドレスをメインタイトルhttp://blogdehp.seesaa.net
でコピーしてわたしのトラックバックの欄にはりつけて送ってしまったのです。後で間違いだったのに気がついたのですがご迷惑がかかっているのではと、心配です。この場を借りてお詫び申し上げます。
Posted by ゲゲゲのイチロー at 2006年02月08日 14:37
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス: [必須入力]

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※半角英数字のみのコメントは投稿できません。
この記事へのトラックバック
この記事へのTrackBack URL
http://blog.seesaa.jp/tb/2975367
※スパム対策のために管理人が承認したトラックバックのみ表示させて頂いています。
すぐに表示されないからといって連続で送る必要はありません。
※半角英数字のみのトラックバックは受信されません。

■スタイルシート、初挑戦■
Excerpt: 全く初めて スタイルシートに挑戦して いまのエンジ色になりました
Weblog: ブログで、こつこつ夢をかなえる【SOHOブログ】
Tracked: 2005-04-29 09:52

このページのトップへ▲
×

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