昨日で問題が片付いたと思ったのは早計でした（T T）
メニュー（ページ上部にある各ページへのナビボタン）の書式が変更されていて、それがモバイル表示に影響を与えていました。私も出先で暇つぶしに自サイトの誤字脱字確認をすることがあるんですが、そこでようやく気づきました。
なぜかトップページだけメニューの表示がおかしいと！
他のページはなぜかメニューが従来どおり一段に収まっているんですが、トップページだけ二段で表示される。おそらく、今回のCSS変更がきっちり反映されたのがトップページのみだったということなんだと思います。
といいますのも、デフォルトのページレイアウトを使っているのは何を隠そうトップページとギャラリーや穴底日記、404エラーページだけ。それ以外はこのサイト用に作ったテンプレートを使用しているんです。だからページ周りのレイアウトが変わった時、もろに影響を受けたのがトップかそれ以外のページかで変更箇所の見当がつくんですよ♪
で、文字の形が変わっているし、余白が大きくなったような気がすると思っていたら、やっぱりビンゴ！ 下記のように変更が加えられていました。
変更前
.main-nav li { float: left; position: relative; border-left: 1px solid #000; -webkit-transition: background 0.6s ease-out; -moz-transition: background 0.6s ease-out; transition: background 0.6s ease-out; }
.main-nav li a { display: block; color: #fff; padding: 0.416em 1em; text-decoration: none; }
変更後
.main-nav li { float: left; position: relative; font-weight: 700; border-left: 1px solid #000; -webkit-transition: background 0.6s ease-out; -moz-transition: background 0.6s ease-out; transition: background 0.6s ease-out; }
.main-nav li a { display: block; color: #fff; padding: 8px 20px; padding: 0.5rem 1.25rem; text-decoration: none; }
フォントの太さが変わっている。700って実質太字にしたのと同等になるはず。それから、やっぱり余白（padding）が変更されていて、その分やたらと１ブロックあたりの幅が大きくなっている。これじゃあモバイルで見る場合、画面に収まりきらずにメニューブロックが二段になってもしょうがないよ。
とりあえずCSS編集に以下を書き込み、プレビューしてみました。
.main-nav li { font-weight: normal; }
.main-nav li a { padding: .416em 1em; }
これでどうにか元通りになったので、後ほど子テーマのCSSにきっちり反映させておこうと思います。子テーマに書いたCSSの指示の方が優先されて上書きされる仕様だから助かっている。
今後は直接反映させる前にdfffで変更点を確認するようにしよう。反省。
了子