パソコンで見るときれいに表示されているのに、スマホで開くと文字がはみ出していたり、横に余計な余白ができていたり、画像が画面からはみ出していたり。
WordPressを運営していると、わりと高い確率で遭遇する現象です。しかも厄介なのが、自分では何もしていないつもりなのに起きることがあるという点。
プラグインを更新しただけ、記事に表を入れただけ、そんなきっかけで崩れます。
この記事では、原因の切り分け方と、よくある原因ごとの直し方を順番に書いていきます。上から確認していけば、だいたいどこかで当たるはずです。
その前に：本当に崩れているかを確認する
いきなりCSSを触る前に、確認してほしいことがあります。
キャッシュです。
WordPressサイトは、たいてい何層かのキャッシュを持っています。ブラウザ自体のキャッシュ、キャッシュ系プラグイン、サーバー側のキャッシュ機能、CDNを使っているならそこにも。
修正したのに反映されない、あるいは直したはずなのにまだ崩れている、という場合、実は表示されているのが古いデータだったというのがかなりの頻度であります。
確認するなら、スマホのブラウザをシークレットモード（プライベートブラウズ）で開いてみてください。それでも崩れているなら本物です。
キャッシュプラグインを使っているなら、管理画面からキャッシュを削除してから見直します。
もうひとつ、直す前にバックアップを取ってください。
CSSの修正程度なら大事故にはなりませんが、元に戻せる状態にしておくのとそうでないのとでは、心理的な余裕がまるで違います。
原因を特定する：パソコンでスマホ表示を再現する
スマホの実機を見ながら直すのは、正直かなりつらいです。どこが原因か調べる手段がないので。
おすすめは、パソコンのブラウザでスマホ幅を再現する方法です。
Chromeなら、サイトを開いた状態で右クリックして「検証」を選ぶと開発者ツールが開きます。そこで左上のスマホとタブレットのアイコン（デバイスツールバー）を押すと、画面幅をスマホサイズに切り替えられる。この状態なら、要素をクリックしてどのCSSが効いているかを直接確認できます。
崩れている箇所をクリックすれば、その要素にどんな指定が入っていて、どのファイルの何行目に書かれているかまで表示されます。原因の9割はここで見つかります。
横スクロールの犯人を探す小技
「画面の右側に謎の余白ができて、横スクロールしてしまう」という症状は特に多いんですが、原因の要素を見つけるのが地味に難しい。どれがはみ出しているのか、見た目では分からないんですよね。
そこで使えるのが、ページ上のすべての要素に一時的に赤い枠線を付けて、箱の輪郭を見えるようにする方法です。使うCSSはこの1行だけ。
▼css▼
* { outline: 1px solid red; }先頭の * は「ページ内のすべての要素」という意味の記号です。普通のCSSは「画像だけ」「このクラスだけ」と対象を絞りますが、* は絞らずに全部へ適用する。
つまりこの1行で、見出しも段落も画像も、あらゆる箱に赤枠が付きます。
border（枠線）ではなく outline を使っているのにも理由があって、border は要素の幅に加算されるので、枠を付けたこと自体でレイアウトが動いてしまうんです。outline は幅に影響しないので、今の崩れ方をそのまま観察できる。
赤枠が付いた状態で画面を見ると、画面の右端を突き抜けて伸びている赤い箱があるはずです。それが犯人ですね。
いちばん手軽なのは「追加CSS」のプレビュー
WordPressなら、管理画面の「外観」→「カスタマイズ」→「追加CSS」に上の1行を貼るのが手軽です。
ポイントは、「公開」ボタンを押さないこと。カスタマイザーは貼った瞬間に右側のプレビューへ反映されるので、公開しなくても確認できます。
しかも画面下部にあるスマホのアイコンを押せば、プレビューをスマホ幅に切り替えられる。確認が終わったら、貼った1行を消して画面を閉じれば、サイトには何の影響も残りません。
なお、ブロックテーマ（サイトエディターを使うタイプのテーマ）の場合は、カスタマイザーの代わりに「外観」→「エディター」→「スタイル」から追加CSSを開く形になります。
開発者ツールに慣れている人は
Chromeの開発者ツールを開いて、「要素」タブ右側のスタイル欄にある「＋」（新しいスタイルルール）から追加する方法もあります。
こちらは自分のブラウザ上だけの変更なので、ページを再読み込みすれば消えます。
どちらの方法でも、赤枠は調査用の一時的なものです。確認が済んだら必ず消してください。
よくある原因と、その直し方
1. 横幅が固定されている
いちばん多い原因です。
width: 800px; のように絶対値で横幅を指定している要素があると、画面幅が800pxを下回るスマホでは必ずはみ出します。
直し方はシンプルで、固定値をやめるか、上限として扱うようにします。
▼css▼
.box {
width: 100%;
max-width: 800px;
}これで「最大800pxまでだが、画面が狭ければそれに合わせる」という挙動になります。
2. 画像がはみ出している
これも定番。画像の元サイズが大きいと、そのまま画面を突き破ります。
▼css▼
img {
max-width: 100%;
height: auto;
}たいていのテーマには最初から入っていますが、自作のブロックや、記事内に直接HTMLを書いた箇所では抜けていることがあります。
3. 表（テーブル）がはみ出している
記事に表を入れたとたんに崩れた、というパターンですね。表は中身の幅を優先するので、列が多いとどうしても画面幅を超えます。
無理に縮めるより、表だけ横スクロールさせるのが現実的です。
▼css▼
.table-wrap {
overflow-x: auto;
}表を<div class="table-wrap">で囲めば、ページ全体は動かず表の中だけ横に動くようになります。スマホで表を読ませるなら、これがいちばんストレスがありません。
4. 長いURLや英数字が折り返さない
日本語は自動で折り返しますが、スペースの入っていない長い英数字やURLは折り返されません。 これが画面を押し広げます。
▼css▼
.entry-content {
overflow-wrap: break-word;
}記事内にURLを直書きしている場合は、これで解決することが多いです。
5. メディアクエリの指定がずれている
スマホ用のCSSを自分で書いた場合に起きます。
▼css▼
@media screen and (max-width: 768px) {
/* スマホ用の指定 */
}よくあるミスが、max-widthとmin-widthを取り違えているケース。max-width: 768pxは「768px以下のとき」、min-width: 768pxは「768px以上のとき」です。逆に書くと、狙いと真逆の画面幅で適用されます。
それと、同じ要素に対する指定は後に書いたほうが勝つので、メディアクエリを通常のCSSより上に書いていると上書きされて効きません。
6. 追加したCSSが効いていない
「書いたのに反映されない」というやつですね。原因は3つのどれかです。
ひとつは「キャッシュ」。冒頭に書いたとおりです。
ふたつめが「詳細度」。より具体的に指定されたCSSが優先されるルールがあるので、テーマ側で細かく指定されている箇所を、ざっくりした指定で上書きしようとしても勝てません。
開発者ツールで見ると、効いていない指定には取り消し線が入っているのですぐ分かります。
みっつめが「書いた場所」。WordPressはCSSを書ける場所が複数あって、外観のカスタマイズにある「追加CSS」、テーマ独自の設定画面、子テーマのstyle.css、プラグインの設定欄。
あちこちに少しずつ書いた結果、どれが効いているか分からなくなるというのが本当によくあります。
心当たりがあるなら、一度どこに何を書いたか棚卸ししたほうが早いです。
7. 余白の計算が合わない
width: 100%を指定しているのに、paddingを足したぶんだけはみ出す、という現象があります。
▼css▼
* {
box-sizing: border-box;
}これを入れると、paddingや枠線を含めた値で幅を計算してくれるようになります。最近のテーマならまず入っていますが、古いテーマや自作パーツでは抜けていることがあります。
8. テーマやプラグインの更新で崩れた
自分では何も触っていないのに突然崩れた場合、これを疑います。
切り分けの手順としては、プラグインを一時的にすべて停止して直るかどうかを見る。直ったなら、ひとつずつ有効化して原因を特定する。
それでも直らないなら、テーマをWordPress標準のものに一時的に切り替えて確認します。
この作業は表示が一時的に崩れるので、アクセスの少ない時間帯にやってください。
やらないほうがいいこと
いくつか、事故につながりやすい行動を挙げておきます。
バックアップなしで触らない。 特にfunctions.phpは、一文字ミスしただけでサイト全体が真っ白になります。しかも管理画面にも入れなくなるので、FTPやファイルマネージャーで直接戻すしかなくなる。
子テーマを使わずに親テーマを編集しない。 テーマを更新した瞬間に、書いた内容が全部消えます。
!importantを連打しない。 一時的には効きますが、次に直すときに何が効いているのか分からない状態になります。詳細度で勝てないときの最終手段として使うものです。
ここから先は、時間を買ったほうが早いかもしれません
上から順に確認していけば、たいていの崩れは自力で直せます。実際、原因の大半はここに書いた8つのどれかです。
ただ、正直なところ、原因の特定に時間がかかるタイプの崩れもあります。
テーマとプラグインが干渉しているケース、過去に誰かが書いたCSSが複数箇所に散らばっているケース、そもそも設計自体がレスポンシブを想定していないケース。
こうなると、調べる作業だけで数時間かかることも珍しくありません。
本業の合間にそこへ時間を注ぐくらいなら、外注してしまったほうが早い場面はあると思います。
特に「自分でCSSを触ったら余計おかしくなった」という状態のときは、いじるほど複雑になっていくので、早めに止めたほうがいい。
そういう小さな修正だけを請け負うサービスをココナラに出しています。表示崩れの修正、スマホ表示の調整、余白や文字サイズの変更など、大がかりなリニューアルではなく「ここだけ直したい」に対応するものです。
相談していただくときは、対象サイトのURL、直したい箇所、今の状態と希望する状態、可能なら該当箇所のスクリーンショットをいただけると、確認がスムーズです。
原因が分からない状態でも構いません。「ここをこうしたい」だけでも大丈夫です。
確認する順番のまとめ
最後に、上から試す順番として整理しておきます。
- キャッシュを消して、シークレットモードで再確認する
- バックアップを取る
- パソコンの開発者ツールでスマホ幅を再現し、崩れている要素を特定する
- 横スクロールが出るなら、枠線を一時表示してはみ出し要素を探す
- 横幅の固定値、画像、表、長いURLの順に疑う
- 自分で書いたCSSがあるなら、詳細度と書いた場所を確認する
- 何も触っていないのに崩れたなら、プラグインとテーマを切り分ける
この順番で追っていけば、原因にはたどり着けるはずです。焦って何箇所も同時に変えると、かえって分からなくなるので、一箇所ずつ変えて確認するのがコツですね。
