Cocoonでスマホ表示が崩れる原因と直し方｜初心者向けに対処法を解説

「パソコンでは正常なのに、スマホで見るとCocoonの表示が崩れている」

「画像や表が画面からはみ出して、横にスクロールできてしまう」

このような状態になっていませんか？

Cocoonはスマートフォン表示に対応したWordPressテーマですが、追加したCSSや画像、表、広告、プラグインなどの影響で表示が崩れることがあります。

僕もCocoonをカスタマイズしているときに、パソコンでは問題なく表示されているのに、スマートフォンだけ文章や画像の位置がずれることがありました。

スマホ表示の崩れは、原因を確認せずにCSSを追加すると、別の場所まで崩してしまう可能性があります。

この記事では、Cocoonでスマホ表示が崩れる主な原因と直し方を、WordPress初心者にもわかりやすく順番に解説します。

Cocoonでスマホ表示が崩れる主な原因

 

Cocoonのスマホ表示が崩れる場合、テーマそのものに不具合があるとは限りません。

多くの場合は、次のような設定やカスタマイズが影響しています。

• 横幅が固定された画像や表を使用している
• 追加CSSの横幅や余白がスマホに対応していない
• 広告や埋め込み動画が画面からはみ出している
• 長いURLや英数字が改行されていない
• キャッシュに古いCSSが残っている
• HTML・CSS・JavaScriptの縮小設定が影響している
• プラグインとCocoonが競合している
• Cocoonやプラグインが古いままになっている

複数の設定を一度に変更すると、どの操作で直ったのかわからなくなります。

表示を確認しながら、一つずつ原因を切り分けましょう。

最初にスマホの実機で表示を確認する

最初に、実際のスマートフォンから記事を開いて表示を確認します。

WordPressのプレビューやパソコンの開発者ツールは便利ですが、実際のスマートフォンと完全に同じ表示になるとは限りません。

次の項目を確認してください。

• 画面を左右に動かせないか
• 画像が画面からはみ出していないか
• 表の右側が切れていないか
• 文字が不自然な位置で改行されていないか
• ヘッダーやメニューが重なっていないか
• 広告や動画が画面幅を超えていないか

特定の記事だけ崩れているのか、サイト全体で崩れているのかも確認しましょう。

画像がスマホ画面からはみ出していないか確認する

スマホ表示が横に広がる場合は、画像に固定された横幅が設定されている可能性があります。

記事内の画像へ、スマートフォンの画面幅より大きな横幅が固定されていると、レイアウト全体が横へ押し広げられることがあります。

HTMLに次のような固定幅が設定されていないか確認してください。

<img src="画像URL" width="800">

Cocoonでは通常、画像が画面幅に合わせて縮小されます。しかし、独自に追加したHTMLやCSSが優先されると、画像がはみ出す場合があります。

画像の横幅を画面内に収めるCSS

追加した画像だけがはみ出す場合は、対象となる画像へ次のような指定を使えます。

img {
  max-width: 100%;
  height: auto;
}

ただし、Cocoonには画像を画面幅に収めるための基本的なスタイルが用意されています。

最初からサイト全体へCSSを追加するのではなく、画像に独自の固定幅が設定されていないかを先に確認しましょう。

表がスマホ画面からはみ出す場合の対処法

比較表や料金表は項目数が多いため、スマホの画面内に収まらないことがあります。

文字を無理に小さくすると読みづらくなるため、横幅の広い表は横スクロールできる形にするのがおすすめです。

表を横スクロールさせる方法

表全体を次のような要素で囲みます。

<div class="table-scroll">
<table>
表の内容
</table>
</div>

追加CSSには、次のコードを入れます。

.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-scroll table {
  min-width: 600px;
}

これにより、スマートフォンでは表だけを横方向へ動かして確認できるようになります。

すべての表に設定する必要はありません。画面からはみ出す横長の表だけに使用しましょう。

動画や広告の横幅を確認する

YouTube動画、地図、広告などの埋め込みコンテンツが原因で、スマホ表示が崩れることもあります。

埋め込みコードに固定された横幅が設定されていないか確認してください。

たとえば、次のような指定です。

width="800"

横幅が固定されている場合、スマートフォンの画面からはみ出す可能性があります。

YouTubeなどの埋め込み機能を使用する場合は、Cocoon標準の機能やWordPressの埋め込み機能を利用すると、画面幅に合わせて表示されやすくなります。

長いURLや英数字が原因になっていないか確認する

長いURLや英数字が連続した文章は、途中で改行されず、スマホ画面からはみ出すことがあります。

特に、本文へURLをそのまま表示している場合は注意が必要です。

URLをそのまま見せるのではなく、次のようにリンク文字へ変更すると読みやすくなります。

<a href="リンク先URL">詳しい設定方法はこちら</a>

