▽1
●
rouge_2008 ●120ポイント ベストアンサー |
対象サイトの区切り線はhrではなく、記事表示部(※「article.hentry」)下の枠線として表示されています。
.hentry, .no-results { border-bottom: 1px solid #DDD; margin: 0 0 1.625em; padding: 0 0 0.1em; /* 1.625emを0.1emなど、内側下余白を好きな数値に変更 */ position: relative; }
記事本文は、段落ごとにpタグで囲まれて表示されますが、このpタグの外側下余白にも値が設定されています。
p { margin-bottom: 0.5em; /* 1.625emを0.5emなど、外側下余白を好きな数値に変更 */ }
※上記だとすべてのpタグの外側下余白が変更されてしまいますので、もし必要でしたら、以下のように限定したセレクタに対してスタイルを変更するといいと思います。
.home .entry-content p, .blog .entry-content p { margin-bottom: 0.5em; }
※上記のようにすると、ホームやインデックスページの記事本文内のpタグのみ変更します。
狭くしたいすきまは、style.css で、class="hentry" の padding-bottom と、
.hentry, .no-results { border-bottom: 1px solid #ddd; margin: 0 0 1.625em; padding: 0 0 1.625em; /* ※ここ */ position: relative; }
class="more-link" な「全文を読む →」の A タグを囲んでいる P タグの margin-bottom の指定でできています。
p { margin-bottom: 1.625em; /* ※ここ */ }
これらは、他のところでも効いてしまう指定なので、トップページとカテゴリの一覧だけで効くようにする必要があると思います。
style.css に、以下のような定義を追加すると、期待している感じになるんじゃないかと思います。
body.home .hentry, body.category .hentry { padding-bottom: 0; /* 適当な大きさに */ } .entry-content .arrow p { margin-bottom: 00; /* 適当な大きさに */ }
因みに、記事と記事の間の線は <hr> ではなく、.hentry に対する border-bottom で実現されてます。
.hentry, .no-results { border-bottom: 1px solid #ddd; /* ※ここ */ margin: 0 0 1.625em; padding: 0 0 1.625em; position: relative; }