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

デスクトップ用の大きな画像は、モバイル用のレイアウトを崩す可能性があります。ロード時間が遅くなり、コンテンツが下に押しやられ、小さな画面ではサイトが乱雑に感じられます。解決策は簡単です。モバイルでは画像を非表示にし、訪問者が重要なものだけを見ることができるようにすることです。

このガイドでは、WordPressのモバイルビューで画像を非表示にする3つの簡単な方法を紹介します。

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

モバイル画面で画像を隠すためのソリューションは、コーディング言語に不慣れなユーザーには複雑に見えるかもしれない。Googleで検索してみると、カスタムCSSやdivクラスの記述方法など、あらゆる専門用語が出てくる。

ご心配なく。以下でご紹介する方法には、専門的な知識は必要ありません。必要なのは、WordPressプラグインとWordPressウェブサイト、そして簡単なステップを踏む能力だけです。

• 方法1：ウェブサイトのモバイル表示で画像を隠す
• 方法2：ランディングページのモバイル表示で画像を隠す
• 方法3：CSSでモバイル上の画像を隠す
• モバイルビューで画像を非表示にするFAQ

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

最初の方法として、モバイル表示で画像を隠す強力なWordPressプラグインを使用する。

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

何百ものテンプレートがあらかじめ用意されており、ドラッグ＆ドロップのビジュアルページビルダー、ブロック、セクションを使って、ウェブサイトを隅々までカスタマイズできます。また、Device Visibility設定を使って、モバイルやデスクトップのビューで特定のコンテンツを非表示にすることもできます。

SeedProdには、近日公開、メンテナンスモード、404ページ、ログインページなどのビルトインモードも用意されています。ワンクリックで各モードをオン・オフすることができ、デザインに取り組んでいる間、ウェブサイトを一般公開から隠すことができます。

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

ステップ1.SeedProdのインストールとアクティベート

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

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

プラグインをダウンロードしたら、WordPressサイトにインストールして有効化してください。WordPressプラグインのインストール方法については、こちらをご覧ください。

次に、SeedProd " Settingsに進み、ライセンスキーを入力します。

キーは、SeedProdアカウントダッシュボードの「ダウンロード」セクションにあります。

Verify KeyボタンをクリックしてSeedProdライセンスのロックを解除し、次のステップに進みます。

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

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

SeedProd " Theme Builderに アクセスし、Themesボタンをクリックしてウェブサイトのテンプレートを選択します。

eコマース、ブログ、ポートフォリオなど、さまざまな業種やウェブサイトのタイプに対応したテーマが多数用意されている。 

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

WordPressテーマを構成するさまざまなパーツが表示されます。

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

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

ステップ3.ウェブサイトのデザインをカスタマイズする

テーマテンプレートを開くと、SeedProdのビジュアルページエディタが表示されます。左側にはカスタムコンテンツを追加するためのブロックとセクションがあり、右側にはライブプレビューがあります。

任意の要素をクリックすると、その設定が表示され、デザインやレイアウトを変更することができます。例えば、見出し要素では、内容、配置、見出しレベルなどを編集できます。

デザインに新しい要素を追加するのも簡単です。左からブロックをドラッグして、ライブプレビューにドロップするだけです。

この例では「カウントダウン」ブロックを使用しました。カウントダウンタイマーは、サイトに緊急性を与え、訪問者が見逃す前に行動することを促す優れた方法です。

他のSeedProdブロックと同様に、クリックすることができます：

• タイマータイプの変更
• タイマーのアライメント調整
• カスタムメッセージの追加
• タイマー終了時にユーザーをリダイレクト
• タイマーサイズの変更

また、「テンプレート」タブをクリックすれば、別のスタイルを素早く選択することもできる。

ステップ4.デバイスの可視性でモバイルのウェブサイト画像を隠す

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

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

次に、'Advanced' タブをクリックし、'Device Visibility' セクションを展開する。

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

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

同じ手順で、SeedProdで画像行全体を非表示にすることができます。行の設定を開き、'詳細設定'タブの'デバイスの可視性'設定でモバイルの画像行を非表示にするだけです。

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

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

デザインの仕上がりに満足したら、画面右上の「保存」ボタンをクリックします。

サイドバー、シングル投稿、ページなど、その他のテーマテンプレートでモバイルビューの画像を非表示にするには、上記の手順に従ってください。

例えば、モバイルでブログ記事のフィーチャー画像を非表示にしたい場合、Single Postテンプレートを編集し、次のようにFeatured Imageブロックの表示設定を変更することができます：

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

カスタムテーマをライブにする準備ができたら、SeedProd " Theme Builderに 行き、'Enable SeedProd Theme'トグルを'On'の位置にします。

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

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

モバイルで画像を非表示にするためにテーマを作り直す必要はありません。SeedProdのランディングページビルダーを使えば、どのスタンドアロンページにも同じデバイス表示設定を適用できます。

これは、セールスファネル、ウェビナー登録、プロモーションページなど、サイト全体のデザインに手を加えることなく、きれいなモバイルビューを実現したい場合に最適です。

SeedProd " ランディングページ で新しいランディングページを作成し、テンプレートを選び、ビジュアルエディタで開くだけです。

次に、非表示にしたい画像を選択し、[詳細設定]→[デバイスの可視性]で[モバイルで非表示]を切り替えます。

携帯電話でプレビューし、ページを公開すれば完了です。

方法3：CSSでモバイル上の画像を隠す

ウェブサイトのオーナーの中には、手作業でサイトをカスタマイズすることを好む人もいると思います。そのため、以下の方法では、カスタムCSSを使ってモバイルで画像を非表示にする方法を紹介します。

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

まず、画像を含むコンテンツ要素のクラスを見つけます。例えば、ブログ記事の特集画像などです。そして、以下のCSSクラスを使って非表示にすることができます：

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

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

この例では、'.featured-media img class'をターゲットにすることで、モバイルでの投稿特集画像を非表示にしています：

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

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

モバイルビューで画像を非表示にするFAQ

この記事で、WordPressのモバイル表示で画像を非表示にする方法を学んでいただけたなら幸いです。以下のガイドもお勧めです：

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

お読みいただきありがとうございました！あなたのご意見をぜひお聞かせください。YouTube、X、Facebookで、あなたのビジネスを成長させるために役立つアドバイスやコンテンツを提供していますので、お気軽に会話にご参加ください。

ステイシー・コリン ライター

ステイシーはWordPressとデジタルマーケティングについて10年以上、その他のトピックについてはもっと長い間執筆している。また、ウェブデザイン、ユーザーエクスペリエンス、SEOにも造詣が深い。

略歴を見る

ワードプレス SEO コンテンツマーケティング デジタルマーケティング SaaS コピーライティング ウェブデザイン