読者です 読者をやめる 読者になる 読者になる

かるみに

趣味とともに生きる

【コピペでOK】読みやすいブログデザインにするはてなブログのカスタマイズ

デザインって難しい…どうもすーく(@sytry7)です

この記事を元に、CSSのデザインコードを作ってみました。

コピペだけで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>で挟まれたタグ同士の余白を設定しています。橙色で示された部分ですね。

f:id:trrun:20170205004300p:plain

同様に見出しの上下も、余白を設定しています。

f:id:trrun:20170205004257p:plain

注意点

自分で余白を挟まない

段落間の余白は自動で設定されます。そのため文章と文章の間に余白を自分で挟まないようにしてください。

改行を挟んでしまうと、大きな余白が生まれて読みづらくなってしまいます。

記事を書いた時は「プレビュー」で確認お願いします。

自分のサイトに応じたmarginの変更をお願いします

ブログのフォントやフォントサイズに応じて余白が広すぎたり、狭すぎる場合があります。

そんな時はmargin-bottomの値を変更してください。margin-bottomは<p>の橙色で囲まれている部分を示しています。

さいごに

「余白」を自分で設定するのが苦手な方は、ぜひ試してみてください