WordPressのスマホ表示が崩れる！モバイルレスポンシブ対応や見にくい際の11の対処法を解説！

「WordPressサイトをスマホで見ると、表示が崩れている…！」
「スマホからでも見やすいサイトにするためには、どんな設定をすればいい？」
このようにお悩みですか？

パソコンでWordPressサイトを見てもおかしくないのに、スマホでは見にくいというのはよくある話です。自動でスマホ用に最適化させるためには、事前に「レスポンシブ対応」を行う必要があります。

本記事では、スマホ表示できるレスポンシブ対応のメリットや方法・スマホ表示が崩れた場合の確認手順および対処法を紹介します。今すぐ表示崩れを直したい人・レスポンシブ対応を行いたい人、どちらにも役立つ内容となっています。

WordPressのスマホ表示が崩れるとお悩みのあなたは、最低金額8,000円〜・成果報酬制だから安心の「ワードプレスの119番」までお問い合わせください。

【ワードプレスの119番お問い合わせ窓口】
担当者直通電話番号：080-4323-3555
担当者直通メール：wordpress119@kamarudo.co.jp

WordPressのスマホ表示が崩れる際の3つの確認手順

スマホ表示が崩れるのは珍しい話ではありません。おかしいと感じたときに落ち着いて対処できるよう、確認手順を把握しておきましょう。確認の流れは次の3ステップです。

WordPressのスマホ表示が崩れる際の確認手順

別のスマホ端末を使って表示が崩れるか確認する
スマホ端末を再起動して表示を確認する
ブラウザを最新バージョンに更新する

簡単な方法だけで、スマホ表示が改善する可能性があります。それでは各手順を確認していきましょう。

①別のスマホ端末を使って表示が崩れるか確認する

第一に、別のスマホ端末での表示状況を確認してみてください。もし他のデバイスで正しく表示されれば、崩れの原因は端末だと判断できます。

WordPress自体に問題はないと言えるでしょう。不具合の発生が、特定の端末か・すべての端末かわかったら、次のステップに進みます。

②スマホ端末を再起動して表示を確認する

第二に、シンプルかつ効果が期待できる方法が再起動です。不具合が生じている端末の電源をオフにし、再起動してください。再度サイトにアクセスし、崩れが直っていないか確認しましょう。

単純ですが、意外と再起動で直る場合も多いです。再起動しても状況が変わらない場合は、次のステップに進んでください。

③ブラウザを最新バージョンに更新する

第三に、ブラウザを最新にする方法です。ブラウザには古いデータが残っていく仕様なので、更新するだけで表示崩れが直る可能性があります。

SafariやGoogleChromeブラウザにて、最上部または最下部にある検索窓に横に丸まった矢印があります。その矢印をタップすれば、ページが更新される仕組みです。

何度かリロードし、スマホ表示が直っていないか確認しましょう。ここまでの3ステップで確認しても改善しない場合は、次章で紹介する対処法を取る必要があります。

WordPressのスマホ表示が崩れる際の11の対処法

上記3つの確認をしても直らない場合の対処法を、11つ紹介します。数が多く面倒に感じるかもしれませんが、中には簡単な方法もあります。

スマホ表示の崩れを放置していると、せっかくアクセスしてくれたユーザーが離れていってしまうことも。少しでも早く直すことを心がけ、以下の方法を試してみてください。

WordPressのスマホ表示が崩れる際の対処法

WordPressのキャッシュをクリアする
スマホ端末のキャッシュをクリアする
不自然な改行・空白を修正する
ブラウザでHTMLソースに不要なタグがないか確認する
検証ツールを使って問題の箇所を見つける
画像・SNSの埋め込みコードのサイズをチェックする
Googleアドセンスや広告のサイズをチェックする
モバイルレスポンシブ対応のプラグインを無効化してみる
スマホなどのモバイルの表示スピードを速くする
プラグインを1つずつ順番に無効化してみる
サイドバーウィジェットの不具合をチェックする

各対処法をそれぞれ確認します。

①WordPressのキャッシュをクリアする

まずは、WordPressのキャッシュをクリアしてみましょう。WordPressのキャッシュはサイトを訪問した時点のデータが保存される仕組みです。

そのため、記事を更新したあとでも古い内容が残る可能性があります。ページ速度も改善されるため、定期的に行うことをおすすめします。

WordPressのキャッシュクリアはデフォルト設定にないため、プラグインをインストールして追加しなければいけません。高性能なキャッシュクリア機能があるプラグインは、無料でインストールできます。キャッシュを削除してもサイト運営に何ら問題はないので安心してください。

