渋谷で働く営業本部長のブログ

渋谷で働く営業本部長のブログ

渋谷で働く営業本部長のブログ

はてなブログ:エントリーの文字サイズの変更

f:id:ss17935:20190119134136j:plain

 

はてなブログで記事を書いている訳ですが、歳のせいか最近文字が小さいと感じるようになりました。

調べてみるとデフォルトでは、PC・スマホともに 16.5px のようです。

という事でとりあえず記事部分の文字サイズを大きくしてみました。

もちろん、Google 先生に頼り、コピペだけでできる方法を見つけました。

 「カスタマイズ」→「デザインCSS」で指定のコードを貼り付けます。

 

記事内の文字サイズをまとめて変更する

/****************
文字サイズの変更
*****************/
.entry-content {
font-size:19px;
}

 

Before:

f:id:ss17935:20190119142340p:plain

 

After:

f:id:ss17935:20190119142358p:plain

 

Before と After で記事内の文字が赤枠からはみ出してますね。

しっかり文字サイズが大きくなっている事がわかるでしょう。

 

見出しと通常文字を別のサイズにする

上のコードだと記事内の文字サイズが一律 19px になります。

私はよく見出しをつかって記事を見やすくしています。

大見出し、中見出し、小見出しと文字サイズを変えてやると見栄えが良いですよね。

そうするには、それぞれに違う文字サイズを設定します。

ちなみにはてなブログでは、以下がそれぞれのタグです。

 

大見出し:h3

中見出し:h4

小見出し:h5

普通:p

 

これをコードにすると以下になります。

 

/****************
文字サイズの変更
*****************/

.entry-content h3 {
font-size:24px;
}
.entry-content h4 {
font-size:22px;
}
.entry-content h4 {
font-size:20px;
}
.entry-content p {
font-size:19px;
}

 

こんな感じになります。

 

f:id:ss17935:20190119143801p:plain

 

font-size:XXpx; の XX は好きなサイズに自由に変更して下さい。

 

↓ ランキングに参加しています。よろしければポチッとして下さい。

にほんブログ村 ブログブログ ブログノウハウへ