はてなブログのスマホ用デザインを変える方法

昨日、このブログのデザインテーマをカナヘイさんのテーマに変更しました。

イラストももちろん可愛いのですが、手書きフォントが大好きです。
このブログは読み返して勉強することが多いので、この手書きの字は自分で読んでて、もっと読みたい！何時間でも読める！！と思ったので、自分の勉強時間も長くなるなーと思って嬉しかったです。
ですが！
iPhoneから見ると、テーマが変わってませんでした(泣)
なので、iPhoneでもテーマを変える方法を調べてみました。
※カナヘイさんのテーマをiPhoneで表示する、という記事ではありません

レスポンシブデザイン対応テーマなら、チェックを入れるだけ

レスポンシブデザイン対応テーマであれば、PCのブログ管理画面で、「デザイン」からスマートフォンのマークを選択し、「詳細設定」からレスポンシブデザインにチェックを入れるだけです。


ですが、カナヘイさんのデザインはレスポンシブデザインに対応していないので、ここにチェックを入れるとPCと同じ文字サイズでスマホに表示されてしまい、小さくて読めないです。

レスポンシブデザイン対応テーマを選ぶ

とりあえず、レスポンシブデザインに対応した公式テーマを選んでみます。 レスポンシブデザイン対応の公式テーマについては、長くなったので次のページにまとめました。

ramenchahan.hatenablog.com

とにかく手書きフォントにしたい！

「寿司ゆき」とか、かわいい！って思ったテーマもあったのですが、やっぱり手書きがいいので、フォントを変える方法はないのか調べてみました。

gattolibero.hatenablog.com こちらのサイトを参考にさせていただきました。

とりあえず、デザインはNavy Blueを選びました。
上記サイトで紹介されているデザインCSSの後に、

* {
    font-family: 'HuiFontP109', sans-serif;
} 

っていうのをコピペすると、とりあえず全部が手書き文字（ふい字っていうんですね）になります。
ついでに、ふい字は文字がちょって読みにくいので←

.entry-content {
    font-size: 19px;
}

っていうのも追加しておくと、記事の字が大きくなります。
これらの設定をすると、以下のような感じになります。

おわり

とりあえずこのデザインにしておこうと思います。
なんか前のフォントの方が読みやすかったような気がしてきたぞ…？