• はてなアカウントでログイン
• 無料ユーザー登録

ベストアンサー

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

  スター

  • 

    10件のコメントを見る

  • a-kuma3 2013/04/17 22:14:47

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

    スター

  • rouge_2008 2013/04/17 23:43:45

    内容もかぶっていると思いますし、タイミングは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 2013/04/17 23:55:10

    タイミングは30分以上離れているのですが、新手のジョークですか・・・？

    あ、いや、本当に被りました　(^^;
    回答が付かなければ rouge_2008 さんは出てくるだろうとは思ってましたが、まだ登場してこないだろうと思ってリロードを怠りました。
    
    .archive ってのもあるんですね。
    お里が知れる　(´・ω・｀)

    スター

  • rouge_2008 2013/04/18 00:14:38

    リロードを忘れた時に回答がついていると焦りますね・・・
    
    ページを限定する他に、記事ごとの最後の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 2013/04/18 00:27:59

    何かいい案ありますか・・・？ > a-kuma3さん

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

    スター

  • rouge_2008 2013/04/18 01:32:40

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

    スター

  • a-kuma3 2013/04/18 08:32:29

    整形してますが、「全文を読む」近辺の階層はこんな感じになってます。

    <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 2013/04/18 08:59:34

    本当に詳細な解説ありがとうございます。非常に勉強になります。

    スター

  • rouge_2008 2013/04/18 10:28:32

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

    スター

  • mkusume 2013/04/18 15:51:48

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

    スター

その他の回答

• a-kuma32013/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;
  }
  

  スター

  • 

    1件のコメントを見る

  • mkusume 2013/04/18 15:53:15

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

    スター

この質問へのコメント

質問の情報

登録日時

2013-04-17 13:49:31

終了日時

2013-04-18 15:54:33

回答条件

1人5回まで

この質問のカテゴリ

• ウェブ制作

この質問に含まれるキーワード

人気の質問

• この英文どうなってますか？ The boy seemed to be waiting for his mother to come.（その少年は母親が来…匿名質問者111日前
• 不定詞の形容詞的用法らしいんですけど、副詞的用法と書いたら✖️ですか？ I want to buy a book to read …匿名質問者111日前
• 日向陽葵という○V女優が好きなのですが似ている○V女優はいますか匿名質問者16時間前
• 共通テストで使われるプログラミング言語は共通テスト特有の言語と聞いたのですが、受験勉強で身につけたプ…匿名質問者116時間前
• 内定してほしいポケモンはいますか？匿名質問者16時間前

メニュー

• 質問一覧
• カテゴリ一覧
• 無料ユーザー登録
• 人力検索はてなトップ

PC版

• お問い合わせ
• ヘルプ
• お知らせ
• はてなトップ