【SWELL】拡大表示された画像(ポップアップ)をスマホ幅に合わせるCSS

アイキャッチ

今最もホットなWordPressテーマ「SWELL」には、”画像の拡大表示“の機能が標準装備されています。

この機能のおかげで、プラグインを入れずに画像のポップアップも実現するわけですが、一つだけ不満点があります。それが「スマホで横長の画像を拡大すると画面からはみ出てしまう」という点です。

SWELLの画像拡大機能をスマホで利用した場合

私のようにギャラリーやカラムブロックをよく使う人は、スマホサイズのでのポップアップは必須ですよね。(横並び・2列とかにすると小さいですし…)

とはいえ、プラグインを入れるのは嫌なのでCSSで画像幅を合わせるようにしました。
実装後はこんな感じ↓

CSSを適用後の画像のポップアップ
画面内に全部おさまっている!

ということで、上記の画像のようにする「拡大画像をスマホの幅に合わせるCSS」を解説していきます。
貼り付けるだけの簡単作業なので、サクッといっちゃいましょう!

チータツ
チータツです。主にアダルト系のサイトを運営しています。
ブログ仲間の方はぜひツイッターで仲良くしましょう!

拡大(ポップアップ)画像をスマホの幅に合わせるCSS

それでは早速ですが、画像幅を変えるCSSがこちらです。
そのままコピー&ペーストで貼り付けてください。(改行はお好みで)

@media only screen and (max-width:480px) {.lum-lightbox-inner img{width:100%;}}

(CSSの貼り付け場所は以下のどちらか)
・外観 > カスタマイズ > 追加CSS
・外観 > テーマエディター > style-user.css

CSSについて説明すると、「480px以下の幅のデバイス(スマホ)の場合は、拡大画像の幅をデバイス幅100%にする」という処理です。widthの値を小さくすれば、画面端の余白を増やしてゆとりを持たせることも可能ですよ。

CSSを貼り付けたら、スマホで挙動を確認しましょう。
実際にスマホで画像を拡大してみて、画面内に収まっていれば成功です。

CSSを適用後の画像のポップアップ


まとめ

ということですごく簡潔にですが、拡大画像の幅を変えるCSSを紹介しました。

私も特にCSSに明るいわけではなく、手探りでデベロッパーツールを使って作っているだけなので、これが一番きれいな形か分からないので、適切なコードがあればぜひ教えてください(笑)

それではまた!