「画像を画面の端から端まで左右いっぱいに表示したい」そんな願いを叶えるカスタマイズです。
この記事のカスタマイズは、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){ と、最後の } を削除してください。
画面いっぱいにしたサンプル
フルサイズを設定した２つの画像です。
PC表示、スマホ表示で見比べてみてください。
スマホの画面より小さい画像
スマホの画面より大きい画像
画面サイズに合わせて縮小されています
※製作時はプレビューで確認していください。エディタ上では再現されません。
※カスタマイズは自己責任でお願いします。
