サポート » 使い方全般 » 記事のサムネイル付き横並びリストのul上が一段空いてしまいます

  • 解決済 marple

    (@marple)


    記事を横並びのサムネイル付きリストとして呼び出しています。

    全体の幅は980pxで、150pxのサムネイルが6枚に、liの右マージンが16pxでちょうど980pxに配置しています。(ulの右マージンは-16pxにしています)
    呼び出しを6記事(以下)にして1行に収まるようにすると、なぜかulの上に20pxほど空いてしまいます。
    7記事以上呼び出して2行に渡るようにすると、ulの上の20pxはなくなります。

    cssで指定しているマージンはh1下に20pxのみで、ulの上は0pxです。
    にもかかわらず、h1とulの間は、指定しているh1下の20pxのマージン+謎の20pxほど空いてしまいます。

    該当ページはこちらです。
    記事呼び出しのソースは以下の通りです。

    <br />
    <pre><code><h1 class="entry-title">新着レシピ</h1>
    <div class="boxline">
    <ul class="posts-listing">
    <?php $posts = get_posts('numberposts=6&cat=16&order=DESC&orderby=data'); ?>
    <?php foreach($posts as $post): ?>
    	<li>
    	<a href="<?php the_permalink() ?>">
    		<?php the_post_thumbnail( 'thumb230' ); ?>
    		<span><?php the_title(); ?></span>
    	</a>
    	</li>
    <?php endforeach; ?>
    </ul>
    </div>

    また、別のページで、あるカテゴリに属する記事一覧を同じようにサムネイル付きリストとして呼び出していますが、こちらも同じように6記事以下の1行だと、ulの上が20pxほど空いてしまいます。
    スタイルは上述のページとまったく同じです。

    参考ページはこちらです。
    記事一覧呼び出しのソースは以下の通りです。

    <br />
    <pre><code><div class="boxline">
    <ul class="posts-listing">
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    	<li>
    	<a href="<?php the_permalink() ?>">
    		<?php the_post_thumbnail( 'thumb230' ); ?>
    		<span><?php the_title(); ?></span>
    	</a>
    	</li>
    <?php endwhile; else: ?>
    </ul>
    <p>記事がありません</p>
    <?php endif; ?>
    </div>

    記事が2行以上あり、ul上になぞのスペースがないページがこちらです。

    記事が1行のとき、ul上に20pxほど空いてしまうのをなくしたいのですが、原因がまったく分かりません。
    ulの上にネガティブマージンを指定すると、記事が1行のときと2行以上のときでスタイルが変わってしまうので利用できません。

    大変お手数をお掛け致しますが、お分かりになる方、お知恵を貸して頂きたく存じます。
    よろしくお願い致します。

