はてなブログスマホページデザインカスタマイズしてみた【はてなブログ始めましたシリーズ】

スポンサーリンク

絶賛はてなブログカスタム中です

 

今回ははてなブログにスマホからアクセスしたときの画面を見やすくカスタマイズしてみました

現代のブログの閲覧は大多数がスマホからということなので、見やすくて早いブログにしたいと思います

今回も、ネット上の神様たちの力を借りております

(いつもありがとうございます)

はてなブログスマホ画面変更したこと

ヘッダー画像を追加

デフォルトだと味気ないはてなブログのスマホデザイン


f:id:tks-osm01:20160501170138j:image

せめてヘッダー画像くらいは表示して自分のブログだってことがわかるようにしたかったので少々変更しました

これははてなの設定からできました

 

これは単純に「デザイン」「スマホのマーク」「ヘッダー」「画像だけ表示」でオッケーです。

はてなブログの"スマホ ヘッダー"のカスタム【ブログカスタムVol.6】 - 急がば 急いでまわれ!

変更後がこんな感じ

丸のアイコン邪魔だな。。
f:id:tks-osm01:20160501170150j:image

 

ヘッダーに最新記事と人気記事へのボタンを追加

ヘッダーに最新記事と人気記事へのボタンを追加できる方法が紹介されていたので追加してみました

georges.hatenablog.jp

 

スマホのCSSをコピペって書いてあるところがあるのですが、はてなブログでスマホ用のCSSを編集する方法がわからなくて調べました

(ネット上で探せば神は見つかります)

tsukuruiroiro.hatenablog.com

ということで無事スマホ用デザインでもCSSを編集できました

 

フォントをオシャレにする

トップページの記事一覧のデザインにメリハリをつける

上記2項目はまとめて

はてなブログのスマホデザインCSSをカスタマイズして、簡単にオシャレに見せる方法 - Literally

Literallyさんからコピペです

 

記事中の見出しを変える

見出しは下記サイトを参考にさせていただきました

見出しがいい感じになった!!!

感動ものの変化です!!

www.yukihy.com

目次をちょっとカスタマイズ

スマホの画面だと目次が強調されないで変な感じでした

f:id:tks-osm01:20160501191003p:plain

 

コチラのサイトを参考にしました 

www.yukihy.com

こんな感じになりました

f:id:tks-osm01:20160501191220p:plain

 なんか番号つかないけど、いいや。笑

まとめ

はてなブログのスマホ画面をカスタムしてみました

参考にさせていただいたブログの皆様に感謝です