フォーラムへの返信

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • x743さん、nobitaさん

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

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

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

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

    >gblsmさん

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

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

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

    >皆さま

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

    gblsmさん

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

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

    ①なぜ隙間ができるのでしょうか?
     ソース内の「li」後の改行がスペースと認識されてしまいますが、
     これと同じでしょうか?
    ②なぜサムネイルが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の間の謎の隙間をなくしたいのですが、原因がまったく分かりません。

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

    gatolaboさん

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

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

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

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

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

    KUCKLUさん

    早々にご回答頂き、誠にありがとうございました。
    頂いた内容を追記したところ、隙間がなくなり、思惑通りのスタイルになりました。

    「li inline-block」などで検索すると、同じ症状の話題がたくさん出てきました。
    phpの問題だとばかり思って、cssへの突っ込みが足りませんでした。
    cssについても改めてきちんと勉強し直します。

    いい機会ですので、フロートを使った書き方もやってみたいと思います。
    本当にありがとうございました。

6件の返信を表示中 - 1 - 6件目 (全6件中)