KsMemo

メインブログからブログ運営に関する記事のみを集めてきました

はてなブログ スマホ版の見出装飾、フォントサイズ変更しさらに見易く

f:id:kminebg1110:20170503214449j:plain

「FC2ブログ」も同様でしたが「はてなブログ」においても、スマホ版の初期設定ではメリハリがない、本文のフォントサイズが小さく私のような老眼世代には読みづらい、ことがあげられると思います。そこで、諸先般の方々の真似・HTMLはコピーですが、私のように初心者にもお手軽にできる変更を施してみました。行ったことは、以下の2つです。

  • フォントサイズを大きくする
  • 見出しにメリハリをつける

 

変更のBefore & After

▼変更前。「見たまま編集」にて中見出しとしましたが、見出しが太文字になったのみで、メリハリがない。ここはもう少し強調したい。

 

f:id:kminebg1110:20150720093803j:image

 

▼変更後。見出しを強調し、フォントサイズを15ptに変更。フォントサイズは変更前後と変化がない?
 

f:id:kminebg1110:20150720093816j:image

 

▼フォントサイズが変更されることを確認するために、あえて18ptにしてみた。サイズ変更となっていることは明らかです。
 

f:id:kminebg1110:20150720094128j:image

 

はてなブログ・ダッシュボードでの変更箇所

変更にあたり、はてなブログのダッシュボードでの変更箇所は以下となります。

 

▼ダッシュボード⇒デザインのスマホアイコン⇒ヘッダ 

f:id:kminebg1110:20150720100851p:plain

 

▼ヘッダ・タイトル下のHTMLの記述を行いますが、諸先輩方のHTMLをコピペし、自分用に置き換える方法が最も確実かつ容易かと思います(私もそうしました) 

f:id:kminebg1110:20150720100858p:plain

 

HTML記述内容

フォントサイズの変更 

記事本文のフォントサイズの変更は、以下を上記の画面にコピペします。私は15pxとしていますが、こちらは任意にて。一般的に読みやすいフォントサイズは14~16pxのようです。

 

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

 

見出の装飾

以下をコピペします。文字色・背景色は任意で設定となります。

 

<style type="text/css">

.entry-content h4 { color: rgb(59, 66, 126);/*文字色*/

background: rgb(243, 242, 252); /*背景色*/

padding: 10px 10px; /*見出しまわりのスペース 上下、左右*/

border-left: 9px solid rgb(97, 101, 134); /*見出し左の線*/}

</style>

 

今回のカスタマイズにおいて、参照させていただいた記事は以下となります。他にも取り入れたいカスタマイズがあり、大変参考になります。