読者です 読者をやめる 読者になる 読者になる

気ままに殴り書き

日々感じたことを、気ままに書き記す予定でしたが。。。

ブログ・スマホサイトの読みにくさを解消、字体を更に大きく変更

はてなブログ ブログ運営 ブログ運営-カスタマイズ はてなブログ-カスタマイズ

f:id:kminebg1110:20160130132830j:plain

スマホ・ブログ関連で、歳を重ねるごとに大きくなるもの。私の場合、それはスマホのディスプレイサイズと私のブログのフォントサイズです。

スマホのディスプレイサイズは、老眼の進行に伴い5年をかけて、「3.2インチ・4インチ・4.3インチ・5インチ、そしてこの度5.5インチ」に大型化。

そして、私の「はてなブログ・スマホサイト」の文字サイズの変遷は、7カ月間で「デフォルト・15・16・そして今回16.5」にサイズ変更しました。

 

スマホサイトのフォントサイズ変更の背景

若い方は、ブログ初期設定のフォントサイズで全く差し障りないかもしれませんが、老眼が入ってくると、初期設定のサイズでは読み辛く我慢大会となります。私だけかもしれませんが、フォントサイズが小さいとそれだけで読まずにスルーしてしまうこともあります。

当ブログのスマホサイトは、以下の記事のとおり、ブログ開設直後に速攻でフォントサイズを16ポイントに変更していました。がしかし、今なお 自分のブログを読み返してみようにも、まだ文字が小さくてやや辛い。

そんなところで、最近、よく拝見しているブログがネットニュースラボ。このブログは、内容もブログのアクセスアップ・その他各ジャンルの記事など充実しており、かなり参考になります。

そして何よりも、その「ネットニュースラボ」のスマホサイトは、フォントサイズとその字体のためでしょうか、抜群に読み易いです。記事内容と読み易さと相まって、直近でのアクセス数は公開されていませんが、アクセスが集まっているのも頷けます(マイナーブログを運営する私が書くのも失礼ですけど)。

 

▼こちらの記事のとおり、ブログ開設・「はてなブログPro」への申し込み直後にスマホサイトのフォントサイズを変更しました。

 

スポンサーリンク

 

 

フォントサイズ変更のBefore・After

記事本文のフォントを16ポイントから16.5ポイントに変更(17ポイントまで上げると、デカすぎ感があるので、プラス0.5ポイントに留めました)、見出しを本文より10%大きくし、さらに太字にしてメリハリをつけました。

 

▼私の記事(ブログの記事作成に疲れた。そんな時には内部リンク・過去記事の簡易見直しがおすすめ)の一部ですが、修正前です。

私にとっては読み辛く、また、見出しと本文のフォントサイズが同じであり、もう少しメリハリをつけたい。

f:id:kminebg1110:20160130135256p:plain

 ▼修正後。本文のポイントは、たった0.5ポイントのアップに留めましたが、私のような老眼世代には読み易くなったはず。

f:id:kminebg1110:20160130135316p:plain

 

はてなブログでの設定方法

※はてなブログProの方が対象となります。

 

まずは、「はてなブログ」管理画面の「デザイン」を選択し、以下の赤丸のスマホアイコンをクリック。

f:id:kminebg1110:20160130141840p:plain

そして、「タイトル下」の赤枠の位置に、HTMLを記載します。HTMLは私のものを応用する場合には、コピペでOKです。

f:id:kminebg1110:20160130141853p:plain

 

記事本文のフォントサイズの変更・HTML

以下の16.5pxとあるところを任意で変更ください。一般的に、スマホで読み易いフォントサイズは14~16pxのようですが、私自身は16pxでも読み辛かったため16.5pxにしました。

<style type="text/css">
.entry-content {font-size:16.5px;}
</style>

 

見出し装飾のHTML

今回の変更にあたっては、下2行の「font-size」「font-weight」を修正しましたが、赤字について若干 補足します。

<style type="text/css">
.entry-content h4{
color: #ffffff;
background: #2980b9;
padding: 8px 8px;
font-size:110%;
font-weight:bold;
}
</style>

 

「補足事項」

  •  「.entry-content」のh4は、「はてなブログ」での中見出しです。大見出しはh3、小見出しはh5となります。
  • 「color」の赤文字は見出しの文字色、「background」の赤文字は背景色となります。上記HTMLのままコピペすると、私と同じ「水色の背景に白文字」の見出しとなります。色を変更する際の参照先は以下のリンク先を参照ください。
  • 「font-size」の110%は、記事本文のフォントに対するパーセンテージです。私は見出しの装飾で十分に目立っていることから、控えめに110%としています。
  • 「font-weight」は太字に指定しています。太字にする必要がない場合には、この行を削除ください。

 

▼「見出しの背景色等の選定に、参考になる色見本サイト」

WEB色見本 原色大辞典 - HTMLカラーコード

HTML,CSS カラーコード一覧表 | 背景色や文字色の設定

 

▼見出しのカスタマイズ・装飾なら、以下の「ゆきひー」さんの記事がおすすめです。見出しは様々なサンプルが表示されており、また見出し以外のカスタマイズ記事も豊富(もちろん一般的な記事も読みごたえあり)で、とても参考になります。