ブログの標準フォントサイズを小さくしてはダメな件とフォント指定のあり方（レスポンシブウェブデザイン）

　さまざまなブログを読んでいると、異常にフォントサイズが小さくなっている記事を見かけませんか？！

　ブラウザーのフォントサイズは、読者自身の環境で読みやすいサイズに設定している場合が多いです。

そんなところをCSSなどで記事本文の標準フォントサイズを小さくしたら？！

　私が見つけたブログで一番小さかったものは、《これくらい》でした。
デザインテーマ自体がそうなっているか、フォントのネスト指定で小さくなってしまったのだと思いますが...目の良い方は別にして、読みづらいですよね！
目がショボショボしてきますw

　記事作者自身の環境は別にしても、読み手のブラウザーは違うサイズ設定をしていることを大前提とする必要があります。
目が良い人も悪い人も悪い人もいます。
読み手はブラウザーの設定を自身の読みやすいサイズを標準設定にしています。
ブラウザーの標準サイズのフォントサイズを12ptにしている人がいれば、20ptにしている人もいるのです。

　そんな中、肝心なブログが相手を考えずにフォントサイズを指定していたら？！
はた迷惑でしかないのです！！
小さいフォントのブログはズームアップしたりしないと、読みにくくなります。
「読み手がいちいちズームするの？！」

記事内の単語や文章の強弱を付けるためのフォントサイズ指定は良いのですし、ブログ側がフォントファミリーを変えるのはアリだと思います。が、
ブログ記事本文の標準フォントサイズを小さく指定するのは、止めるべきです！

ということで、自身のブログがどう見えるのかチェックし、おかしい場合、CSSなどをチェックしてみてくださいね！

〜 はてなブログの場合 〜

　もし、テーマ自体が記事本文(entry-content)のフォントサイズを指定しているようなら、
デザイン→CSSで強制的に
.entry-content {
  font-size: 1.0rem;
}
などという具合にフォントサイズを調整します。

　テーマによって文字サイズが違っていたり、標準サイズのまま(未設定)のときもありますので、各自で使用しているフォントサイズをチェックする必要があります。
Chromeなら標準内蔵しているデベロッパーツールを使えます。

※ %とemは親要素の、remはrootのフォントサイズを基準に算出されます。rem のほうが親の状態に影響されないので、スッキリ設定できます！

理由は、下の『フォント指定のあり方』を参照してください。

はてなブログでデザインテーマが分からなくなったら...

デザイン→CSS の最初の行に

/* <system section="theme" selected="report"> */
@import "/css/theme/report/report.css";
/* </system> */

のように書かれています。
上の例では、report というテーマを使っています。

レスポンシブWebデザイン入門　マルチデバイス時代のWebデザイン手法

HTML5+CSS3でつくる！レスポンシブWebデザイン

フォント指定のあり方

　事前知識として、レスポンシブウェブデザインとは何かを知っておき必要があります。

レスポンシブウェブデザイン (Responsive Web Design, RWD)

　読者の画面サイズまたはウェブブラウザに応じてウェブページが閲覧できることを目指したウェブデザインの手法です。

・フルードグリッドは、ページ要素にピクセルやポイント等の絶対単位ではなく、パーセント等の相対単位を使用します。
・可変サイズの画像は、コンテナ要素の外にはみ出させないように、相対単位を使用します。
など。

　つまり、レスポンシブウェブデザインの重要なポイントは、あくまでも相対比で各サイズが計算される点にあります。
これは、Googleの検索エンジン内部でも同等の計算が行われます。

ですので、記事本文の標準フォントサイズは指定するべきではないです。

メリット
　① ブラウザーの設定フォントサイズになり、エンドユーザー・フレンドリーとなります。
　② pxなど直接的なフォントサイズをしているものは別にして、全体が相対的に変わってくれます。

デメリット：
　① 文字数で改行等をしている場合、レイアウトの崩れが起こる可能性があります。

そもそも、文字数などで改行して、レイアウトをつくる事自体が間違っています。
市販本などにブログはWordと同じように作るとか、アホなことが書いてるものがありますが、その考えそのものがWebデザインから大きく外れているのです (^^ゞ
PC/スマフォ/タブレットなどのデバイス、OSなどのフォント、ブラウザーまたはオーバーライドによるフォントの変更などフォントの横幅の違いなどにより、1行あたりの文字数が違うので、どうやっても統一したレイアウトにはなりません。

　フォントサイズのpxなど直接的な指定により、レイアウトし易いと明言しているブログの記事が多々ありますが、根本的に間違ったデザイン手法ですので、気をつけて欲しいです。

重要なことは
『読み手の使用環境と気持ちを考えたデザイン』
なのです！

趣味の延長上のブログならまだしも、拡散したい情報を掲載するブログやお小遣い稼ぎなど収益を目的としたブログは、こういったことが非常に重要になってきます。

　そういう私も、レスポンシブウェブデザインに関しては気をつけていても、ひょんな事で画像や表のサイズ設定とか修正し忘れちゃうんですけどね(^^ゞ
少なくとも、はてなブログの記事編集画面の画像のサイズ修正は、px指定から%指定に変更して欲しいです...。

今回の記事は、かなりダラダラとした感じになって、ゴメンナサイ(´･д･`)ゞ

※ 2019/04/16
　一部に誤字が合ったため訂正 (誤) CCS → (正) CSS