【stinger3カスタマイズ】フォントを変えるまとめ。タイトル、サイドバー、NEWENTRY etc

フォントは一つ変えたら全部変えたくなります。こだわりです。
ブログ開設１月半でやっとほぼフォントの変更が出来たのでまとめてみました。

記事のフォントを変更する

記事のフォント、文字サイズは読みやすさに大きく影響を与えます。
すごくいいブログなんだけど字が小っさすぎ！っていうブログ良く見かけます。（特にfc2とかライブドアに多い）

stingerはそれらに比べると読みやすいんですがより読みやすく変更しました。アメブロでも使ってましたが「メイリオ」が読みやすくてかわいくてお気に入りです。

変え方は「おっちゃん」のブログが参考になります。

STINGER3のフォントを変えて読みやすくする

タイトルとその下、キャッチフレーズのフォント

タイトルとその下の文を指定しているのはスタイルシートの「基本のhタグ」の中にあります。

/*—————————–
基本のhタグ
——————————*/

の下にある

/*ブログタイトル*/　からがタイトル部分

/*ブログタイトル下の文*/　からがタイトル下の文を指定しています。

ブログタイトルのフォントを変更する

ブログタイトルを変更するにはブログタイトルをしているコードの一番下（/*ブログタイトル下の文*/のすぐ上）に

font-family: nyala;

を追記します。フォントの種類をお好みで変えて下さい＾＾

Google Fontsを使ってさらにCoolに

フォントはOSごとに表示が変わる場合があります。Google Fonts等、webフォントを使うとどのPCから見ても同じ表示になります。

Google Fontsを使ってStingerをかっこよくカスタマイズ！

を参考に当ブログもGoogle Fontsを利用しています。

タイトル下の文のフォント

タイトル下の文の文字を指定しているのは

/*ブログタイトル下の文*/　の下の方、#h-l .descrから始まる所です。

ブログタイトルと同じ要領で　/*記事タイトル*/　のすぐ上に
font-family: フォントの種類;を追記します。

ついでにフォントの大きさを20pxにして文字の太さを太くしました。フォントの種類はメイリオです。

サイドバー、

サイドバー見出しのフォント変更

サイドバー見出し（デフォルトだと最近の投稿とかアーカイブの所）を指定しているのはCSSのサイドカテゴリの中のこの部分。

/*—————————–
サイド
——————————*/

の下のほうにある

ちなみにbackground-image: url(images/ca3.png);の（）内を変更することですきな画像に置き換えれます。大きさは大体30pxくらい。

NEW ENTRYのタイトルのフォント変更

NEW ENTRYのタイトルのフォントは

/*———————————
関連記事とか
——————————–*/

の下の方

これでだいたいのフォントが変えれるんじゃないかと思います。
これが変更後↓　所々サイズとか色とかも変えました。

今回何気に力入ってます下手なりに。

 合わせて読みたい記事

stinger子テーマ、yukiguniを使ってブログをリニューアル。ヘッダーを横幅いっぱいに。

これだけはやっておきたかったstingerカスタマイズとプラグインと＋α