アフィリエイターに大人気の有料テンプレート賢威ですが、
人気のテンプレートということでデフォルトのまま使うと、
他のブログと被ってしまう。

どうしても、オリジナリティを出したい！
そのように考える方もいらっしゃると思います。

私のブログはほとんど賢威のデフォルトのまま使っています。
理由としては、あまり凝った作りにしても実際の所ユーザーさんにとってはあまり意味がないかな？
と思っていたからなんですが、一つだけ変えるべきところがありました…

フォントサイズです。
賢威のデフォルトの文字サイズだと、
スマホではちょうどいいくらいなのですが、
PCだとメインカラム幅がひろいこともあって、
少し見づらいですよね＾＾；

ですので、今回は簡単に賢威のフォントサイズの変更をする方法を紹介しています。

賢威のフォントサイズの変更方法。

今回は、賢威の本文の文字サイズを変更したいのですが、
いくつかやり方がありまして、
簡単な方法から順番にやっていきます。

どの方法もテーマ編集⇒design.cssから行います。

コードを書き換える前に、
design.cssのバックアップをとっておいて下さいね＾＾

まずは、コチラのコードを書き換えます。
design.cssの中の

/*——————————————————–
メインコンテンツ（本文）
——————————————————–*/

この記述の真下にあります。
ctl+Fで変更前のコードを検索していただくのが早いですね。

変更前

#main-contents{ font-size: 1.4em; }

変更後

#main-contents{ font-size: 1.6em; }

変更前のコードを、
変更後のコードに張り替えてください。

文字の大きさを確認してみてください。
変更前↓

変更後↓

だいぶ見やすくなりましたね＾＾

上のコードでは、本文（メインコンテンツ）の中のすべてのフォントサイズを、
1.4emから1.6emに変えました。

もし、もう少し大きく、もう少し小さくということでしたら、
変更後のコードの1.6と言う数字を1.5や1.7と言う数字に変えてください＾＾

数字が少なくなるほどフォントは小さく、大きくなればフォントは大きくなります。

お気づきの方もいらっしゃると思いますが、
先ほどのやり方では、pタグを使う本文以外のｈ２，ｈ３と言った箇所も大きくなっています。

それでは困るという方は、下記の方法でフォントサイズを変更してみてください。

段落タグの文字サイズだけを大きくする

先ほどのコード変更では、
本文中のすべてのタグのフォントサイズが大きくなりました。

それでは、ｈ２のフォントが大きすぎるので、
今回は、pタグのフォントサイズと、
ｈ４以下のpタグと同じフォントサイズを同様に大きくするコード変更を行います。

変更する場所は2箇所。

1つ目は先ほどと同じです。

/*——————————————————–
メインコンテンツ（本文）
——————————————————–*/

この記述の真下にあります。
ctl+Fで変更前のコードを検索していただくのが早いですね。

変更前

#main-contents{ font-size: 1.4em; }

変更後A

#main-contents{ font-size: 1.42em; }

変更後B

#main-contents{ font-size: 1.5em; }

まずは、変更後AかBどちらかをコピー＆ペーストで貼り付けてください。
どちらでも大丈夫です。
比較をし易いかなと思って複数用意しました。

もう一つ変更する箇所があります。

先ほど変更したコードより少し下、

/*●H4タグ*/を始まりの目印に、

/*●段落タグ*/
#main-contents p{ margin-bottom: 1.5em; }ここまでを変更します。

/*●リストタグ*/まで行ったら行き過ぎですので、少し戻ってきて下さい。

変更前

/*●H4タグ*/
#main-contents h4{
margin: 0 0 1.5em;
padding: 0.8em;
border: 1px solid #8e8e8e;
font-weight: bold;
}

#main-contents h4 a:link,
#main-contents h4 a:visited{ color: #333; }

#main-contents h4 a:hover,
#main-contents h4 a:active{ color: #9c3; }

#main-contents h4.img-title{
margin: 0 0 1.5em;
padding: 0;
border: 0;
background: none;
}

/*●H5タグ*/
#main-contents h5{
margin: 0 0 1.5em;
padding: 0 0.8em 0.5em;
border-bottom: 2px solid #414141;
font-weight: bold;
}

#main-contents h5.img-title{
margin: 0 0 1.5em;
padding: 0;
border: 0;
background: none;
}

#main-contents h5 a:link,
#main-contents h5 a:visited{ color: #333; }

#main-contents h5 a:hover,
#main-contents h5 a:active{ color: #9c3; }

/*●段落タグ*/
#main-contents p{ margin-bottom: 1.5em; }

変更後

/*●H4タグ*/
#main-contents h4{
margin: 0 0 1.5em;
padding: 0.8em;
border: 1px solid #8e8e8e;
font-weight: bold;
font-size: 1.1em
}

#main-contents h4 a:link,
#main-contents h4 a:visited{ color: #333; }

#main-contents h4 a:hover,
#main-contents h4 a:active{ color: #9c3; }

#main-contents h4.img-title{
margin: 0 0 1.5em;
padding: 0;
border: 0;
background: none;
}

/*●H5タグ*/
#main-contents h5{
margin: 0 0 1.5em;
padding: 0 0.8em 0.5em;
border-bottom: 2px solid #414141;
font-weight: bold;
font-size: 1.1em
}

#main-contents h5.img-title{
margin: 0 0 1.5em;
padding: 0;
border: 0;
background: none;
font-size: 1.1em
}

#main-contents h5 a:link,
#main-contents h5 a:visited{ color: #333; }

#main-contents h5 a:hover,
#main-contents h5 a:active{ color: #9c3; }

/*●段落タグ*/
#main-contents p{ margin-bottom: 1.5em;
font-size: 1.1em
}

変更後のタグを貼り付けると、
ｈ３以上のタグのサイズは少しだけ、
それ以下のタグではしっかりとフォントが大きくなりました。

変更前↓

変更後A↓

変更後B↓

いかがでしょうか？
どれも少し違うと言う場合は、
#main-contents{ font-size: 1.4em; }
変更前にこの1.4と言う数値だった箇所を変更してください。

変更後Bが1.5でかなり大きくなっていますので、
1.41～1.49の間で変更することをオススメします＾＾

2つ目の変更で段落タグやｈ４などのフォントサイズを変更していますが、
コチラはあまりいじらないほうが良いと思います。

年齢を重ねると、若い頃に気が付かなかったことにも気づけるようになります。
しかし、まさか文字サイズが小さくて読みにくいということまで気がつくとは…

そもそも、フォントサイズを変えようと思ったのは、
最近、自分のブログの文字がよく見えないと気がついたからでした　笑

老化は恐ろしいです><