文字の大きさを変える方法　〜ライブドアブログのカスタマイズ〜

■1. 「HTMLってなに？」「スタイルシートってなに？」　と言う方は、まずこちらで学びましょう。めちゃくちゃわかりやすいです。

→１時間でつくるホームページ

HTMLとスタイルシートの何たるかが、わかりましたか？
では、次に行きます。


■2. HTMLとCSSとの関係
HTMLのそれぞれのタグに、CSSで決めたデザインを設定しています。
たとえば、僕のサイトの例ですが、日付(.dateというクラス名）には、小さめの太字、文字色は赤っぽいもの、というように設定されています。HTMLで記述するとき、<h2>という見出しのタグに、dateクラスを割り当てているんです。

ここまでは、簡単ですね。

■3．スタイルシート（CSS）の書き換え
○デザインの設定
　↓
○スタンダード
　↓
○CUSTOM
　↓
○スタイルシート書き換えの例


いろんなクラス名が記述されていますね。

　.blogtitle（一番上のでかいタイトル）
　.description（そのヨコの小さめの説明文字）
　.title（各記事のタイトル）
　.date（日付）
　.main（メイン文章）
　.main-continues（「続きを読む」ってやつ）
　.posted（記事の一番下の「Posted by・・・」ってやつ）

・・・などなど

で、それぞれに、

　　font-size

ってありますでしょう？
こいつをすきな値にすればいいんです。

一番小さい文字にするには、
　font-size:xx-small　　（僕の場合、サイドバーなどに使ってます）

ちょっと小さめは、
　font-size:x-small　　 （僕の場合、本文記事などに使ってます）

ちなみに、この「xx-」ってのは、相対的な大きさです。
ちなみに、7段階あります。

xx-small、x-small、small、medium、large、x-large、xx-large

のように。
順に1.2倍ずつ大きくなります。

また、

　12px　(12ピクセル)　

のように絶対的な大きさを指定してもぜんぜん平気。

ページ一番上のタイトルは、この方式です。
僕の場合、こんな風に設定してます。
　font-size:34px

■4. Blogの再構築　をちゃちゃっとやって、完了。




■この記事は要チェック！

１時間でつくるホームページ
HTMLの基礎ならここ！