②スマホ端末のキャッシュをクリアする

次に試したいのは、スマホ本体のキャッシュクリアです。サイトを閲覧しているブラウザのキャッシュを削除することで、表示が直る可能性があります。閲覧履歴が一緒に消えてしまいますが、特に問題はありません。

キャッシュクリアの方法は、iPhone・Androidで異なります。

スマホ端末のキャッシュクリアの方法

iPhone
Android

各端末からの操作方法を紹介します。

iPhoneでキャッシュクリアをする方法

iPhoneの場合、まずは「設定」アプリを立ち上げ、ブラウザ「Safari」を選んでください。Safariの設定画面を下にスクロールし、「閲覧とWebサイトデータを削除」の文字をタップします。確認のポップアップが現れるので、「閲覧とデータを削除」をタップすれば作業は完了です。

削除と聞けば不安に感じるかもしれませんが、一時的に保存されているデータを消すだけです。スマホの機能や操作に影響はないので、安心してください。

Androidでキャッシュクリアをする方法

Androidの場合は、設定アプリからではなくブラウザから直接キャッシュクリアできます。スマホ表示が崩れているサイトを見ているブラウザで、画面右上にある「縦の3点マーク」をタップ。

メニュー内から「履歴」＞「閲覧履歴データを削除」に進みます。削除する内容は「Cookieとサイトデータ」と「キャッシュされた画像とファイル」です。

チェックボックスに入れたら「データを削除」を選んで作業は完了です。表示が崩れているサイトにアクセスし、改善しているか確認しましょう。

③不自然な改行・空白を修正する

パソコンからWordPressを編集している場合、見やすいように意識して改行・空白を入れていませんか？スマホとパソコンでは画面サイズが異なるため、変な改行や空白になっている可能性があります。

どのデバイスからでも閲覧しやすいサイトにするためには、余計な改行・空白は不要と言えます。画面サイズの異なるユーザー皆に、同じように改行を入れることは困難です。不自然に入った改行・空白を修正すると、スマホ表示の崩れが直るかもしれません。

④ブラウザでHTMLソースに不要なタグがないか確認する

次に、ブラウザからHTMLソースを見てみましょう。テーマやテンプレートを編集した影響で、不要なタグが追加されている可能性があります。

不具合が発生しているページで右クリックし、「ページのソースを表示」をクリックすればHTMLタグが確認可能です。不要なタグが見つかれば、該当箇所を削除しましょう。

削除は、WordPressメニュー内の「外観」＞「テーマエディター」から行えます。タグの確認が面倒であれば、テーマの再インストールでも同様です。

⑤検証ツールを使って問題の箇所を見つける

スマホ表示が崩れている原因箇所は、検証ツールを使えば特定できます。HTMLソースを見てもわからない場合は、検証ツールを活用しましょう。

原因がある程度特定できている場合はその箇所をドラッグして選択、何もわからない場合は無選択の状態で、サイト上で右クリック。メニュー内で「検証」をクリックしてください。

画面右側に白い窓が現れ、HTMLおよびCSSが確認できます。不自然な数値が見つかれば、表示崩れの原因の可能性があります。テーマテンプレートの編集やCSSの修正を行うと、改善されるでしょう。

⑥画像・SNSの埋め込みコードのサイズをチェックする

WordPressでは、画像をアップロードすれば自動でサイズ調整される仕様です。しかし、何らかの原因で元のサイズで表示される可能性があるので、念のため画像サイズも確認しましょう。

またLINEやInstagramといった各SNSへリンクさせる埋め込みコードを入れている場合、画像サイズが適していないかもしれません。埋め込みコードを生成するときは、小さいサイズを選択すると崩れが生じにくくなります。

⑦Googleアドセンスや広告のサイズをチェックする

SNSの埋め込みコードと同じく、Googleアドセンスや広告のサイズの影響で表示崩れが発生しているかもしれません。基本的には表示先のデバイスに合わせて自動で修正される仕組みですが、些細なズレが影響している可能性も。

サイト運営において重要な収入源となる広告ですが、表示崩れの原因になっては意味がありません。広告サイズを変更できる場合は、少し小さくしてみてください。わずかな修正でも、表示が改善する可能性があります。

⑧モバイルレスポンシブ対応のプラグインを無効化してみる

