WordPressでモバイル表示の画像を非表示にする方法 

デスクトップ用の大きな画像は、モバイルレイアウトを崩す可能性があります。読み込み時間を遅くし、コンテンツを押し下げすぎ、小さな画面ではサイトが煩雑に見えます。解決策は簡単です。モバイルで画像を非表示にして、訪問者には重要なものだけを表示させましょう。

このガイドでは、WordPressでモバイル表示の画像を非表示にするための3つの簡単な方法を紹介します。コード不要のオプションと簡単なCSSの方法が含まれています。

WordPressでモバイル表示の画像を表示および非表示にする方法

モバイル画面で画像を非表示にするソリューションは、コーディング言語に慣れていないユーザーにとっては複雑に思えるかもしれません。簡単なGoogle検索では、カスタムCSSの記述、divクラス、およびあらゆる種類の専門用語の手順が表示されます。

心配いりません。以下の方法では、技術的な専門知識は必要ありません。必要なのは、WordPressプラグイン、WordPressウェブサイト、そして簡単な手順に従う能力だけです。

方法1：ウェブサイトでモバイル表示の画像を非表示にする

SeedProdを使用して、コードを書かずにWordPressで画像を非表示にします。

SeedProdは、WordPress向けの最高のウェブサイトビルダーです。コードを書かずにWordPressテーマ、ランディングページ、レスポンシブレイアウトを作成できます。

何百もの既製のテンプレートが含まれており、ビジュアルなドラッグアンドドロップページビルダー、ブロック、セクションを使用して、ウェブサイトのあらゆる部分をカスタマイズできます。また、デバイス表示設定を使用して、モバイルおよびデスクトップ表示で特定のコンテンツを非表示にすることもできます。

SeedProdには、近日公開、メンテナンスモード、404ページ、ログインページなどの組み込みモードも用意されています。各モードはワンクリックでオン/オフでき、デザイン作業中にウェブサイトを一般に公開しないようにすることができます。

WordPressウェブサイトでモバイル表示の画像を非表示にするには、以下の手順に従ってください。

ステップ1. SeedProdのインストールと有効化

まず、以下のボタンをクリックしてSeedProdを入手してください。

注意: SeedProdのウェブサイトビルダー機能を使用するには、SeedProd Proライセンスが必要です。

プラグインをダウンロードしたら、WordPressサイトにインストールして有効化してください。ヘルプが必要な場合は、WordPressプラグインのインストール方法のガイドに従ってください。

次に、SeedProd » 設定に移動し、ライセンスキーを入力します。

キーは、SeedProdアカウントダッシュボードの「ダウンロード」セクションで見つけることができます。

キーの検証ボタンをクリックしてSeedProdライセンスを解除し、次のステップに進みます。

ステップ2. ウェブサイトテンプレートの選択

次のステップは、カスタムWordPressテーマの作成です。これにより、SeedProdの「デバイス表示」設定を使用して、デスクトップとモバイルで異なるコンテンツを表示したり非表示にしたりできます。

SeedProd » テーマビルダーに移動し、テーマボタンをクリックしてウェブサイトテンプレートを選択します。

eコマース、ブログ、ポートフォリオなど、さまざまな業界やウェブサイトの種類に対応する多くのテーマが利用可能です。

気に入ったテーマを見つけたら、その上にカーソルを合わせてチェックマークアイコンをクリックすると、サイトにインポートされます。

これで、WordPressテーマを構成するさまざまな部分が表示されます。

通常、これらのカスタマイズにはコードを手動で編集する必要がありますが、SeedProdを使用すると、ドラッグアンドドロップのページビルダーでウェブサイトの各部分を視覚的に編集できます。

ウェブサイトのいずれかの部分をカスタマイズするには、テーマテンプレートの上にカーソルを合わせて「デザインを編集」リンクをクリックします。このガイドでは、ホームページから始めます。

テンプレートを選択したら、SeedProdのドラッグアンドドロップビルダーでレイアウトをカスタマイズできます。準備ができたら、ステップ4に進んで画像を非表示にします。

ステップ4. デバイス表示でモバイルのウェブサイト画像を非表示にする

SeedProdの「デバイス表示」設定を使用すると、モバイル表示の画像を簡単に非表示にできます。画像を個別に、または画像セクション全体をワンクリックで非表示にできます。

