スマートフォンの 画面いっぱい に 画像 を表示するカスタマイズ

「画像を画面の端から端まで左右いっぱいに表示したい」そんな願いを叶えるカスタマイズです。

この記事のカスタマイズは、WordPressのテーマ「THE THOR」用に解説しています。しかし、仕組みを理解すれば、他のテーマやホームページ、スマホ画面に限らずPC表示のときにも応用できます。

THE THOR 用 スマホ画面で左右いっぱいに画像を表示するカスタマイズ

追加CSSにコードをコピペすればカスタマイズは完了です。

コピペするコード

/* スマホ画面いっぱいに画像を表示 */
@media only screen and (max-width: 480px){
	.size-full {
		position:relative;
		left:-15px;
		max-width: calc(100% + 30px)!important;
	}
}

上記のコードでは、「フルサイズ」に設定した画像をスマートフォン表示のときに画面いっぱいになるよう調整しています。

THE THOR の余白は片側15pxです。

左右あわせると30pxなので、画像の最大サイズを100%に30px足したサイズにしています。

画面サイズより画像が小さい場合は変化しない（引き伸ばしたりはしない）ので注意。

別のテーマの場合

THE THOR 以外のテーマの場合は、余白のサイズを調べて数値を変更すればコードはそのまま流用できます。

left:-15px の部分も忘れずに変更してくださいね。

特定の要素だけに適用する場合

「フルサイズを指定した画像の全てにCSSが適用されてしまうのは困る」といった場合は、画像に新しくクラス名を設定してください。

.size-full の部分を新しく設定したクラス名に変更すればOK

スマホに限定しない場合

@media only screen and (max-width: 480px){ の部分でスマホのときに適用されるようにしています。（480px以下なら適用）

PC表示のときも適用したい場合は、@media only screen and (max-width: 480px){ と、最後の } を削除してください。

画面いっぱいにしたサンプル

フルサイズを設定した２つの画像です。

PC表示、スマホ表示で見比べてみてください。

スマホの画面より小さい画像

スマホの画面より大きい画像
画面サイズに合わせて縮小されています

※製作時はプレビューで確認していください。エディタ上では再現されません。
※カスタマイズは自己責任でお願いします。

[wpap service=”with” type=”detail” id=”B07X6SPL26″ title=”WordPressデザインレシピ集”]