2006年09月15日

文字の設定(1) 本文のサイズ

[修正あり(2007/2/22)]
ブログの文字のサイズって、いろいろですね。

私の印象では、デザイン系のサイトや雑貨系のブログは「おいおい、文章を読ませる気があんるんですか〜?」とツッ込みたくなるほど文字が小さいものが結構ありますね。
不思議なもので、その手の系統のものって、Webコンテンツに限らず雑誌でも文字が小さいんですよね。

しかし、文章を読んでほしかったら、あまりに小さいのは良くないと思いますよ〜。
新聞を見てごらんなさいな。ン十年の歳月をかけて次第に活字が大きくなっていっているじゃあありませんか。
文字がたくさんあるコンテンツほど、文字が小さすぎてはいけないってことです。
ですから、文章がメインのブログはなおさら、文字が小さくなりすぎないようにしましょう。

では、設定の仕方です。

 
  マイ・ブログ > デザイン

と進むと、「おすすめデザイン」の下に、自分が使用または登録しているデザインのリストがあります。
現在使用しているデザインのタイトルをクリックして、スタイルシートを開きます。
※2007年2月6日のリニューアルでスタイルシートの場所が変更になりました。

だぁーっと英数字が並んでいるなかから、「.text」という項目を探します。
これが、記事本文の文字に関する設定です。
探し方? スタイルシートの枠の中で、「Ctrl」+「f」で検索ウインドウを開いて、.textを指定すれば、たぶん一発でいきます。

え? 知ってる? 
Windowsの基本操作ですもんね。それは失礼しました。


さて、このブログでは、
.text {
margin: 0;
padding: 0 5px;
line-height: 1.8em;
}
となっています。
ここに、「font: 12px;」という1行を追加すれば、記事本文の文字サイズの指定ができます。
このブログでは12pxになっています。
小さめでも、いいとこ11pxまでが適切なんじゃないかと思いますね。
逆に数字を大きくして、13pxや14pxにすれば文字は大きくなります。

ここでの設定はサイドバーやタイトルなどには影響しません。


「そーじゃなくて、全体のバランスがあるから、ページ全体を同じサイズで統一したいのよ」ってことのほうが多いかな?

実はこのブログでは、さっきの箇所では記事本文のフォントサイズを指定していません。
理由は、お借りしたテンプレートがそうなっているからです(笑)。

ブログ全体のフォントサイズを指定できる箇所があって、そこで指定してあります。

#container {
margin: 0 auto;
padding: 1px 0 0 0;
width: 800px;
color: #5D5D5D;
font: 12px Verdana, sans-serif;
border-left: 1px solid #999;
border-right: 1px solid #999;
background: #fff;
}
さっきと同じ「font: 12px」が出てきてますね。
これによって、全体が12pxになっているんです。

ちなみに、後ろにくっついているVerdana, sans-serifというのはフォントの種類です。
大雑把に言ってしまうと、ゴシック系のフォントってことです。
Webの文章は、特別な理由がない限り、ゴシック系のほうが読みやすいですよ。

今まで、ちょくちょく細かい文字設定を変えてみましたが、ブログの本文は12pxが標準と考えていいんじゃないかなと思います。
個人的には13pxも結構好きですけどね…。

今回の文字サイズの指定の仕方は、何通りもあると思います。
テンプレートがどこで指定しているのかを読み解くのがポイントになるでしょうね。
(私のような初心者にはそこが大変なんだけど…(>_<))

〔追記〕
ついでだったので、コントラストを上げて、文字をもう少し読みやすくしようと思い、文字の色を変えました。
元: 5D5D5D → 新: 4A4A4A
文字の色については、またいつか説明します。

↓参考になったら、クリックで応援してね!↓


この記事へのコメント
こんにちは、はじめまして。
10preさんのところで、こちらを知り
時々伺ってます。
テンプレートの作者が同じなので
カスタマイズの説明も分かりやすいです。
できるかどうかは別ですが。
文字の色を変えても読みやすくなるんですね、ちょっとやってみようと思います。
ではまた。
Posted by 花子 at 2006年09月16日 14:04
◆花子さん
初めまして! そしてコメントありがとうございます!!
しかも、時々来ていただいてたなんて、大感激です♪ヽ(*^∇^*)ノ*:・'゚☆

文字サイズ・行間・色は、読みやすさに大きく影響すると思いますよ。

私はまだわからないことだらけで、おかしなこともやっているんじゃないかと思いますが、自分が試したことを記事にしていけたらいいな〜と思ってます。
花子さんも自分好みのカスタマイズを加えていけるといいですね!
Posted by もも@管理人 このアイコンは投稿者が真の管理人であることを証明します at 2006年09月16日 16:57
私もかわいいアイコン探して「真の管理人」を照明したいです。
でも難しそうですね。
素材探すの苦手で・・・。
どうして素材屋さんはランキングとナビばっかりなんでしょう。
まずは素材探しです。
日記から編集画面へのリンクはできました。
やればできるもんですね。自分で感心しましたよ。
Posted by 花子 at 2006年09月20日 21:25
◆花子さん
やればできるものでしょう?
できると楽しいですよね♪
自分のブログって感じが増しますからね!

管理者の証明もなかなか素敵なカスタマイズでしょう?
(もちろん自分ひとりでやったものじゃありません。^_^ゞ)
他の人のカキコミとひと目で区別できる点がとても気に入ってます。
そのうちご紹介しますね。
Posted by もも@管理人 このアイコンは投稿者が真の管理人であることを証明します at 2006年09月21日 00:57
はじめまして!!

他社で、ブログしてます。
機能はいいのですが、ヘルプが少ないのがなやみです。
超初心者はつらいです・・・
でも、慣れてくると愛着がでて、引っ越せなくなっちゃいました。

風の噂でSeesaaと似ているって、聞いたので
Seesaaのカスタマイズを探検しにきました。そこで、ももさんちにたどりつきました。

アフィリエイトのサイトが多くって、なかなか目的にたどりつけなくって・・・
あきらめかけたところでみっけました!

ぴったりなのがありました。
コメントもおもしろいし。
たくさんおみやげもらって帰りますね。
ありがとうございました。

次の更新たのしみにしてます。

Posted by cocoro at 2007年11月02日 18:07
◆cocoroさん
ようこそ!
cocoroさんのお役に立てたんですね。
気持ちが伝わってくる素敵なコメントありがとうございます!
このブログをやって良かったな〜と嬉しくなりました。

私も初心者ですし、わかるところから一つひとつ試していってます。
Seesaaブログを始めた当初はヘルプが充実してなかったんですよ。
だからこそ、カスタマイズの勉強をしようと思ったんですよね。
cocoroさんにとっても、これがスキル向上のチャンスかもしれませんね♪

更新が遅くてゴメンナサイ。
cocoroさんのコメントを読んだら、やらなくちゃって気分が盛り上がってきました。(`・ω・´)っ
Posted by もも@管理人 このアイコンは投稿者が真の管理人であることを証明します at 2007年11月03日 13:58
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/23801340
※ブログオーナーが承認したトラックバックのみ表示されます。
※言及リンクのないトラックバックは受信されません。

この記事へのトラックバック
以下の書籍がきっと参考になります