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

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

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

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

ということで、今回は「拡大画像をスマホの幅に合わせる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実装後のスマホのSWELLの画像拡大

まとめ

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

非常に細かい部分ではありましたが、モバイルユーザーの多いサイトはこういう部分にもこだわっていきましょう。

その他のSWELLの関連記事

目次
目次
閉じる