THOR 画面いっぱい 表示

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

THOR 画面いっぱい 表示

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

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

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

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

操作手順
外観 → カスタマイズ → 追加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){ と、最後の } を削除してください。

 

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

 

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

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

 

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

 

 

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

 

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

 

WordPressデザインレシピ集

WordPressデザインレシピ集

狩野 祐東
2,997円(03/28 18:28時点)
発売日: 2019/08/24
Amazonの情報を掲載しています