質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

1回答

1250閲覧

WordPress化のカラム落ちについて

sato11

総合スコア0

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/04/29 15:24

編集2022/01/12 10:55

前提・実現したいこと

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を−16pxにした。
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>

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2020/04/29 20:22

ブラウザに出力されたHTML取得された方が良いかと思います。
sato11

2020/04/29 23:58

ブラウザで出力したソースを追記しました。 ご確認よろしくお願いします。
guest

回答1

0

ここに全角空白があること以外は変わらないですね。

HTML

1>  <!--画像に独自のクラスをつける事ができる 今回はimg-fluid-->

投稿2020/04/30 02:34

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sato11

2020/04/30 02:52

回答頂きありがとうございます。 全角空白を削除しましたが、やはりカラム落ちは解決しませんでした。 WordPress側の設定が影響している可能性がありますでしょうか?
kei344

2020/04/30 03:45

設定が何を指すかはわかりませんが、ブラウザに届くHTML/CSS/JavaScript以外がブラウザのレンダリングを変えることはまれです。 なので、まず確認するのはCSSになります。当該要素だけでなく内包要素/外側の要素も全て確認して何か影響が無いか確認してみてください。 あとは、HTMLを少しずつ削除してどの要素が影響を与えているかを絞り込むなどしてみてください。 【初心者向け!Chromeの検証機能(デベロッパーツール)の使い方】 https://saruwakakun.com/html-css/basic/chrome-dev-tool 【ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB】 https://nandemo-nobiru.com/2944/
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問