カスタマイズ

リッチエディダーを使って記事を投稿している方へ

computer-coffee_cupブログの記事の行間が空きすぎのように感じている方はいませんか?
リッチエディダーを使うと改行した際、<p>文章</p>と記述されるのですが、p要素に囲まれた内容は1つの段落としてブラウザに解釈され、前後に一行分の空白ができる仕様になってます。
それに倣い、当テンプレートのスタイルシートにも、p要素には下マージン(余白)が設定してあるため、行間が空きすぎる傾向があります。
今回は、そのp要素に付与されたマージンを狭める、また、なくす方法を書きたいと思います。

スタイルシートのBlock-level Elements項目の

p {
  margin: 0 0 1.429em;
  margin: 0 0 2rem;
}

この部分がp要素のスタイルになります。

この部分を削除して頂くか、あるいは

p {
  margin: 0;
}

として頂ければ、p要素の余白をなくすことができます。
また、狭めるには、数字を小さくして頂ければと思います。

※なぜmarginを二重に設定しているか?
remという単位は比較的最近導入された単位なので、古いブラウザ(IE8以下)用にemを重ねて設定してます。
スタイルは優先順位により、下にあるものが上書きされる仕組みになってます。remが対応してないブラウザは、下の設定は無視されます。
詳しい説明は割愛しますが、既定フォントのサイズにもよりますが2rem=20pxになります。

-

スポンサーサイト

  • Hatena Bookmark

Comments

Leave a Reply