Q&A
ブラウザに出力されたHTML取得された方が良いかと思います。
前提・実現したいこと
Bootstrapを使用して作成内容をWordPress化したい。
発生している問題・エラーメッセージ
Bootstrapを使用して作成したコードをWordPress化した際にカラム落ちが発生しました。
該当のソースコード
HTML <div class="row py-3"> <div class="col-md-4 col-12"> <div class="bg-white py-3"> <!--サムネイル --> <div class="pb-3"> <img class="img-fluid" src="<?php echo get_template_directory_uri(); ?>/img/img1.png"> </div> <!--記事タイトル --> <h2 class="h4 px-3 pb-3">ピックアップコンテンツ1ピックアップコンテンツ1ピックアップコンテンツ1</h2> <!--ボタン --> <div class="text-center"> <a href=""> <div class="d-inline-block border p-3 text-secondary"> READ MORE </div> </a> </div> </div> </div> WordPress（php） <div class="row py-3"> <!--ピックアップ記事取得 --> <?php $top_query = new WP_Query( 'tag=toppickup' ); ?> <!--queryを定義する top_queryはtoppickupのタグを持っている記事--> <?php if ( $top_query->have_posts() ) : ?> <?php while ( $top_query->have_posts() ) : $top_query->the_post(); ?> <!--top_queryが投稿記事の中にある時出力 --> <div class="col-md-4 col-12"> <div class="bg-white py-3"> <!--サムネイル --> <div class="pb-3"> <!--サムネイル画像の取得--> <?php if ( has_post_thumbnail()) : ?> <?php the_post_thumbnail('', array( 'class' => 'img-fluid' )); ?> <!--画像に独自のクラスをつける事ができる 今回はimg-fluid--> <?php else : ?> <img class="img-fluid" src="<?php echo get_template_directory_uri(); ?>/img/no-image.png"> <?php endif; ?> </div> <!--記事タイトル --> <h2 class="h4 px-3 pb-3"><?php the_title(); ?></h2> <!--ボタン --> <div class="text-center"> <a href="<?php the_permalink(); ?>"> <div class="d-inline-block border p-3 text-secondary"> READ MORE </div> </a> </div> </div> </div> <?php endwhile; ?> <?php wp_reset_postdata(); ?> <?php endif; ?> </div>
試したこと
margin-leftやpadding-leftを−１６pxにした。
Chromeの検証で確認したが、指定したpadding以上の空白があった。
補足情報（FW/ツールのバージョンなど）
ブラウザで出力したソースを追記します。
HTML
<div class="row py-3">
<div class="col-md-4 col-12">
<div class="bg-white py-3">
<!--サムネイル -->
<div class="pb-3">
<img class="img-fluid" src="http://sato.local/wp-content/themes/mytheme-practice/img/img1.png">
</div>
<!--記事タイトル -->
<h2 class="h4 px-3 pb-3">ピックアップコンテンツ1ピックアップコンテンツ1ピックアップコンテンツ1</h2>
<!--ボタン -->
<div class="text-center">
<a href="">
<div class="d-inline-block border p-3 text-secondary">
READ MORE
</div>
</a>
</div>
</div>
</div>
<div class="col-md-4 col-12">
<div class="bg-white py-3">
<!--サムネイル -->
<div class="pb-3">
<img class="img-fluid" src="http://sato.local/wp-content/themes/mytheme-practice/img/img1.png">
</div>
<!--記事タイトル -->
<h2 class="h4 px-3 pb-3">ピックアップコンテンツ1ピックアップコンテンツ1ピックアップコンテンツ1</h2>
<!--ボタン -->
<div class="text-center">
<a href="">
<div class="d-inline-block border p-3 text-secondary">
READ MORE
</div>
</a>
</div>
</div>
</div>
</div>
Wordpress
<!--ピックアップ記事取得 --> <div class="row py-3"> <!--queryを定義する top_queryはtoppickupのタグを持っている記事--> <!--top_queryが投稿記事の中にある時出力 --> <div class="col-md-4 col-12"> <div class="bg-white py-3"> <!--サムネイル --> <div class="pb-3"> <!--サムネイル画像の取得--> <img width="1500" height="1000" src="http://sato.local/wp-content/uploads/2020/04/laptop3.jpeg" class="img-fluid wp-post-image" alt="" srcset="http://sato.local/wp-content/uploads/2020/04/laptop3.jpeg 1500w, http://sato.local/wp-content/uploads/2020/04/laptop3-300x200.jpeg 300w, http://sato.local/wp-content/uploads/2020/04/laptop3-1024x683.jpeg 1024w, http://sato.local/wp-content/uploads/2020/04/laptop3-768x512.jpeg 768w" sizes="(max-width: 1500px) 100vw, 1500px" /> <!--画像に独自のクラスをつける事ができる 今回はimg-fluid--> </div> <!--記事タイトル --> <h2 class="h4 px-3 pb-3">CSS入門</h2> <!--ボタン --> <div class="text-center"> <a href="http://sato.local/web%e3%82%b5%e3%82%a4%e3%83%88%e3%83%aa%e3%83%8b%e3%83%a5%e3%83%bc%e3%82%a2%e3%83%ab%e3%81%ae%e3%81%8a%e7%9f%a5%e3%82%89%e3%81%9b/"> <div class="d-inline-block border p-3 text-secondary"> READ MORE </div> </a> </div> </div> </div> <!--top_queryが投稿記事の中にある時出力 --> <div class="col-md-4 col-12"> <div class="bg-white py-3"> <!--サムネイル --> <div class="pb-3"> <!--サムネイル画像の取得--> <img width="1350" height="900" src="http://sato.local/wp-content/uploads/2020/04/laptop4.jpeg" class="img-fluid wp-post-image" alt="" srcset="http://sato.local/wp-content/uploads/2020/04/laptop4.jpeg 1350w, http://sato.local/wp-content/uploads/2020/04/laptop4-300x200.jpeg 300w, http://sato.local/wp-content/uploads/2020/04/laptop4-1024x683.jpeg 1024w, http://sato.local/wp-content/uploads/2020/04/laptop4-768x512.jpeg 768w" sizes="(max-width: 1350px) 100vw, 1350px" /> <!--画像に独自のクラスをつける事ができる 今回はimg-fluid--> </div> <!--記事タイトル --> <h2 class="h4 px-3 pb-3">WordPressの教科書</h2> <!--ボタン --> <div class="text-center"> <a href="http://sato.local/wordpress%e3%81%ae%e6%95%99%e7%a7%91%e6%9b%b8/"> <div class="d-inline-block border p-3 text-secondary"> READ MORE </div> </a> </div> </div> </div> </div>
ここにより詳細な情報を記載してください。
回答1件
0
ここに全角空白があること以外は変わらないですね。
HTML
1> <!--画像に独自のクラスをつける事ができる 今回はimg-fluid-->
投稿2020/04/30 02:34
総合スコア69597
回答頂きありがとうございます。
全角空白を削除しましたが、やはりカラム落ちは解決しませんでした。
WordPress側の設定が影響している可能性がありますでしょうか？
設定が何を指すかはわかりませんが、ブラウザに届くHTML/CSS/JavaScript以外がブラウザのレンダリングを変えることはまれです。
なので、まず確認するのはCSSになります。当該要素だけでなく内包要素/外側の要素も全て確認して何か影響が無いか確認してみてください。
あとは、HTMLを少しずつ削除してどの要素が影響を与えているかを絞り込むなどしてみてください。
【初心者向け！Chromeの検証機能（デベロッパーツール）の使い方】
https://saruwakakun.com/html-css/basic/chrome-dev-tool
【ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB】
https://nandemo-nobiru.com/2944/
あなたの回答
tips
プレビュー
