Pages

箇条書きの余白を変えてみよう

箇条書き、既定の余白が大きいなと思いまして。
タブレットで閲覧したときに特に改行が多くなって見辛さを感じることがあったので変更してみました。

追加したCSS

.widget .post-body ul {
    padding: 0 0 0 1em;
    margin: .5em 0;
    line-height: 1.7;
}
スタイルシートに上記の表記を追加しました。
paddingの数値は 上、右、下、左の順に余白の大きさを表しています。
今回は左に1emだけ余白を取りました。
emというのはページの基準としている文字サイズに対する相対的な単位。
1emは1文字分、のようなイメージです。

今回はページに合わせて行間の設定なども追加しています。


まとめ

最近はスマートフォン、タブレットなどの端末での閲覧が増えていることと思います。
既定の設定では余白が多すぎて、改行が多く見辛くなっていることもあると思います。
気になる方は一度変更にチャレンジしてみてもよいかもしれません。

0 件のコメント:

コメントを投稿