コードやURLを記事内に表示する必要がある場合は、対象部分だけ横スクロールできるようにすると安全です。

追加CSSが原因か確認する

Cocoonのスマホ表示が突然崩れた場合は、最近追加したCSSを確認しましょう。

特に次の指定は、スマホ表示へ影響しやすい項目です。

• 固定されたwidth
• 大きなmarginやpadding
• position:absolute
• position:fixed
• 横方向のtransform
• 固定された文字サイズ
• 複数カラムの横並び設定

固定された横幅を確認する

次のようなCSSは、パソコンでは正常でもスマートフォンで画面からはみ出す可能性があります。

.sample-box {
  width: 800px;
}

スマートフォンにも対応させる場合は、次のように最大幅を指定します。

.sample-box {
  width: 100%;
  max-width: 800px;
  box-sizing: border-box;
}

これにより、パソコンでは最大800px、画面が狭い場合は利用できる横幅に合わせて縮小されます。

スマホだけCSSを調整する

スマホ表示だけ余白や文字サイズを変更したい場合は、メディアクエリを使います。

@media screen and (max-width: 834px) {
  .sample-box {
    margin: 10px 0;
    padding: 15px;
    font-size: 16px;
  }
}

ただし、原因がわからない状態でCSSを追加し続けると、さらに修正が難しくなります。

最近追加したCSSを一つずつ一時的に外し、表示が戻るか確認する方法が安全です。

キャッシュを削除してスマホ表示を確認する

CSSを修正してもスマホ表示が変わらない場合は、キャッシュに古いデザイン情報が残っている可能性があります。

次のキャッシュを順番に確認しましょう。

• Cocoonのキャッシュ
• キャッシュプラグインのキャッシュ
• レンタルサーバー側のキャッシュ
• スマートフォンのブラウザキャッシュ

キャッシュを削除したあとは、スマートフォンで記事を再読み込みします。

別のブラウザやシークレットモードから確認すると、キャッシュの影響を受けにくくなります。

高速化設定を一時的に無効化して確認する

HTML・CSS・JavaScriptの縮小や結合が、表示崩れに影響することがあります。

原因を確認するときは、高速化設定を一時的に無効にして表示を確認します。

• HTMLの縮小
• CSSの縮小
• JavaScriptの縮小
• ファイルの結合
• 遅延読み込み

高速化設定を無効にして表示が直る場合は、縮小や結合するファイルの組み合わせが影響している可能性があります。

プラグインとの競合を確認する

スマホ用メニュー、画像、表、広告、キャッシュなどを変更するプラグインが、Cocoonの表示へ影響する場合があります。

最近プラグインを追加または更新したあとに崩れた場合は、そのプラグインを確認しましょう。

原因を切り分ける場合は、サイトのバックアップを取ったうえで、疑わしいプラグインを一つずつ停止して表示を確認します。

複数のプラグインを一度に停止すると、どのプラグインが原因だったのかわからなくなるため注意してください。

Cocoon・WordPress・プラグインを更新する

CocoonやWordPress、プラグインのバージョンが古い場合、組み合わせによってスマホ表示に問題が起きることがあります。

次の項目に更新がないか確認しましょう。

• WordPress本体
• Cocoon親テーマ
• Cocoon子テーマ
• 使用中のプラグイン

更新前には必ずバックアップを取ってください。

更新後はキャッシュを削除し、パソコンとスマートフォンの両方から表示を確認しましょう。

Cocoonのスマホ表示が崩れたときの確認手順

原因がわからない場合は、次の順番で確認すると効率的です。

1. スマートフォンの実機で崩れている場所を確認する
2. 特定の記事だけか、サイト全体かを確認する
3. 画像・表・動画・広告の横幅を確認する
4. 最近追加したCSSを確認する
5. キャッシュを削除する
6. 高速化設定を一時的に無効化する
7. 疑わしいプラグインを一つずつ確認する
8. Cocoon・WordPress・プラグインを更新する

一つの項目を確認するたびにスマホ表示を再確認し、どの操作で直ったのかを把握しましょう。

Cocoonのスマホ表示に関するよくある質問

まとめ｜Cocoonのスマホ表示を一つずつ確認しよう

Cocoonでスマホ表示が崩れる場合は、最初にどの部分が画面からはみ出しているのか確認しましょう。

主な確認項目は次のとおりです。

• 画像・表・動画・広告の横幅
• 追加CSSの固定幅や余白
• 長いURLや連続した英数字
• キャッシュや高速化設定
• プラグインの競合
• CocoonやWordPressの更新状況

原因がわからないままCSSを追加するのではなく、一つずつ設定を確認することが大切です。

スマホ表示が直ったあとは、記事ページだけでなく、トップページ・固定ページ・お問い合わせページなども確認しておきましょう。