wordpress3.5に関して質問です。テーマはtwenty-elevenを使用しています。
対象サイトは
http://dca-labo.info/demo8
です。
記事名の下の日付（entry-meta)と区切り線（hrタグ）の間をもっと狭くしたいと思っています。
.entry-title、.entry-meta、hrタグの設定を色々変更したのですがうまくいきません。
対応方法ご教授頂ければと思います。
No.1
595
351
120pt
対象サイトの区切り線はhrではなく、記事表示部(※「article.hentry」)下の枠線として表示されています。
449
438
.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タグのみ変更します。
No.1
595351
ここでベストアンサー
120pt
対象サイトの区切り線は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タグのみ変更します。
今回の質問をする前にカスタマイズしていたんですね。
16日から開いたままにしていたページでソースを確認していたので気がつきませんでした・・・
記事本文のpタグが「.arrow」の外側(※同じ階層)に出力されるようになっているのでしたら、
「.entry-content .arrow p」で大丈夫なはずです。(なおかつ、「全文を読む」が出力されない記事がない事が条件になると思いますが・・・)
ことこまかなご指導ありがとうございます。今回の質問に関連してあらたな質問をさせて頂きますのでそちらも宜しくお願い致します。
No.2
49732154
150pt
狭くしたいすきまは、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; }
ありがとうございます。今回の質問に関連して新たに質問をするのでそちらも宜しくお願い致します。
1
1
1
今回の質問をする前にカスタマイズしていたんですね。
2013/04/18 10:28:3216日から開いたままにしていたページでソースを確認していたので気がつきませんでした・・・
記事本文のpタグが「.arrow」の外側(※同じ階層)に出力されるようになっているのでしたら、
「.entry-content .arrow p」で大丈夫なはずです。(なおかつ、「全文を読む」が出力されない記事がない事が条件になると思いますが・・・)
ことこまかなご指導ありがとうございます。今回の質問に関連してあらたな質問をさせて頂きますのでそちらも宜しくお願い致します。
2013/04/18 15:51:48