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

Akira

福岡在住ウェブデザイナー。Web サイト制作に役立つ情報を紹介しています。AMP が大好き。

FacebookTwitter で記事の更新をお知らせしています。

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

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

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

けれど、ほんの少しのカスタマイズで画面幅いっぱいに画像を表示できます。そのカスタマイズの紹介です。

完成図

カスタマイズ後の完成図は、以下のとおりです。

スマホで見た際に、本文中の画像のみが画面幅いっぱいに広がります(テキストの左右には余白があります)。

行うことは、画像に CSS のネガティブマージンを指定するだけです。

デフォルトで画像が画面幅いっぱいに広がらない理由は、#main に対し以下の CSS が指定されているため。

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

この指定で、メインカラムの左右に 10px の余白が生まれます。

本文の画像を画面幅いっぱいに表示するには、画像だけ 10px の左右余白を無視すればいい。そこで使うのがネガティブマージンです。

ただ、Gutenberg で作成していない記事は、HTML の変更も必要です。

Gutenberg で作成する記事は、CSS の指定だけで画像が画面幅いっぱいに広がります。指定する CSS は、CSS を指定をご参照ください。

p タグに class 名を付ける

WordPress エディター「Gutenberg」を使っていない時は、WordPress が自動的に本文中の画像を <p> タグで囲みます。また、テキストも同様に <p> タグで囲みます。

画像のみ左右の余白を無視するには、画像の <p> タグとそれ以外の <p> タグを区別する必要があります。

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

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

Gutenberg で記事を作成する際は、特段何もする必要はありません。通常どおり「画像ブロック」で画像を追加します。

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

jQuery で自動的に class 名を付ける

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

ただし、AMP ページでは class が付かないため、注意が必要です(AMP ページで画像が画面幅いっぱいに広がらない)。

自動的に付ける場合は、子テーマの javascript.js に下記コードを追加します。

jQuery(function($) {
  /** 画像にリンク先を設定している時 */
  $('#the-content > p > a > img').parent().parent().addClass('img-in-the-content');
  /** 画像にリンク先を設定していない時 */
  $('#the-content > p > img').parent().addClass('img-in-the-content');
});

画像に「リンク先」を設定する場合も設定しない場合も、画像を囲む <p> タグの class に img-in-the-content が付きます。

CSS を指定

あとは CSS を指定すれば終わりです。

子テーマの style.css や amp.css に、下記の CSS を追加します。この CSS は、Gutenberg の「画像ブロック」にも対応しています。

@media screen and (max-width: 480px) {
  /* 画像を囲む p タグ用 */
  .img-in-the-content,
  /* Gutenberg の画像ブロック用 */
  .entry-content > .wp-block-image {
    margin: 0 calc((100% - 100vw)/2);
  }
}

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

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

@media screen and (max-width: 480px) {
  /* アイキャッチ用 */
  .eye-catch,
  /* 画像を囲む p タグ用 */
  .img-in-the-content,
  /* Gutenberg の画像ブロック用 */
  .entry-content > .wp-block-image {
    margin: 0 calc((100% - 100vw)/2);
  }
}

送信に失敗しました

ボットと判定された可能性があります。

大変お手数をおかけしますが、以下の内容をご確認の上、再度のコメントの送信をお願い申し上げます。