質問: ### 前提・実現したいこと wordpressのオリジナルテーマのindex.phpと他のsingle.phpとpage.phpで見た目が変化しないようにしたい ### 発生している問題・エラーメッセージ ローカル環境(XAMPP)でwordpressのオリジナルテーマを作成中。まず、htmlファイルを作り、それをindex.phpに変換し、ループなどテーマに必要なタグを挿入しました。 このindex.phpをpage.php、single.phpに複製し、ブラウザで表示したところindex.phpだけ表示位置が右に15px程度ずれます。 ``` エラーメッセージ エラーメッセージは表示されません。 ``` ### 該当のソースコード ``` 【index.phpの記述内容】 【】 記事はありません 【CSS側の記述】 html { /* ベースとなるフォントの設定計算しやすいように10pxにする */ font-size: 62.5%; /*max-width: 1170px !important;*/ margin: 0 auto !important; padding: 0 !important; } /* 10px=1.0rem 古いブラウザ対応のためpx単位も併記 */ body{ font-size: 16px; font-size: 1.6rem; font-family: 'Hiragino Sans','ヒラギノ角ゴシック','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ','Meiryo','MS Pゴシック',Osaka,Verdana,sans-serif; color: #333; -webkit-text-size-adjust: 100%; font-feature-settings : "palt" 1; background-color: lime; } /* 共通設定 */ *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } /* グローバルナビ設定 */ .menu{ font-size: 14px; font-size: 1.4rem; margin: 0 0 30px 0; padding: 0; background-color: #f39800; width: 100%; max-width: 100%; } .menu > li{ display: inline-block; width: 19%; text-align: center; margin: 0; } .menu a { color: #fff; display: block; padding: 10px 0; } .menu a:hover{ background-color: #ffc35c; } /* 投稿設定 */ .post{ margin-bottom: 30px; } .post-header{ margin-bottom: 15px; } .post-header h2{ font-size: 20px; font-size: 2.0rem; font-weight: bold; padding: 0; } .post-meta{ font-size: 12px; font-size: 1.2rem; padding: 7px 0; color: #666; } .post-content{ } .post-body{ } /* prenex設定 */ .prenex{ padding: 10px 0; font-size: 12px; font-size: 1.2rem; margin-bottom: 15px; text-align: right; width: 100%; max-width: 100%; } .prev, .next{ display: inline-block; width: 20%; } /* カラム共通設定 単純にするためにカラムは10で分ける */ .container{ padding-right: 15px; padding-left: 15px; margin-left: auto; margin-right: auto; } .row { display: flex; display: -webkit-flex; /*margin: 0 -15px;*/ } .colXs100, .colXs70, .colXs30, .colSm70, .colSm30, .colLg70, .colLg30, .colXl70, .colXl30{ padding-left: 15px; padding-right: 15px; position: relative; min-height: 1px; } .colXs100{ width: 100%; } .colXs70{ width: 70%; } .colXs30{ width: 30%; } /* レスポンシブのためのメディア設定 小さいものを基準に大きい時の設定を記述(モバイルファースト) */ /* Bootstrapのメディア設定と同じ */ /* smart phone */ @media screen and (max-width: 767px){ .rowV{ /* スマホサイトではメインとサイドを縦積みにする */ -webkit-flex-direction: column; /* Safari */ flex-direction: column; } } ``` ### 試したこと 課題に対してアプローチしたことを記載してください index.phpの各パーツ、CSSのマージンやパディングをコメントアウトして挙動を確認しました。 post-bodyの部分をコメントアウトすると全体がずれることがなくなり、70%に設定している左カラムが一文字分程度広がるのみとなります。 複製したそのままのsingle.phpやpage.phpではこうしたことが起こらないのでループによって記事が3個読み込まれることによって全体がずれるといったことになっているのではないかと推測していますが、ずれる量が15px程度で、マージンの設定はループの外に出しているので原因はわからないままです。 試しにpost-bodyなどのループの中でマージン、パディングを設定したところ、やはり3回分、45px程度ずれます。 ### 補足情報(言語/FW/ツール等のバージョンなど) より詳細な情報 Windows7、Xamppのローカル環境、エディタはAtomで制作中です。 修正点などご教示いただけましたら幸いです。 よろしくお願いします。
回答: 表示されている`html ~`だけ見てみると、ループの中の数が違うので、 の後に``を持って行くか、 ``の前の``を``の前に持って行けばいいのではないでしょうか。