Googleも推奨するモバイルレスポンシブ対応のことを、通称「AMP化」と呼びます。ページ表示を最適化し、読み込み速度アップ・SEO効果とメリットが多いAMP化ですが、WordPressには完全に浸透していないのが現状です。

AMP化させたサイトの表示が崩れている場合は、AMP化のためのプラグインが影響しているかもしれません。AMP化されたサイトは、URLの頭に「カミナリマーク」またはURLの末尾に「/amp」が付いています。該当する場合は、プラグインを無効化・アンインストールしてみましょう。

⑨スマホなどのモバイルの表示スピードを速くする

スマホでWordPressのサイトを表示する場合、パソコンよりも時間がかかることが多いです。表示速度の遅さから情報がうまく読み込めず、表示崩れに繋がっている可能性があります。表示速度の速さはSEO効果にも繋がる内容なので、早目に改善することがおすすめです。

表示速度は、専用サイトで無料で測定できます。数値で結果が評価され、概ね「80」程度あれば問題ありません。表示速度を高速化させたい場合は、より早いレンタルサーバーの移行・不要なプラグインの削除・画像の最適化などが効果的です。

⑩プラグインを1つずつ順番に無効化してみる

ここまで試しても不具合が直らない場合は、プラグインが影響しているかもしれません。スマホ表示崩れの要因として考えられるのがCSSですが、プラグインを追加することで新しいCSSが追加されることがあります。新しく追加されたCSSがテーマと合わない場合、ズレが発生してしまうのです。

プラグインの名前が入ったclass名で見つけることもできます。しかし、対象のプラグインが少ない場合は、順に無効化していく方が早いでしょう。無効化・有効化を繰り返し、不具合が改善しないか調べてみてください。

⑪サイドバーウィジェットの不具合をチェックする

見やすいサイトを構築するために、WordPressにウィジェットを設置することは主流です。ウィジェットを搭載したサイトをスマホ表示する場合、自動で微調整してくれる機能がデフォルトで備わっています。例えば、パソコン表示では画面右にあるサイドバーウィジェットが、スマホ表示では自動で下側に現れたりします。

基本的には自動で切り替わるため、ウィジェットによる不具合を直すためには高度なテクニックが必要になるでしょう。WordPress上級者でないと改善は難しいです。サイドバーウィジェットを修正したあとに表示崩れが発生した場合は、その修正内容を戻すことで直る可能性があります。

WordPressのスマホ表示でも表を崩れさせない2つの方法

スマホ表示が崩れた場合の対処法を紹介しましたが、そもそもの崩れを防止するコツがあります。特に記事に表を用いる場合、次のような対策を取ることで崩れは発生しません。WordPressのサイトで表を使っている方は、以下の設定を行いましょう。

スマホ表示で表を崩れさせない方法

表プロパティの幅の数字を100%から700pxに変更する
表を横スクロールできるように指示を書く

各手順について詳しく確認します。

①表プロパティの幅の数字を100%から700pxに変更する

まずは、通常通り表を作成してください。表は、WordPressのテーブル機能で作れます。このまま何も設定しないと、画面の小さいスマホで表示させたときは表が圧縮されてしまいます。縦横比がおかしく、ユーザーにとっては見にくい状態に。

ここで、表プロパティの幅の数字を指定しましょう。表の全体を選択した状態で、表のマークをクリックします。メニュー内から「表のプロパティ」を選び、一般タブの「幅」を「100%」から「700px」に書き換えてください。

最後に「OK」をクリックすれば設定完了です。この設定を行うことで、表の幅が自動調整されるのを防げます。

②表を横スクロールできるように指示を書く

幅の設定ができたところで、次はスクロールを入れていきます。このままでは画面からはみ出た表の内容を読むことはできません。

WordPressの記事編集画面を、コードエディターで開いてください。次に、スクロールさせたい表のコードを探します。

表のコードは、「<table>～</table>」です。表のコードを見つけたら、スクロールさせるために「<div class="scroll">～</div>」で挟みます。つまり、「<div class="scroll"><table>～</table></div>」になればOKです。

表のコード修正が完了したら、最後にCSSを追加します。WordPressメニューから「外観」＞「カスタマイズ」＞「追加CSS」に進んでください。以下のCSSコードを貼り付けて「公開」をクリックすれば設定完了です。

/*表の左右スクロールここから*/
table{
width:100%;
}
.scroll{
overflow: auto;
white-space:nowrap;
}
.scroll::-webkit-scrollbar{
height: 15px;
}
.scroll::-webkit-scrollbar-track{
background: #f1f1f1;
}
.scroll::-webkit-scrollbar-thumb{
background: #bbb;
}
/*表の左右スクロールここまで*/"

