人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

1366174171
●拡大する

●質問者: mkusume
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

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


a-kuma3さんのコメント
被った(内容と言うよりは、タイミングが) :-) んで、.hentry で padding-bottom を変えちゃうと、記事のページでソーシャルボタンが、コンテンツに被っちゃいます。 別にセレクタを指定した方が良いと思います。

rouge_2008さんのコメント
内容もかぶっていると思いますし、タイミングは30分以上離れているのですが、新手のジョークですか・・・? 個別投稿ページまでは確認していませんでした。 他のページで問題が生じるようでしたら、pタグと同じように限定したセレクタに対して指定した方がいいですね。 ※ホームやインデックスだけでなく、カテゴリーアーカイブや年月別アーカイブなどアーカイブにも適用させる場合は次のようになります。 >|| .home .entry-content p, .blog .entry-content p, .archive .entry-content p { margin-bottom: 0.5em; } ||< 記事表示部の方を同じように限定すると次のようになります。 >|| .home .hentry, .blog .hentry, .archive .hentry { padding: 0 0 0.1em; /* 1.625emを0.1emなど、内側下余白を好きな数値に変更 */ } ||<

a-kuma3さんのコメント
>> タイミングは30分以上離れているのですが、新手のジョークですか・・・? << あ、いや、本当に被りました (^^; 回答が付かなければ rouge_2008 さんは出てくるだろうとは思ってましたが、まだ登場してこないだろうと思ってリロードを怠りました。 .archive ってのもあるんですね。 お里が知れる (´・ω・`)

rouge_2008さんのコメント
リロードを忘れた時に回答がついていると焦りますね・・・ ページを限定する他に、記事ごとの最後のpタグのみ適用されるようにした方がいいかもしれません。(段落が一つだけの場合は気にしなくてもいいと思いますが、本文の他にmore-linkがあると、両方の間隔が狭くなってしまいますので、一応変更してみて好みの方を使ってください。) >|| .home .entry-content p:last-child, .blog .entry-content p:last-child, .archive .entry-content p:last-child { margin-bottom: 0.5em; } ||< ※「last-child」はCSS3なので対応していないブラウザもありますが、新しいブラウザを利用している場合はほとんど大丈夫なはずです。(何かいい案ありますか・・・? > a-kuma3さん) http://www.htmq.com/selector/last-child.shtml

a-kuma3さんのコメント
>> 何かいい案ありますか・・・? > a-kuma3さん << rouge_2008 さんにはバレてると思いますが、wordpress には疎いです。 一連の質問で、twentyeleven のスタイルを見てて思うのですが、何かふわっとしたスタイルですよね。 要素の BOX が微妙に重なってるのが多いし。 sidebar にある広告の iframe についての質問も、回答を決めきれず、という感じでした。 適用範囲を限定する、という意味では、ぼくの回答でも書きましたけど .arrow で範囲を狭めるのが良いのかな、という気がしてます。 クラス名の付け方から、「全文を読む」以外の要素にも .arrow が付いてても不思議ではない、という気はしますが。 last-child を実装していないブラウザは、気にしなくても良いだろう、ということは同意します。

rouge_2008さんのコメント
ありがとうございます。 すみません・・・CSSで何か他にいい指定方法があるかなと思ったものですから・・・ 「.entry-content .arrow p」となっていますが、「.arrow」ではなく「.more-link」の間違いでしょうか? でも、pタグを内包する「.arrow」の要素はないので、この指定方法は無理だと思いますが、私の勘違いでしょうか・・・(※記事本文の各段落のpタグも「全文を読む」のリンクを含むpタグも、すべて「div.entry-content」に内包されています。 もしかしたら「全文を読む」のリンクがない記事の事も考慮する必要があるかもしれません・・・)

a-kuma3さんのコメント
整形してますが、「全文を読む」近辺の階層はこんな感じになってます。 >|html| <article id="post-278" ...> <div class="entry-content"> <div class="arrow"> <p> <a href="http://dca-labo.info/demo8/?p=278" class="more-link"> 全文を読む <span class="meta-nav">&rarr;</span> </a> </p> </div> </div> </article> ||< a.more-link を囲む P の margin-bottom を小さくする、ってことですよね。

mkusumeさんのコメント
本当に詳細な解説ありがとうございます。非常に勉強になります。

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

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

2 ● a-kuma3
●150ポイント

狭くしたいすきまは、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;
}

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

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