wordpressのオリジナルテーマを作成中。index.phpの表示がsingle.phpとpage.phpとは異なることについて

Question

###前提・実現したいこと
wordpressのオリジナルテーマのindex.phpと他のsingle.phpとpage.phpで見た目が変化しないようにしたい

###発生している問題・エラーメッセージ
ローカル環境(XAMPP)でwordpressのオリジナルテーマを作成中。まず、htmlファイルを作り、それをindex.phpに変換し、ループなどテーマに必要なタグを挿入しました。

このindex.phpをpage.php、single.phpに複製し、ブラウザで表示したところindex.phpだけ表示位置が右に15px程度ずれます。

エラーメッセージ
エラーメッセージは表示されません。

###該当のソースコード

【index.phpの記述内容】
<?php get_header(); ?>
<div class="row rowV">
  <!-- メインカラム -->
  <div class="colSm70">
    <div class="container">
    <section>
      <?php if (have_posts() ) : while (have_posts() ) : the_post(); ?>
        <div class="post">
          <div class="post-header">
            <h2> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> </h2>
            <div class="post-meta">
              <?php echo get_the_date(); ?>【<?php the_category(', ') ?>】
            </div>
          </div>
          <div class="post-content">
            <div class="post-body">
              <?php the_excerpt(); ?>
            </div>
          </div>
      <?php endwhile; else: ?>
        <p>記事はありません</p>
      <?php endif; ?>
      </div>
    </section>
      <nav>
        <div class="prenex">
          <div class="prev"><?php previous_posts_link(); ?></div>
          <div class="next"><?php next_posts_link(); ?></div>
        </div>
      </nav>
    </div>
  </div>
  <?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>
【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','ＭＳ Ｐゴシック',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で制作中です。
修正点などご教示いただけましたら幸いです。
よろしくお願いします。

Comments

[8-0_nyan5]

</section>前の</div>の位置が違うような気がします。違うかな？

[退会済みユーザー]

ご連絡ありがとうございます。

確かに、不自然な感じがしたのでendwhileの前、endwhileとelseの間にそれぞれ入れて表示を試してみたところ、ページの開始位置は変わらず、70%のブロックの部分が一文字分程度index.phpを表示させると広がり、その分ページ全体が右に広がります。

また、containerクラスをrowの上に持って行ってcontainerとrowをsidebarを読み込んだ後に終了させ、投稿の概要を読み込んでいる部分(<div class="post-content">～)をコメントアウトするとこうした表示の問題はなくなります。なので、ループが原因では、と疑っているのですが解決に至らないのが現状です。

[退会済みユーザー]

Webブラウザの開発者ツール（デベロッパーツール）を使用して、どのスタイルが適用されているかを確認されてはいかがですか？

Answer 1

表示されている```html

<div>～</div>```だけ見てみると、ループの中の数が違うので、 <section>の後に``` <div class="post">```を持って行くか、 ``` </section>```の前の```</div>```を```<?php endwhile; else: ?>```の前に持って行けばいいのではないでしょうか。

Comments

[退会済みユーザー]

ご回答ありがとうございます。
確かに、ループの中の<div>の数が違いました。
お伝えいただいた両方を実施し、表示を確認したところ、ウェブサイトの表示位置、左側はずれないのですが、70%のボックスが一文字分程度(15px)程度広がる状態です。
不思議なのは</section>の前の<div>を<?php endwhile; else: ?>の前に持っていき、<div class="post">を<section>の後に入れる(間違った状態)にすると、index.phpだけがレイアウトが崩れるようになります。
設定で一覧表示する記事数を3にしているのですが、3番目の記事だけが1,2番目の記事の右側にきて、サイドバーはカラム落ちするようになります。
このことは今回のエラーと関係しているかはわかりませんが、複製したpage.phpとsingle.phpでは何も起こらず、index.phpだけが動きます。
ループの中の<div>の数を直して<div class="post-content>~</div>部分をコメントアウトすると表示の問題が改善されるので、今のところ現状に変化がない状態です。

[8-0_nyan5]

いえ、違います。
移動させるのは、どちらか一方です。
デザイン的にどうするかこちらではわからないので、とりあえず、両方示しました。

[退会済みユーザー]

すみません、言葉が足りませんでした。ご提示いただいたどちらか一方を動かす方法を両方とも試しましたという意味です。
ループの中で<div></div>の対を作る、ということですよね。自分が最初に記載したものですと<div>または</div>が一つループの外に出ていました。
しかしながら現象は変わらず、<div class="post-content>~</div>部分をコメントアウトすると表示の問題が改善されるという状況にも変化は見られません。
先のコメントのように間違った状態を作るとindex.phpだけが異なる表示をするので、index.phpに特有(?)なのか、ループに原因があるのか今のところ原因がつかめないのが現状です。

[8-0_nyan5]

失礼しました。
そうですか、それだとちょっとわかりません。

[退会済みユーザー]

ご回答ありがとうございました。おかげさまで解決することができました。

Answer 2

ご提示いただいたスタイルシートの内容ですと、
記事のタイトルやコンテンツのテキスト量によって、
colSm70クラスのdivの横幅が可変になっているように見えます。

.colSm70 {
    width: 70%;
}

