【コピペでOK】読みやすいブログデザインにするはてなブログのカスタマイズ
この記事を元に、CSSのデザインコードを作ってみました。
ブログで「読みやすい！」と思ってもらえる文章の書き方（レイアウト編） - ColMini
コピペだけでOKです。
CSSコード
PC版は｛デザインCSS｝に貼り付けてください。
スマートフォンの場合は「記事」→「記事上or記事下」に張り付けてください。
PC版
/*記事本文*/ .entry-content p{ margin-bottom:40px; } /*記事見出し*/ .entry-content h3{ margin-top: 80px; margin-bottom: 40px; } .entry-content h4{ margin-top:80px; margin-bottom:40px; }
スマホ版
<style>
/*記事本文*/ .entry-content p{ margin-bottom:30px; } /*記事見出し*/ .entry-content h3{ margin-top: 60px; margin-bottom: 30px; } .entry-content h4{ margin-top:60px; margin-bottom:30px; }
</style>
解説
<p>で挟まれたタグ同士の余白を設定しています。橙色で示された部分ですね。
同様に見出しの上下も、余白を設定しています。
注意点
自分で余白を挟まない
段落間の余白は自動で設定されます。そのため文章と文章の間に余白を自分で挟まないようにしてください。
改行を挟んでしまうと、大きな余白が生まれて読みづらくなってしまいます。
記事を書いた時は｢プレビュー｣で確認お願いします。
自分のサイトに応じたmarginの変更をお願いします
ブログのフォントやフォントサイズに応じて余白が広すぎたり、狭すぎる場合があります。
そんな時はmargin-bottomの値を変更してください。margin-bottomは<p>の橙色で囲まれている部分を示しています。
さいごに
｢余白｣を自分で設定するのが苦手な方は、ぜひ試してみてください
