2004年09月14日

フォントサイズの変更にチャレンジ

昨日に引き続き、今日もデザインのカスタマイズです。

これまたコメントで指摘されたのですが、
ここLivedoorブログの文字サイズって小さいですよね。
正直なところあまり気にしていなかったんだけど、
指摘されるとそう思えてくる。
大きくしないと気がすまなくなってくる。

そういうことで、今回はフォントサイズの変更にチャレンジです。

これもまた、例によってデザインの設定から行います。

もちろんデザインを「Custom」にしておかなければなりません。
今回は各ページのHTMLを編集するのではなくて、
デザインの編集画面の最初の画面(スタイルを読み込んで設定する画面)で
スタイルシート(CSS)なるものを編集します。

フォントの設定はCSS内のfont-sizeの値を変更します。
探してみると、結構たくさんあります。
手当たり次第に変更してもいいのですが、
私はとりあえず記事のフォントを大きくしたいだけだったので、
部分的に編集することにしました。

記事のフォントはどうやら「.main」のところで設定されているようです。
これをキーワードにして探します。
今回はCSSの内容をテキストエディタにコピーして検索してみました。
一発で見つかりました。
その付近に「font-size:x-small」という設定があると思います。
この部分を「font-size:15px」と変更してみます。

保存して、ブログを再構築(CSSだけでいいみたい)して、確かめます。
どうやらうまくいった模様です。

サイズはいくらかの指定方法があります。
今回は15pxというように、ピクセル数で設定しましたが、
他にも、xx-small、x-small、small、medium、large、x-large、xx-largeなどや、
120%というように割合指定も出来るようです。
ただ、何を100%とするのかよく分かりませんでした。
試してみましたが、100%で程よく大きくなりました。
大きさで指定するなら「small」あたりがちょうどいいかと。
120%やmediumだと少し大きくなりすぎると思います。

私はあえて15pxというように、フォントサイズで指定しました。
こうするとブラウザの文字の設定を変えても、大きさが変わりません。
smallや%は相対サイズ指定で、ブラウザの設定に応じてサイズが変わります。

うーん、15pxだと最初の設定のx-smallと大して変わらない・・・
でも16pxだとちょっと大きすぎるような気が。
微妙だ。

まあ、このあたりは好みなのでいろいろ調整が必要でしょう。

最後に、記事の文字だけ大きいとバランスが悪かったので、
記事タイトルのサイズも同じ大きさに合わせました。

他にも私が調べた限りでは次のキーワードで変更箇所を検索できます。
.blogtitle ブログのタイトル
.date 記事の日付
.title 記事のタイトル
.main-continues 続きを読む
.posted postedbyの部分
.menu 記事の下のメニュー
.comments-**** *にはいろいろな文字が入ります。コメント関連。
.trackback-**** トラックバック関連
この付近に必ずfont-sizeがあります。

他にも事細かに設定できますよ。
めんどくさい人は、font-sizeを手当たりしだいsmallあたりに変更してみてもいいかもね。

人気ブログランキング。目指せトップ10入り!人気ブログランキング


Posted by hammer77 at 23:54│Comments(9)TrackBack(5)Edit

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

