SHIINBLOG

すとふり

独断と偏見の雑記だよ!

【はてなブログ】私のスマホ版のデザイン変更まとめ!

こんにちは!zaki@neoneet_zakiです。

夜な夜なスマホのデザインをイジイジしていて、8割方終わったので自分の記録としてここに残しときます。

あと変更してみて、何が今ところ変わったのかとかね。

基本的に参考にさせて頂いたサイトはここです。

www.ituore.com

もうね、ダントツにわかりやすいと思います。

HTMLとかCSSの知識がない人間からすると神だわマジで。

で、何を変えたのかを全部書いていきますね!全部!

はてなブログのスマホ版!デザイン変更まとめ!

 

1.いらないものはとりあえず消した。!

以前も書いたんですが

 

neoneetzaki.hatenablog.com

 ここに書いてあるのですが消しました。

最初にいらないものは全部消してからいじりたかったのでね。

 

2.あらゆる背景色をオレンジに統一。

これも上の過去記事に書いてるんですけど、ヘッダーのところがごちゃごちゃしてたので、ヘッダーの色も変えました。

今は画像取っ払ってるのですけど、状況見てまた付けるかもしれません。

それか新しいヘッダー画像を義理弟に描いてもらうかですね。

<こんな感じが>

f:id:neoneetzaki:20160802053446j:plain

<こんな感じになりました>

f:id:neoneetzaki:20160802053539j:plain

めっちゃシンプルになったので、どうなのかわかりませんが、個人的には満足してます。

昔の方がいい!という人もいたので状況次第でこれも変えていきますが、現状はこれでいきます。

 

3.カテゴリーバーを付けた。

カテゴリーバーをつけました。

スマホ版はカテゴリーメニューがないので、付けました。

雑記ブログなので結構カテゴリー数が多くなってしまうんですよね。

効果あるかはさておき、押すとにゅるっと出てくるタイプのやつを付けてみました。

<ここを押すと>

f:id:neoneetzaki:20160802054213j:plain

<こんな感じで出てくるやつです>

f:id:neoneetzaki:20160802054245j:plain

これを二つ付けてます。

ヘッダーとフッタにぶち込みました。

フッタに関してはもう少し上に持ってきたいのですが、やり方がわからないので現状は一番下にあります。

 

4.フォントサイズをデカくした。 

デフォルトだとなんか小さいなって思っていたので、フォントサイズを大きくしました。

普段よくブログ読んでいる人は気にならないかもしれませんが、私の周りには文字を読むのが嫌いな人が多いので、少しでも画面内に収まる文字数が少ない方がいいかな?と思った次第です。

あと、小さすぎるとやっぱり読みにくいですからね。

私はスマホでもなるべく4行以内に改行するようにしているのですが、人によっては文字の羅列を見ただけでブラウザバックする人がいるので、調整が難しいところです。

今はスマホは16pxにしているのですが、状況次第で変えていきます。 

 

5.フォローボタン(丸形)を設置した。 

<こういうやつです。>

f:id:neoneetzaki:20160802060242j:plain

殆どのブロガーさんが付けてらっしゃいますよね。

丸より四角のやつが多いような気がしますが、私は丸形にしました。

スマホ版は「読者になる」ボタンも少ないですし、少しでも取りこぼしを防げたらなと思ったので付けました。

これはこちらのブログからやり方を教えて頂きました。

www.yukihy.com

助かりました。ありがとうございます。

簡単にできますので、まだ導入していない方は是非使ってみてください。

 

最後に

今は、先輩方が簡単にカスタマイズできるようにしてくれていますので楽ですね。

とりあえずはこんな感じでやっていこうかなと考えています。

また、少ししたらいじるのでしょけど、案外カスタマイズしてると時間が奪われるので、記事が書けなくなったら本末転倒ですしね。

ゆるりとやって行きたいと思います。

おわり!!

 

もしお役に立てたり、面白いと感じて頂けたら読者登録お願いします。