WordPressでスマホ表示を最適化する「レスポンシブ対応」とは

WordPressの記事がスマホで見ると崩れる場合は、「レスポンシブ対応」をすることで改善できます。スマホが普及した現在、サイトを閲覧するユーザーの大半がスマホからです。そのため、どのスマホからでも見やすい環境を整えておくことが重要になります。

そこで便利なのが、画面サイズの異なる各デバイスからでも見やすいようサイトを最適化してくれる「レスポンシブ」です。Webデザインの代表的な手法で、ユーザー離脱を防ぐための必須設定とも言えるでしょう。

レスポンシブ対応の設定にはいくつか方法がありますが、中には無料かつ知識不要で取り入れられる方法も。3つの具体的な方法を後述するので、引き続きご覧ください。

WordPressをレスポンシブ対応にする3つのメリット

レスポンシブ対応をすれば、サイトの外観や操作方法を最適化できます。本章では、最適化することで得られる具体的なメリットを3つ紹介します。

WordPressをレスポンシブ対応にするメリット

スマホでもサイトが見やすい
管理・更新の手間が省ける
SEO対策として効果がある

WordPressをレスポンシブ対応することで得られるメリットは、見やすさだけではありません。それぞれ詳しく見ていきましょう。

①スマホでもサイトが見やすい

気になるサイトがあっても、スマホで見ると見にくくなり困った経験はありませんか？レスポンシブ対応すれば、どのデバイスからでも見やすい・操作しやすいように自動で変更してくれます。

画面サイズは問われないので、スマホやタブレット・パソコンからでも快適にサイトを閲覧可能に。今後どのような画面サイズのデバイスが新登場しても問題ありません。

ユーザーが読んでくれるサイトを構築するためには、レスポンシブ対応が必須です。読みやすい・操作しやすいサイト制作を目指しましょう。

②管理・更新の手間が省ける

レスポンシブ対応なしでスマホ・パソコン表示を変えようとする場合、別でHTMLを管理しなければいけません。記事の修正が発生した場合は二度手間となり、作業量は増えてしまいます。書き換えミスが起こることも考慮すれば、管理するHTMLは最低限にしておきたいところです。

そこで、レスポンシブ対応にすれば管理するHTMLは1つになります。分けて管理する必要はなく、更新時の書き換えも容易です。手間を最小限に抑えられることに繋がるでしょう。管理や更新面からも、レスポンシブ対応の導入をおすすめします。

③SEO対策として効果がある

レスポンシブ対応は、SEO対策としても効果的です。モバイル版サイトを提供することは、Googleからも強く推奨されています。SEOの評価はページごとなので、スマホ版・パソコン版で異なるページを作成しても効果は薄くなります。

レスポンシブ対応で1つのページに絞ることでユーザーの分散を防げ、結果的にSEO評価が高くなる仕組みです。検索エンジンでより上位に表示させるためにも、スマホからでも見やすいサイトを構築しましょう。

WordPressをスマホ最適化するレスポンシブ対応の3つの方法

レスポンシブ対応のメリットがわかったところで、本章では実際の設定方法について解説します。WordPressでスマホ最適化する方法は、次の3通りです。

WordPressをレスポンシブ対応にする方法

レスポンシブ対応可能なテーマを利用する
レスポンシブ対応が可能なプラグインを利用する
CSSを書いてレスポンシブ対応にする

具体的なレスポンシブのやり方は、テーマを使う・プラグインを使う・CSSを書くの3通りです。あなたのサイトに合った方法で、サイトを最適化してみましょう。それぞれ詳しく解説します。

①レスポンシブ対応可能なテーマを利用する

WordPressのテーマの中には、デフォルトでレスポンシブ対応してくれるものがあります。テーマを使う最大のメリットは、手間が一切ないことです。テーマを使うだけで最初から最適化してくれるので、コードを書き換えたり、設定を変更する必要もありません。

レスポンシブ対応可能なテーマは、無料で使えるものも存在します。デザインや使い勝手などを加味しつつ、あなたのサイトに合ったテーマを探してみてください。

②レスポンシブ対応が可能なプラグインを利用する

使っているテーマがレスポンシブに対応していない場合は、プラグインを利用してください。数多くあるプラグインの中には、レスポンシブ対応機能が備わったものもあります。