10件の返信を表示中 - 1 - 10件目 (全10件中)
  • ブラウザに付いている要素の調査機能を使って該当箇所を探ってみたら見つかるのではないでしょうか。
    読解力がないので提示されているURLのページの「記事が1行」とか「記事が2行」というのが
    何処のことかが解らなかったのですが、もしかしてと思ったのはulの上というより
    entry-titleのmargin: 0px 0px 20px;のことでしょうか。

    gatolaboさん

    コメントありがとうございます。
    返信が遅くなりまして、申し訳ございませんでした。

    1行、2行というのは、全体の幅が980px、サムネイルが150px、マージンが16pxなので、「numberposts=6」にすると、サムネイル6枚が1行にちょうど並ぶようになります。
    これを「numberposts=7」以上にすると、7枚目のサムネイルが1行目に入りきらず、自動的に2行目ができます。

    「entry-titleのmargin: 0px 0px 20px 0px;」は関係ありませんでした。
    マージンではなく、サムネイルが1行か2行か、で謎の隙間ができてしまいます。

    上手くお伝えできず、申し訳ありません。

    ご提案頂いたブラウザの機能で一度確認してみたいと思います。

    ブラウザで要素を確認してみましたが、謎の隙間に該当する要素はありませんでした。

    初めに例示したページが分かりにくいかもしれませんので、別のページを例に挙げて説明させて頂きます。

    ulの上に謎の隙間ができてしまうページはこちら
    サムネイルが3枚(記事数が3つ)で、1行に収まっています。
    1行に収まっている場合、h2とulの間にcssで指定しているh2下のマージン20px以外に、さらに20pxほどの謎の隙間ができてしまいます。

    一方で、ulの上に謎の隙間ができないページがこちらです。
    こちらはサムネイルが9枚(記事数が9つ)で、1行に6記事のスタイルにしているため2行に渡っています。
    この場合は、h2とulの間はcssで指定しているh2下のマージン20pxのみで、謎の隙間は現れません。

    呼び出しコードもスタイルもまったく同じで、違うのは記事の数だけです。
    再度コードを記載させて頂きます。

    <h2 class="entry-title">タイトル</h2>
    <ul class="posts-listing">
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    	<li>
    	<a href="<?php the_permalink() ?>">
    		<?php the_post_thumbnail( 'thumb230' ); ?>
    		<span><?php the_title(); ?></span>
    	</a>
    	</li>
    <?php endwhile; else: ?>
    </ul>
    <p>記事がありません</p>
    <?php endif; ?>

    h2とulの間の謎の隙間をなくしたいのですが、原因がまったく分かりません。

    度々申し訳ございませんが、お詳しい方、お知恵を貸して頂きたく存じます。
    よろしくお願い致します。

    ul.posts-listing に CSS で display: inline-block; がついていて、それを削除すると隙間がなくなりますね。

    gblsmさん

    「display:inline-block;」を削除したら、隙間がなくなりました。
    早々にありがとうございました。

    合わせて勉強させて頂きたいのですが、

    ①なぜ隙間ができるのでしょうか?
     ソース内の「li」後の改行がスペースと認識されてしまいますが、
     これと同じでしょうか?
    ②なぜサムネイルが1行のときのみ隙間ができて、2行以上になると隙間が消えるのでしょうか?

    今後同じ失敗をしないために、理由を知っておきたいです。

    もしお時間があれば、コメント頂けると幸いです。
    よろしくお願い致します。

    お答えできるほどCSSについて詳しくありません、すみません。他にコメントしてくださる方がいるとよいのですが。Safariの「要素の詳細を表示」でスタイル指定をひとつひとつ消してみて、たまたま見つけただけ、です。

    >gblsmさん

    とんでもないことです。
    ありがとうございます。

    Safariの「要素の詳細を表示」、自分でも調べたのですが、調べられていなかったのですね。
    すみません。
    safariの機能をきちんと理解できていなかったようですので、きちんと使えるように改めて理解し直したいと思います。

    ひとまず問題は解決できました。
    本当にありがとうございました。

    >皆さま

    疑問が残るため、もう少しトピックを置かせてください。
    (しばらくしてもコメントがない場合、解決済みに致します。)
    今回の事象について分かる方、コメント頂けると幸いです。
    よろしくお願い致します。

    たしかにSafariで見ると上に隙間がありますね…。

    行をまたぐことで消える理由は分かりませんが、Chromeの場合だと一行か二行かに関わらず、下に隙間ができるかと思います。

    この場合は、親要素(section)のline-heightやfont-sizeを0にするか、posts-listingにvertical-alignでbottom(baseline以外?)などを指定すれば隙間はなくなるかと思います。

    個人的にはgblsmさんが示された通りinline-blockをやめる方法がいいと思います。

    あと、3つ目のソースだとulタグが正しく閉じられない気がします。

    こんにちは、

    すでに、問題は修正されているようですし、理由も説明できませんが、、

    想像だけで書きます。

    ulにdisplay:inline-block;が入っているために、サファリで、ULの上部にスペースが出来るという事ですよね。

    クロームだと、下部の空白が変化するみたいですが、

    inline-blockをそのまま入れておいて、vertical-align:top;を追加してみるとどうですか?

    すみません、かぶっちゃいました

    x743さん、nobitaさん

    ご確認ありがとうございました。
    また、見て頂くのに修正してしまい申し訳ありませんでした。

    お二方のご指摘通り、inline-blockを入れたままvertical-alignでtopにすると、謎の隙間は消えました。
    また、ずっとsafariで見ていたのですが、chromeで見ると隙間はありませんでした。

    疑問は残りますが、問題は解決されましたので、トピックを閉じたいと思います。
    また勉強していきます。

    問題の修正方法や細かい調整は、お三方に頂いたご意見を参考に対応させて頂きたいと思います。
    本当にありがとうございました。

10件の返信を表示中 - 1 - 10件目 (全10件中)
  • トピック「記事のサムネイル付き横並びリストのul上が一段空いてしまいます」には新たに返信することはできません。