WordPressの画像がモバイルに表示されませんか？ 原因、修正、FAQ。

WordPress画像がモバイルに表示されない、または歪んでいる一般的な理由。

この投稿では、WordPress画像がモバイルに表示されない、または歪んでいない理由について、私たちが遭遇した最も一般的な理由のいくつかについて説明します。

これは完全なリストではないことに注意してください。現在のテーマやテーマの変更、現在のWebホスティングプロバイダーでのWebホスティングの問題など、他の要因を確認する必要があります。

ただし、WordPress Webサイトの画像がモバイルデバイスに表示されない、または表示される場合は歪む可能性がある理由について、私たちが遭遇した最も一般的な理由は次のとおりです。

• プラグインまたはテーマの競合。
• ページビルダーの問題。
• テーマの更新の欠如。
• 画像最適化プラグインの使用。
• モバイルとデスクトップでは画像の外観が異なります。
• WPロケットの問題。

WordPressの画像がモバイルに表示されない。 原因と修正。

プラグインまたはテーマの競合。

多くの場合、WordPressに関連するほとんどの問題と同様に、これはプラグインの競合である可能性があります。

他のプラグインの競合を確認するには、まず、サイトで実行されているすべてのプラグインを無効にします。 次に、デフォルトの「20」のテーマに切り替えます。

問題が解決した場合は、プラグインを1つずつ有効にして、問題の原因を特定します。 次に、テーマを有効にします。

診断を容易にするために、プラグインHealthCheckをインストールします。

[トラブルシューティング]タブで、ボタンをクリックしてすべてのプラグインを無効にし、テーマを変更することもできます。 通常のトラフィックやサイトへの訪問者に影響を与えることなく、ログインしている間中ずっと。

ページビルダーの問題。

編集ページでElementorなどのページビルダーを使用している場合は、モバイルレスポンシブ用の画像をアップロードしたことを確認してください。

Elementorの下部にある[設定]>>[レスポンシブモード]にあります。モバイルビューを選択します。 次に、表示する画像をドラッグします。

CSSを使用してそれを表示することもできますが、それが必ずしも最良のオプションであるとは限りません。 ただし、これを試してみることができます。

以下のCSSコードを現在アクティブな子テーマのstyle.cssファイルに追加するか、テーマのカスタマイザーでcssオプションを追加できます。

@media（max-width：767px）{

.elementor：not（.elementor-edit-area-active）.elementor-hidden-phone {

表示ブロック;

}

}

モバイルの問題を修正した後、ブラウザのサイズを特定のサイズを超えて最小化すると、デスクトップブラウザでも画像が消えることがわかります。

次に、これを試してください：

「Elementorでページを編集」に移動し、「セクション」>>「詳細」>>「レスポンシブ」をクリックして、「モバイルで非表示」オプションをオフにします。 または、以下のコードを[カスタマイズ] >> [カスタムCSS]セクションに追加して、修正することもできます。

@media（最大幅：767px）

.elementor：not（.elementor-edit-area-active）.elementor-hidden-phone {

表示：ブロック！重要;

}

テーマの更新の欠如。

偶然に古いテーマまたは更新が含まれていない無料のテーマを使用している場合、モバイルに表示されない画像は、定期的なWordPressコアの更新と組み合わせた無料のテーマの更新の欠如または欠如に関連している可能性があります一般的に定期的なテーマの更新の。

したがって、テーマをWordPressの「Twenty」に切り替えると、定期的に更新されるデフォルトのテーマで、問題がテーマに関連しているかどうかを判断する必要があります。

画像最適化プラグインの使用。

画像最適化プラグインを使用している場合は、画像がテーマで認識されない形式に変換されているか、互換性がない可能性があります。

たとえば、Autoptimizeプラグインが原因で問題が発生しました。このプラグインは、画像を.webp形式に変換して、読み込みやその他の機能を高速化します。

.webp format クイックノート： .webp形式また、「遅延読み込み」プラグインでも問題が発生する可能性があります。

これらまたは他の画像最適化プラグインが当てはまる場合は、より高速なロード時間のためにより互換性のある他のいくつかの画像最適化プラグインを試してみることをお勧めします。

モバイルとデスクトップでは画像の外観が異なります。

注目の画像はデスクトップでは見栄えがしますが、モバイルでは画像が大きすぎて、投稿のプレビュー枠の外に出てしまいます。 この場合は、ページに収まるようにレスポンシブにする必要があります。

このためには、このプラグインを試して、それが役立つかどうかを確認する必要があります。

ShortPixelアダプティブ画像。

WPロケットの問題。

最近WPRocketを購入し、サイトの速度が上がることを期待しているが、モバイルで画像が消えることを期待している場合は、WP Rocketでこのトラブルシューティングドキュメントを確認して、いくつかの潜在的なクイックフィックスを確認してください。 」。

WordPressの画像がモバイルの結論に表示されない。

ほとんどの場合、WordPressの多くの問題と同様に、プラグインやテーマの競合が発生する可能性があります。

オープンソースは、ユーザーのためにWordPressの改善を常に模索している創造的で熱心な開発者からのあらゆる種類の貢献を可能にするため、素晴らしいものです。

ただし、コーディングに加えて大量のテーマとプラグインがあるため、競合が発生する可能性は避けられません。

ただし、プラグインとテーマの競合は、それらが何であるかを知っていれば、通常、最も簡単に解決できますので、ご安心ください。 上記のプラグインであるHealthCheckを使用すると、競合をすばやく見つけることができます。

それでも問題の原因が見つからない場合は、WordPress画像がモバイルに表示されない、または歪んでいる理由としてリストされている他の一般的な理由が原因である可能性があります。

他のすべてが失敗した場合は、WordPressテーマの開発者またはサポートに連絡して、問題を最後から絞り込む必要があります。