プラグインの導入は、インストールして有効化するだけです。プラグインによっては特に操作不要で、自動でスマホページを作成してくれるものも。デザインを細かくカスタマイズできるプラグインもあるので、気になる方は探してみましょう。

③CSSを書いてレスポンシブ対応にする

CSSが書ける方は、テーマやプラグインを使わずにレスポンシブ対応ができます。レスポンシブ対応のCSSデザインは複雑で専門知識が必要なため、初心者には向いていません。

レスポンシブ対応のCSSは、「メディアクエリ」をCSSとHTMLで管理していく流れです。メディアクエリとはレスポンシブ対応させるための機能のこと。コードの知識があればそこまで難しい作業ではないので、気になる方はトライしてみてください。

まとめ：対処法を試しても解決しない場合はプロに相談を

どのデバイスからでもユーザーが読みやすいサイトとなるように、「レスポンシブ対応」は必須の設定です。SEO対策としても効果的なので、WordPressでサイトを運営している方はまず行ってみましょう。

スマホ表示が崩れてしまった場合は、本記事で紹介した確認手順と対処法を試してみてください。ひとつひとつ試すことで、原因が特定できるはずです。対処法を試しても直らない・原因がわからないときは、プロに相談することをおすすめします。

知識がないままCSSや設定をいじってしまうと、ますます不具合が酷くなる可能性も。まずは相談料無料のカマルドに問い合わせてみましょう。

WordPressのスマホ表示が崩れるとお悩みのあなたは、最低金額8,000円〜・成果報酬制だから安心の「ワードプレスの119番」までお問い合わせください。

【ワードプレスの119番お問い合わせ窓口】
担当者直通電話番号：080-4323-3555
担当者直通メール：wordpress119@kamarudo.co.jp

ワードプレスのバグ・ウイルス感染はカマルドで解決できます

ワードプレスでスマホ表示が崩れる場合は、カマルドの「ワードプレスの119番」で解決できます。カマルドには、ワードプレスに精通したエンジニアが多数在籍しており、これまでのトラブル解決率は96％です。年間160件の修復依頼を承っています。

依頼費用は完全成果報酬制で、調査費用は一切かかりません。対応スピードも早く、最短即日対応が可能です。一刻も早く修正したい不具合があるときは、ぜひカマルドへご連絡ください。

ワードプレスの119番を利用する流れ

ワードプレスの119番を利用する流れは以下の通りです。

専用お問い合わせフォームから状況を詳しく伝える
Webサイトの調査を行う
お見積もりを行う
ワードプレス修復を依頼する
作業終了後、カマルドとお客様で問題がないかを確認する
料金のお支払い

お問い合わせフォームから状況を伝える際は、対応が必要な具体的な症状やレイアウト・試した対処法などの詳細な情報をご提示ください。

ホームページやブログの調査時には、一切費用はかかりません。また、サーバー移転やカスタマイズなども問い合わせ可能です。

お見積もり金額を提示するタイミングで、修復にかかるおよその時間もお伝えいたします。予定よりも時間がかかるケースはありますが、料金については見積もり後に変わることはありません。

ワードプレスの119番の料金

ワードプレスの119番の料金は以下の通りです。

トラブル	料金
管理画面にログインできない	30,000円～
サイトが真っ白になってしまった	20,000円～
サイトの上部に意味不明な英文が表示されている	20,000円～
海外サイトにリダイレクトされる	40,000円～
サイトの改ざん	40,000円～
マルウェア除去	40,000円～
覚えのない記事が投稿されている	30,000円～
レイアウトの変更、崩れの修正	8,000円～
MySQLデータベース消去・改ざんを復元	40,000円～、要見積、復元の難易度によって大幅に異なります。
定期データバックアップ	30,000円～
ワードプレスのセキュリティ対策	30,000円～
ワードプレスサイトの復旧・復元	40,000円～
ワードプレスのインストール	13,000円～
アナリティクス導入	7,000円～
国内テーマの設定	13,000円～
海外テーマの設定	30,000円～
ワードプレスのサーバー移行（引っ越し）	40,000円～
ワードプレスサイトやプラグインのアップデート	13,000円～
サイトの自動バックアップの導入	8,000円～
アクセス解析の導入	8,000円～
テーマ（テンプレート）のカスタマイズ	55,000円～
サイトのhttps化(ssl導入)	13,000円～
既存サイトをワードプレス化	90,000円～
お問い合わせ等のフォームの導入	17,000円～
バックアップデータからのサイトの復元	30,000円～