スタイルシート(CSS)で文字の大きさを変える方法 | 自然派WEB@自然共存&子育て親父&WEB集客=両立可能

自然派WEB@自然共存&子育て親父&WEB集客=両立可能

自然とインターネットの融合・企業や起業家育成ノウハウから、自然交流方法を伝授!中小企業・SOHO・店主・起業家をビジネスサポートをする傍ら、ツリーハウスオーナーとして、ビジネス・マーケティングと自然との付き合いの中で、相互効果を広めています。

野口です。

スタイルシート(CSS)を編集して、表示される文字の大きさを変える方法です。

※今回は用語解説はしませんので、分からない単語は検索などで調べてみてください。


まず、スタイルシートの編集画面を出しましょう。

自然派WEB@自然共存&子育て親父&WEB集客=両立可能-アメブロカスタマイズ

「ブログを書く」→「デザインの変更」→「スキンCSSの編集」と進みます。


次に実際にスタイルシートを編集します。


しかし、スタイルシートの内容は長いので、検索を上手に使います。

検索キーワードは「.contents」です。もしかしたら選択しているスキン(テンプレート・デザイン)によって、「.contents」では無い場合があります。

その場合は、「font-size」で検索してください。「font-size」は、そのまま「文字サイズ」の設定になります。

自然派WEB@自然共存&子育て親父&WEB集客=両立可能-アメブロカスタマイズ

私のブログでは、現在「14px」を指定しています。

この数字部分を大きくすれば文字も大きくなりますし、小さくすれば文字も小さく表示されます。


文字のサイズを変更したら、「line-height」の設定値も気にして下さい。

「line-height」は「行の高さ」です。

「font-size」と同じ数字を設定すれば、行間が詰まって表示されます。「font-size」より大きく設定すれば行間が広がりますし、小さく設定すると文字が重なってしまいます。

※「px」(ピクセル)は単位です。


そして、変更したらいきなり保存せずに、必ずプレビューで表示内容を確認してください。

思っていたような表示にならない場合は数値を戻します。また、どこを変更したか分からなくなったら、保存しないようにしましょう。(その場合は、また最初から始めましょう。)


「font-size」などは、何箇所にも設定されていますので、最初は特に、記事部分以外の文字サイズの設定をしてしまうこともあると思います。

何かあったらいつでも戻せる状態(方法)を確保しておくことで、不慣れな作業にも、安心して取り組めます。


スタイルシートを編集することも大切ですが、独学する時の基本として、「いつでも戻せる」をこの機会に体得してみてください。慌てることが激減します。