トラックバックありがとうございます。トラックバックスパム対策の為、この記事へトラックバックするにはそちらの記事内にこの記事へのリンク(参照リンク)が必要になります。不本意ではございますが、ご理解ほどよろしくお願いいたします。(トラックバックポリシー)
この記事へのトラックバック
MSゴシックとMSPゴシック、MS明朝とMSP明朝など、 違いがハッキリ分かっていない人が多いと思う。 まず種類分けすると、 MSゴシック、MS明朝→等幅フォント MSPゴシック、MSP明朝→プロポーショナルフォント である。 では、等幅フォントとプ
等幅フォントとプロポーショナルフォント【おでぼうご】at 2004年10月19日 10:11
なんかちがう・・・。色々なBlogを見ていたら、同じlivedoor Blogなのに、とても複雑なデザインのものがある。まあ、自分とは無縁のことと思っていた。そう、カスタマイズするなんて・・・。   きっかけはこの記事。そう、せめて文字サイズぐらい何とかしたいじゃない
kasutamaizu【toriaezu】at 2005年01月12日 13:40
文字をデカくしました。 崩れたりしてませんか。 表示がおかしくないですか。 デカすぎたり、小さすぎたりしませんかね。 一応、IEとsafariで確認しましたが・・・。 スタイルシートはワケが分かりませんが 「ブログをとことん調べます」さんの記事 ・・・を参考に.
文字をデカく、形式にこだわる【敵艦隊見ゆ】at 2005年02月05日 10:19
タイトルを大きくしてみました。 いろいろいじるところってあるんですね。 ここを参考にしました。分かりやすい・・・。 ブログも奥が深いなあ・・・。 私Muraoのサイト「健康への試行錯誤」 メルマガ「健康への試行錯誤」
タイトルが大きくなったでしょ。【健康への試行錯誤などのブログ】at 2005年09月25日 21:23
この業界で昔から議論される内容で、 『フォントの絶対指定にするか?相対指定にするか?』 というものがある。 ■相対指定(relative size)とはタグのsize属性で指定するものとスタイルシート(css)のfont-sizeプロパティでemや%で指定するものまたはキーワド(small,large..e...
フォントサイズはどうしましょう?【WEBサイト+phpリファレンス】at 2006年02月26日 02:36
この記事へのコメント
こんにちは、トラバありがとうございます^^

な〜るほど、記事は main なんですね。
この間は記事のfontを変えたくても、それがどこなのかわからないので、結局全部変えてしまいました。
ヤプログだとプレビュー画面があるから、だいたい見当がつくんですけどね〜
Posted by nyaまたはk2002 at 2004年09月16日 18:08
今までブログのカスタマイズなんて絶対出来ない!って思ってましたが、
こちらの記事が解りやすくて、ちょっと挑戦してみようと思い立ちました。
本当にとても勉強になります。
また参考にさせていただきます。
Posted by さくら at 2004年12月24日 18:08
はじめまして。さくらさん。
お役に立てたようでよかったです。分かりやすいと言われるとすごく励みになりますね。最近少し記事が雑になってきたと反省しています。初心にもどってまた記事を書いていきますので、今後ともよろしく。
Posted by hammer at 2004年12月24日 22:59
はじめまして。今日からブログをはじめましたが、文字の小さな事にはうんざりしていました。早速、フォントサイズを大きくさせて頂きました。
情報の提供、ただひたすら感謝します。
Posted by あきの ひでお at 2005年01月15日 07:44
最近はデザイン的にフォントを小さくするのが流行みたいですね。私も小さい文字は読み難くて嫌いです。年なのか?
Posted by hammer at 2005年01月16日 00:27
はじめまして
とつぜんなんですが、最近livedoorでぶろぐをはじめたものです
コメントの文字サイズをどこから設定できるのかおしえていただけないでしょうか?
Posted by fantasie at 2005年04月26日 06:36
はじめまして、fantasieさん。

コメントの文字サイズの変更はスタイルシートの編集で、comments-bodyのfont-sizeの値を変えてみてください^^
Posted by hammer at 2005年04月26日 22:57
大変参考になりました!
初めまして。Muraoと申します。ブログはまだ始めたばかりで実はまだよくわかっていません。
このブログのおかげで私のブログタイトルが読める大きさにようやくなりました。

ありがとうございます。

「人気ブログランキング」とは、ただクリックするだけでいいんですか?

次に出てくるランキング表みたいな画面でも何かする必要があるのでしょうか?

またお邪魔します。
Posted by Muao at 2005年09月25日 21:21
フォントサイズの調整は重要ですよね。
手軽で効果の高いカスタマイズです。

ブログランキングは発行されたリンクを貼るだけでいいですよ^^
Posted by hammer at 2005年09月25日 22:53
コメントお待ちしています。こちらではコメント認証もコメント保留も行っておりません。お気軽にコメントください^^