はてなブログのフォント(文字)サイズを変える方法

 

皆さんこんにちは、こんばんは！

本日も気まぐれおやじのブログにご訪問ありがとうございます

おいらは今日も「日々楽しく、自由きままに！」

 

先日、ブロ友さんのブログにお邪魔した時の事です

フォント(文字)の大きさが通常より少し大きくて凄く見やすかったんです

それでブロ友さんにコメントで確認したら、何でもフォント(文字)の大きさを18ポイントにしたそうです

なるほどなるほど、良いと思った事は直ぐに真似ねばと思い、急いで変更しようと思ったのですが･･･

はて？どうやってするの？

って事になった訳ですわ

こんな時はGoogle先生ですよ

フム、フム、なるほどめっちゃ簡単やん

では設定方法を紹介していきます

っとその前に、今現在のフォント(文字)サイズを知っておく必要があります

 

フォントサイズ	Â
10px	これがこのサイズの文字の大きさです。
14px	これがこのサイズの文字の大きさです。
16px	これがこのサイズの文字の大きさです。
18px	これがこのサイズの文字の大きさです。
20px	これがこのサイズの文字の大きさです。
24px	これがこのサイズの文字の大きさです。

「はてなブログ」で使われているテーマのデフォルトのサイズは大体16px前後です

今のサイズから上のフォント(文字)サイズを参考に、大きさを決めてください

では始めていきます

 

はてなブログの設定画面の左側のメニューから【デザイン】をクリック

 

スパナマークの【カスタマイズ】をクリックし、一番下にある【デザインCSS 】をクリックします

 

デザインCSSが開きました

そこに以下のコードを貼り付けて【変更を保存する】をクリックして終了です

数字を変える事で、自分好みの大きさに変更できます

デザインCSSコード

.entry-content {

font-size:18px;

}

※デザインCSSコードを貼り付ける前に、念のために既存のCSSコードは、バックアップを取ってから貼り付ける様にして下さい

 

ここまでは本文全体のフォント(文字)サイズを変更する方法をご紹介しましたが･･･

ムム！

いや！ちょっと待てよ

文字を大きくするって事は、一行で入る文字数が少なくなるって事だよね

と言う事は、一行で収めたい文章が二行になる可能性があると言う事です

二行になっても良い文章だと良いけど、絶対に一行に収めたい文章ってあるよね

 

おぉ〜！設定する前に気づいて良かったぞ〜！

ではどんなケースが考えられるのか？

パソコンでは、一行の文字数が結構あるので問題は無いか

あるとするならスマホの方やね

という事で過去の記事をスマホで見る事にしました

するとまだ設定してないのに･･･

「うわっ！こんな事になってる！」

って気づいてしまったんです

それがこちらです

比較する上で、先ずはパソコンの画面から

 

おお！(ﾟдﾟ) 幸せの味 (´∀｀*)ｳｯﾄﾘ

この部分がパソコン画面では一行に収まっています

って言うか収まるように作っています

しかしスマホでは

 

ガビ～～～～～ン！

リが仲間外れになってる😭

そこまで計算して記事を書いて無かったです

おいらこういうのむちゃくちゃ嫌いなんです

デザイン的と言うか、何て言うかな～！

A型特有の、几帳面と申し上げましょうか、とにかく大嫌いなんです

 

そんなに気にしなくても良いんじゃないって言われるかもしれませんが、因みにおいらのブログにアクセスされる人の割合が、パソコンとスマホではほぼ半々なんです

と言う事は、半分の人にこの不細工な文字列のブログを見られていたという事です(恥)

この割合は、皆さんも大体この割合だと思いますよ

そしてユーザーの地域を見て下さい

大半が日本ですが、ニューカレドニア、アメリカ、中国の方にも不細工な文字列を晒しているのかも知れないんです

 

そこで今後の対策としてもそうですが、今この仲間外れ状態を修正しなくてはいけません

さてどないしましょうかね～！

１．顔文字を変える

嫌だ！顔文字はこれにしたい

２．ウットリを外す

嫌だ！外したくない

３．最初の顔文字を外す

嫌だ！二つ入れたい

 

💢イラ！

あれもこれも無理なもんは無理なんじゃ～！

って聞こえてきそうですが、何とかなるんです

 

ではまず基本的なおさらいからです

はてなブログには、文字の大きさを変える方法として代表的な方法が、文字の大きさ変更ボタンがあります

標準100％に対し、小が80％、中が150％、大が200％です

今回おいらは中に設定していました

ところがご覧の通りスマホ画面では一行に入らなかったわけです

当然大にすればもっと入りません

おお！(ﾟдﾟ) 幸せの味 (´∀｀*)ｳｯﾄﾘの大きさを変えなくては入りません

ではどうすればいいのか？

 

今回の場合は投稿済みなので、この記事の編集画面を開きます

おそらく見たまま編集になっていると思うので、HTML編集に変えます

すると上の画像みたいに何が何だか分からん暗号みたいなんが出てきます

ちょっと待って！

おいら優しいからもうひと手間かけて、大きな画像を用意しました

 

はてなブログの文字中は150％でしたよね

ここを140％に変更しました

 

すると一行に入りましたね

この様に微調整する事で、綺麗に、スマートに文字を並べる事が出来ます

 

スマホで記事を書いている人は、スマホ画面でプレビューすれば大体の仕上りイメージが分かるのですが、パソコンで記事を書いている人は、パソコンのプレビューだけでは無く、投稿する前に一度スマホのプレビューで確認する事をお勧めします

そして今回の様に文字が二行になっていたりすれば、事前に調整する事で防げます

 

今回は本文全体のフォント(文字)サイズを変更する方法と、特定の文章だけのフォント(文字)サイズを変更する方法を紹介しました

 

本文全体のフォント(文字)サイズを変更出来る場合は、読む人の立場で考えて、少し大きめにする事で高評価を得られると思います

ブログの文字の大きさによる読みやすさは大事な事です

せっかく良い記事を書いても、「見づらい」という理由で、誰にも読まれないのは悲しいです

フォント(文字)サイズはブログの第一印象です

より見やすいブログにするために、ぜひ一度お試しください！

 

今回も最後まで読んで頂き

ありがとうございました

では、また。。。

 

気まぐれおやじのブログは、にほんブログ村に参加しています

ポチっと応援よろしくお願いします

 

 

動画はこちら