【blogger】メディアクエリを使ってスマホの記事幅を広げてみた
 |
| 矢印部分の余白を減らしたい |
Chromeでpost-bodyの余白設定を確認します。
記事部分の余白で右クリックし「検証」を選択します。
 |
| 検証はIEよりChromeの方がわかりやすい |
paddingと書いてある部分が余白です。
上が10px
左右が30px
下が15pxです。
今回はスマホで表示させるときのみ、左右の余白を少なくし、記事の幅を広げます。
CSSでメディアクエリを使います。
CSS
@media screen and (max-width:480px) {
.post-body{
padding:10px 5px 15px;}
}
.post-body{
padding:10px 5px 15px;}
}
paddingの値は、
最初が上
真ん中が左右
最後が下
の余白を示しています。
左右部分の30pxを5pxに変えてみました。
 |
| 成功！ |
一行に20文字入るようになり、だいぶ読みやすくなったと思います。
ポチっとよろしく♪