画像を個別に非表示にするには、非表示にしたい画像を見つけてクリックし、コンテンツ設定を開きます。

次に、「詳細設定」タブをクリックし、「デバイス表示」セクションを展開します。

画像をモバイルで非表示にするには、「モバイルで非表示」の見出しの横にあるトグルをクリックします。

その画像はデスクトップ訪問者にのみ表示され、モバイルでは非表示になります。

同じ手順で、SeedProdを使用して画像行全体を非表示にすることもできます。行の設定を開き、「詳細設定」タブで「デバイス表示」設定を使用して、モバイルで画像行を非表示にします。

下部ツールバーの「モバイルプレビュー」アイコンをクリックすると、変更をプレビューできます。

「グレーアウト」した画像は、モバイルウェブサイトの訪問者には表示されません。

デザインがどのように見えるかに満足したら、画面右上の保存ボタンをクリックしてください。

上記の手順に従って、サイドバー、シングル投稿、ページなどの他のテーマテンプレートでモバイル表示の画像を非表示にします。

たとえば、モバイルでブログ投稿のアイキャッチ画像を非表示にしたい場合は、シングル投稿テンプレートを編集し、アイキャッチ画像ブロックの表示設定を次のように変更できます。

ステップ5. WordPressウェブサイトを公開する

カスタムテーマを公開する準備ができたら、SeedProd » テーマビルダーに移動し、「SeedProdテーマを有効にする」トグルを「オン」の位置に切り替えます。

これで、ウェブサイトをプレビューして変更を確認できます。この例からわかるように、先ほど選択した画像はモバイルでは非表示になっています。

方法2：ランディングページでモバイル表示の画像を非表示にする

同じ手順は、スタンドアロンのランディングページにも適用されます。SeedProd » ランディングページでページを作成し、エディターで開き、高度なタブでモバイルで非表示を切り替えます。

方法3：CSSでモバイル画像を非表示にする

注意: この方法は、コーディング言語の操作に慣れている場合にのみお勧めします。組み込みのWordPressカスタマイザーを使用して、カスタムCSSをウェブサイトに追加できます。

一部のウェブサイト所有者は、サイトを手動でカスタマイズすることを好むことを理解しています。そのため、次の方法では、カスタムCSSを使用してモバイルで画像を非表示にする方法を示します。

まず、画像を含むコンテンツ要素のクラスを見つけます。たとえば、ブログ投稿のアイキャッチ画像です。次に、次のCSSクラスを使用して非表示にできます。

@media only screen and (max-width : 320px) {
.your-element-class {
display: none;
}
}

重要: display:noneは画像を視覚的に非表示にしますが、ブラウザはモバイルで画像をダウンロードします。ページスピードが目標の場合は、方法1の方が適しています。SeedProdのデバイス表示設定は、画像の読み込みを完全に防ぎます。

「your-element-class」を画像を含むCSSクラスに置き換える必要があります。WordPressテーマとメディアクエリに合わせて、最大デバイス幅を調整する必要がある場合もあります。

この例では、「.featured-media img class」をターゲットにして、モバイルで投稿のアイキャッチ画像を非表示にしました。

@media only screen and (max-width: 782px) {
.featured-media img{
display: none;
}
}

ご覧のとおり、画像は小さい画面サイズでは自動的に消えます。

SeedProdを使用せずにWordPressブロックエディターを使用している場合は、ブロック設定の高度なパネルで「モバイルで非表示」トグルを確認してください。WordPress 6.xでは、ほとんどのコアブロックにこのオプションが追加されました。

モバイル表示の画像を非表示にすることに関するFAQ

この記事がWordPressでモバイル表示の画像を非表示にする方法を学ぶのに役立ったことを願っています。次のガイドも役立つかもしれません。

• WordPressでページごとに異なるサイドバーを追加する方法
• WordPressにカスタムCSSを追加する方法（初心者向け）
• WordPressでボックスシャドウを追加する方法
• WordPressでページタイトルを非表示にする方法

お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。

Stacey Corrin Content Marketing Specialist

Stacey Corrin is a certified content marketing and search specialist with over 15 years of experience writing about WordPress, SEO, and digital marketing. She manages content for SeedProd and RafflePress, covering tools and strategies she actively uses and tests herself.

See Full Bio

WordPress SEO Content Marketing Digital Marketing SaaS Copywriting Web Design