2017/09/01

【blogger】メディアクエリを使ってスマホの記事幅を広げてみた




スマホでblogを見たときに、本文の幅が狭く読みづらく感じましたので、修正したいと思います。





矢印部分の余白を減らしたい


Chromeでpost-bodyの余白設定を確認します。
記事部分の余白で右クリックし「検証」を選択します。



検証はIEよりChromeの方がわかりやすい


paddingと書いてある部分が余白です。
上が10px
左右が30px
下が15pxです。

今回はスマホで表示させるときのみ、左右の余白を少なくし、記事の幅を広げます。


CSSでメディアクエリを使います。

CSS
@media screen and (max-width:480px) {
.post-body{
padding:10px 5px 15px;}
}

paddingの値は、
最初が上
真ん中が左右
最後が下
の余白を示しています。

左右部分の30pxを5pxに変えてみました。



成功!


一行に20文字入るようになり、だいぶ読みやすくなったと思います。