要約：WordPressのモバイル表示で画像を非表示にする方法
WordPressでモバイル版に画像を表示させない3つの方法。方法1はSeedProdを使用し、画像を単に非表示にするだけでなく、読み込み自体を完全に阻止します。
- なぜモバイルで画像を非表示にするのか――大きな画像は読み込みを遅くし、画面が小さいとコンテンツが画面外に出てしまうからです。
- SeedProdのウェブサイト設定方法– 「詳細」タブの「デバイス別表示設定」を使用して、任意の画像やセクションの「モバイルで非表示」を切り替えることができます。
- SeedProdのランディングページ– SeedProd » ランディングページでも同様の手順が適用され、テーマの変更は必要ありません。
- CSS による方法– `display:none` のメディアクエリを追加しますが、注意：モバイル端末ではブラウザが依然として画像をダウンロードします。
デスクトップ用の大きな画像は、モバイル用のレイアウトを崩す可能性があります。ロード時間が遅くなり、コンテンツが下に押しやられ、小さな画面ではサイトが乱雑に感じられます。解決策は簡単です。モバイルでは画像を非表示にし、訪問者が重要なものだけを見ることができるようにすることです。
このガイドでは、WordPressのモバイルビューで画像を非表示にする3つの簡単な方法を紹介します。
WordPressのモバイル版で画像を非表示にする理由
モバイル表示では画像を隠すことで、サイトをすっきりと使いやすく保つことができます。デスクトップでは見栄えのする巨大なヒーロー写真や広告バナーは、小さな画面を圧倒し、読み込み時間を遅くし、重要なコンテンツを視界から追いやる可能性があります。また、場合によっては、携帯電話の訪問者を混乱させることなく、デスクトップ専用のキャンペーンを実施したいこともあるでしょう。
結論：モバイルで画像を非表示にすることで、ユーザーはより速く、よりクリアな体験をすることができる。
WordPressのモバイル表示で画像を表示・非表示にする方法
モバイル画面で画像を隠すためのソリューションは、コーディング言語に不慣れなユーザーには複雑に見えるかもしれない。Googleで検索してみると、カスタムCSSやdivクラスの記述方法など、あらゆる専門用語が出てくる。
ご心配なく。以下でご紹介する方法には、専門的な知識は必要ありません。必要なのは、WordPressプラグインとWordPressウェブサイト、そして簡単なステップを踏む能力だけです。
方法1：ウェブサイトのモバイル表示で画像を隠す
SeedProdを使って、コードを書かずに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を使えば、ドラッグ＆ドロップのページビルダーでウェブサイトの各部分を視覚的に編集することができます。
ウェブサイトのどの部分もカスタマイズするには、テーマ・テンプレートにカーソルを合わせ、「デザインの編集」デザイン・リンクをクリックします。このガイドでは、ホームページから始めます。
テンプレートを選んだら、SeedProdのドラッグ＆ドロップビルダーを使ってレイアウトをカスタマイズできます。準備ができたら、ステップ4に進んで画像を非表示にしてください。
ステップ4.デバイスの可視性でモバイルのウェブサイト画像を隠す
SeedProdの「デバイス表示」設定を使えば、モバイルビューで画像を非表示にするのも簡単です。ワンクリックで画像を個別に、または画像セクション全体を非表示にすることができます。
画像を個別に非表示にするには、非表示にしたい画像を見つけてクリックし、コンテンツ設定を開きます。
次に、'Advanced' タブをクリックし、'Device Visibility' セクションを展開する。
![詳細]タブでデバイスの可視性設定を開く](https://www.seedprod.com/wp-content/uploads/2022/04/advanced-settings-device-visibility.png "advanced-settings-device-visibility - SeedProd")
モバイルで画像を非表示にするには、「モバイルで非表示」の見出しの横にあるトグルをクリックします。
この画像はデスクトップの訪問者にのみ表示され、モバイルでは非表示になります。
同じ手順で、SeedProdで画像行全体を非表示にすることができます。行の設定を開き、'詳細設定'タブの'デバイスの可視性'設定でモバイルの画像行を非表示にするだけです。
下部のツールバーにある「モバイルプレビュー」アイコンをクリックすると、変更をプレビューできます。
グレーアウト」された画像は、モバイルサイトの訪問者には表示されません。
デザインの仕上がりに満足したら、画面右上の「保存」ボタンをクリックします。
サイドバー、シングル投稿、ページなど、その他のテーマテンプレートでモバイルビューの画像を非表示にするには、上記の手順に従ってください。
例えば、モバイルでブログ記事のフィーチャー画像を非表示にしたい場合、Single Postテンプレートを編集し、次のようにFeatured Imageブロックの表示設定を変更することができます：
ステップ5.WordPressウェブサイトを公開する
カスタムテーマをライブにする準備ができたら、SeedProd " Theme Builderに 行き、'Enable SeedProd Theme'トグルを'On'の位置にします。
これで、ウェブサイトをプレビューして変更を確認することができます。この例からわかるように、先ほど選んだ画像はモバイルでは非表示になっています。
方法2：ランディングページのモバイル表示で画像を隠す
この手順は、単体のランディングページでも同様に適用できます。SeedProd » ランディングページでページを作成し、エディタで開いて、「詳細」タブにある「モバイルで非表示」の切り替えを切り替えてください。
方法3：CSSでモバイル上の画像を隠す
注：この方法をお勧めするのは、コーディング言語の扱いに慣れている場合のみです。ウェブサイトにカスタムCSSを追加するには、WordPressに組み込まれているカスタマイザーを使用することができます。
ウェブサイトのオーナーの中には、手作業でサイトをカスタマイズすることを好む人もいると思います。そのため、以下の方法では、カスタムCSSを使ってモバイルで画像を非表示にする方法を紹介します。
まず、画像を含むコンテンツ要素のクラスを見つけます。例えば、ブログ記事の特集画像などです。そして、以下のCSSクラスを使って非表示にすることができます：
@media only screen and (max-width : 320px) {
.your-element-class {
display: none;
}
}
重要： display:none 画像は視覚的には非表示になりますが、モバイルではブラウザが依然として画像をダウンロードしてしまいます。ページの読み込み速度を重視するのであれば、方法1の方が適しています。SeedProdの「Device Visibility」機能を使えば、画像の読み込みを完全に阻止できます。
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で、あなたのビジネスを成長させるために役立つアドバイスやコンテンツを提供していますので、お気軽に会話にご参加ください。