などで幅を指定してみたらどうでしょうか？

Comments

[退会済みユーザー]

ご回答ありがとうございます。
最初にご回答いただいた部分は既に修正済みの状態でデベロッパーツールで確認しました。
※すみません記載ミスで、index.phpが広がるのではなく、「縮む」です。
bodyレベルで16px分、index.phpが縮みます。

その下ではbodyの幅が1060pxの時に70%の部分が732.594px、30%の部分が267.406px、パディングがそれぞれの部分で15px、70%と30%の間は30px空いている計算になります。単純に考えれば70%の部分は 1060-60*70%=700pxになっているはずなのですが…
パディングやマージンの指定はcontainerとrowクラスのみです。ループの中ではそうした指定はありませんでした。
containerクラスにメディアに合わせた幅を設定しても現象は変わらず。
htmlにmax-widthで1170pxを指定しても現象は変化なし。
また、colSm70を最大幅の1170pxの70%、819pxでmax-widthを指定しても改善されません。
ただ、colSm70のmax-widthをこのクラスのメディア幅750pxの70%、537.6pxに指定すると状況は改善されます。
この辺りの設定はBootstrapを参考にしながらそれを単純にした形で設定していて、メディア設定はBootstrapのものをそのまま指定しています。
以前にはループの中にパディングやマージンの設定を入れてみたことがあるのですが、当然のことながらその設定が順々に重なって適用されました。
今の状態で、index.phpが縮むときはページタイトルは動かず、その下のナビゲーションの文字から動いています。
また、16pxは一文字分の大きさですので、その辺りに原因があるかもしれませんが、今のところindex.phpとsingle.php、page.phpは同一のコード(複製したまま)なので、おかしくなるなら全ておかしくなりそうなのですが、index.phpだけおかしくなっています。
また、body周りに8pxのマージンが設定されていましたが、それを消しても現象は変わりありません。
今のところ手の打ちようがない状態です。

[退会済みユーザー]

細かい数値の話はこの際置いておきましょう。
私が気になっているのは、ご呈示いただいたCSSでは、divの幅指定が一切おこなわれていないことです。
以下の記述を加えても状況は改善しませんか？
.colSm70 {
min-width: 70%;
}

[退会済みユーザー]

ソースの抜き出し方が悪かったですね、すみません。
現状、Bootstrapと同じメディア設定を行っています。
つまり、タブレットの設定: @media only screen and (min-width: 768px){}と、通常のPC設定: @media only screen and (min-width: 992px){}、もっと幅の広いディスプレイ用の設定: @media only screen and (min-width: 1200px){}を設定しています。
タブレット以下のカラム幅の設定をcolXs○○%としています。
タブレット以上の場合の設定はそのタブレット幅のメディア設定の中にcolSm○○%としています。
ですので、colSm○○%という場合は@media only screen and (min-width: 768px)の中に書くのでその幅が適用されることになります。
例えばタブレット以下の幅では横幅100%、タブレット以上は70%と30%の横並びといった場合は
<div class="container"><div class="row rowV">
<div class="colSm70">foo</div>
<div class="colSm30">bar</div>
</div></div>
※rowVはそれぞれのブロックを縦積みにするための設定
となります。
お二人のご回答によって問題点が絞り込めたおかげで自己解決できました。
自己解決内容も記載しますのでご確認ください。
ありがとうございました。

Answer 3

8-0_nyan5さん、mizさんご回答ありがとうございました。
おかげさまで解決できました。

原因は改行コードにあったようです。

グローバルナビの個々のliの幅がbox-sizing: border-boxを設定しているので計算上20%になるはずなのですが、20%に設定するとカラム落ちをするので19%に設定していました。
これがなぜかと調べていたらdisplay:inline-blockを設定した場合改行コードの幅分横幅が広くなるので、<ul>～</ul>を改行無しで書かなくてはなりませんでした。

wordpressの場合はメニューは管理画面で設定するので改行無しで記述はできないので ulでfont-sizeを0にして、liで元のフォントサイズに戻すと改行コードの問題はクリアできます。
グローバルナビもこの設定を行ったところliの幅を20%にしてもカラム落ちしなくなりました。

これと同じことが言えるのでは??と思ったので、post-headerとpost-contentクラスのフォントサイズを0にして、中にあるh2、post-meta、post-bodyクラスでフォントサイズを設定し直したところ、70%側の幅が伸縮することがなくなり、正常になりました。

幅の狭いメディアでは縦スクロールバーが出るとその幅分だけ縮むのですが、縦スクロールバーを消すわけにもいかないのでやむを得ないでしょう。
縦スクロールバーの影響が出ない幅までディスプレイを広げた時は投稿ページや固定ページに遷移しても全体の幅に影響が出ませんでした。

ulとliの改行コードの問題がそのまま当てはまるかはわからないのですが、投稿ページや固定ページでは記事が一つだけ読み込まれるのでそうした幅に影響する何らかのコードが読み込まれても全体の幅に影響が出ず、ループによってそのコードが複数読み込まれることで全体の幅にまで影響した、ということのようです。

お二人のご回答で問題の原因を追究する手がかりを絞り込むことができました。
ありがとうございました。