1366174171 wordpress3.5に関して質問です。テーマはtwenty-elevenを使用しています。

対象サイトは
http://dca-labo.info/demo8
です。
記事名の下の日付(entry-meta)と区切り線(hrタグ)の間をもっと狭くしたいと思っています。
.entry-title、.entry-meta、hrタグの設定を色々変更したのですがうまくいきません。
対応方法ご教授頂ければと思います。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/04/17 13:49:31
  • 終了:2013/04/18 15:54:33

ベストアンサー

id:rouge_2008 No.1

rouge_2008回答回数594ベストアンサー獲得回数3512013/04/17 21:31:10

ポイント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タグのみ変更します。

他8件のコメントを見る
id:rouge_2008

今回の質問をする前にカスタマイズしていたんですね。
16日から開いたままにしていたページでソースを確認していたので気がつきませんでした・・・
記事本文のpタグが「.arrow」の外側(※同じ階層)に出力されるようになっているのでしたら、
「.entry-content .arrow p」で大丈夫なはずです。(なおかつ、「全文を読む」が出力されない記事がない事が条件になると思いますが・・・)

2013/04/18 10:28:32
id:mkusume

ことこまかなご指導ありがとうございます。今回の質問に関連してあらたな質問をさせて頂きますのでそちらも宜しくお願い致します。

2013/04/18 15:51:48

その他の回答(1件)

id:rouge_2008 No.1

rouge_2008回答回数594ベストアンサー獲得回数3512013/04/17 21:31:10ここでベストアンサー

ポイント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タグのみ変更します。

他8件のコメントを見る
id:rouge_2008

今回の質問をする前にカスタマイズしていたんですね。
16日から開いたままにしていたページでソースを確認していたので気がつきませんでした・・・
記事本文のpタグが「.arrow」の外側(※同じ階層)に出力されるようになっているのでしたら、
「.entry-content .arrow p」で大丈夫なはずです。(なおかつ、「全文を読む」が出力されない記事がない事が条件になると思いますが・・・)

2013/04/18 10:28:32
id:mkusume

ことこまかなご指導ありがとうございます。今回の質問に関連してあらたな質問をさせて頂きますのでそちらも宜しくお願い致します。

2013/04/18 15:51:48
id:a-kuma3 No.2

a-kuma3回答回数4445ベストアンサー獲得回数18272013/04/17 22:09:47

ポイント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;
}
id:mkusume

ありがとうございます。今回の質問に関連して新たに質問をするのでそちらも宜しくお願い致します。

2013/04/18 15:53:15

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません