Simplicity で画像をスマホの画面幅いっぱいに表示する方法

画像をスマホの画面幅いっぱいに表示

Akira

福岡在住ウェブデザイナー。Web サイト制作に役立つ情報を「見やすさ」と「使いやすさ」にこだわり紹介しています。

Instagram アプリでは、画像が画面幅いっぱいに表示されます。

そのためかスマホで見た時に、画像を画面幅いっぱいに表示したいと希望されるサイト運営者が増えている気がします。

しかし、 Simplicity のデフォルトでは、スマホで見た時に本文の画像が画面幅いっぱいに表示されません。

理由は、 #main に対し以下の CSS が指定されているため。

@media screen and (max-width: 639px) {
  div#main {
    padding: 10px;
  }
}

この指定で、画像の左右に 10px の余白が生まれます。

本文の画像を画面幅いっぱいに表示するには、画像だけ 10px の左右余白を無視する必要があります。

ネガティブマージンを用いてできるため、その方法のご紹介です。

カスタマイズ後は、画像だけが画面幅いっぱいに広がります。

ネガティブマージンを指定し画像を画面幅いっぱいに表示した例

P タグにクラス名を付け画像とテキストを区別する

WordPress は、インラインタグやテキストなどに対し <p> タグを自動で挿入します。

これは画像も例外ではありません。

画像のみ左右の余白を無視するためには、テキストの <p> タグと画像の <p> タグを区別する必要があります。

そこで画像を挿入する際に、 class 属性でクラス名を指定した <p> タグで画像を囲みます。

<p class="img-in-the-content">ここにメディアを追加</p>

img-in-the-content は、任意のクラス名で構いません。

jQuery で自動的に P タグにクラス名を付ける

手動でクラス名を付けるのが面倒な場合には、 jQuery で自動的に付けることもできます。

ただし、AMP ページではクラス名が付かないため、注意が必要です。

子テーマの javascript.js に以下のどちらかをコピペします。

画像にリンク先を設定する場合

jQuery( function($) {
    $('#the-content>p>a>img').parent().parent().addClass('img-in-the-content');
});

画像にリンク先を設定しない場合

jQuery( function($) {
    $('#the-content>p>img').parent().addClass('img-in-the-content');
});

CSS でネガティブマージンを指定

あとは <p class="img-in-the-content">にネガティブマージンを指定します。

下記の CSS を子テーマの style.css や amp.css に追加します。

@media screen and (max-width: 480px) {
  .img-in-the-content {
    margin: 0 -10px;
  }
}

これで画面幅 480px 以下の時に、画像が画面幅いっぱいに表示されます。

アイキャッチ画像も画面幅いっぱいに表示したい場合には、下記の CSS にします。

@media screen and (max-width: 480px) {
  .eye-catch,
  .img-in-the-content {
    margin: 0 -10px;
  }
}