久しぶりにBloggerのテンプレートをカスタムしました。
スマートフォンなどモバイル機器は「いつでも」「どこでも」必要な情報が得られますが、ディスプレイサイズが小さいため記事が見にくい・読みにくいデメリットがあったりします。
Webデザイナーの方は美しさと一緒に可読性の高いサイト作りを行っていると思いますが・・・
今回はBlogger記事の可読性を向上させるカスタマイズ方法をご紹介。
簡単ですので、是非やってみてください。
カスタマイズ前後
最初にカスタマイズ前後の結果を見てください。
| カスタム前 | 行間 大 | 行間＋文字 大 | ||
 | → |  | → |  |
行間を開けるだけで可読性は上がりますが、文字が小さいと自然とディスプレイに顔を近づけ、目が疲れます。
そこで、文字サイズも大きくするとさらに可読性が向上します。
Webサイトはコンテンツ内容で勝負ですが、見にくいサイトはユーザに敬遠されますのでユーザ目線でスタイルを変更されることをオススメします。
カスタマイズ例
スタイルシートのmobileクラスを探して、赤字のスタイルを記述します。
/* Mobile
----------------------------------------------- */
/*↓記事本文の行間および文字サイズを大きくします。*/
.mobile .entry-content{
line-height:2em;
font-size:1.4em;
}
/*Hタグなども上で追記したスタイルに引きずられてしますので、font-sizeおよびline-heightを編集します*/
.mobile h4{
background-repeat:no-repeat;
background-position:8px 50%;
background-color:#2288bb;
margin:1.3em 0 1em 0;
padding:.5em;
color:#fff;
font-size:1.3em;
line-height:normal;
}
パソコンでモバイルサイトを確認する方法
パソコンでBloggerのモバイルサイトをチェックするときは
http://ご自分のURL/?m=1
と赤字の部分をURLに追記しましょう。
幅が広すぎですが、下記のように表示されます。
