背景画像の設定方法

PC・タブレットとスマートフォンで別々の画像が設定可能

PC・タブレット、スマートフォンで別々の背景画像を設定できます。

編集画面にて「背景設定マーク」ボタンをクリックすると、現在のPC・タブレット表示用の背景画像とスマートフォン表示用の背景画像がそれぞれ表示されます。
___________-_2023-05-22T142337.770.png
スクリーンショット 2024-12-20 11.23.40.png
変更したい場合は、編集画面にて「背景設定」マークをクリック。
___________-_2023-05-22T142337.770.png
左側のメニュー一覧から「マイライブラリ」にアクセスすることで、選択した画面サイズの画像を変更できます。
b.png

背景画像の位置の調整方法

「背景位置マーク」をクリックすると背景画像の拡大縮小や位置を変更できます。
__________2023-01-25_16.57.42.png
詳しい方法はこちら

PC・タブレットとスマートフォンで同じ画像を設定する場合

ペライチのページは、閲覧するデバイス(PC、スマートフォンなど)によって自動で表示が最適化される「レスポンシブデザイン」を採用しています。
通常、「トップメイン」や「背景画像あり」ブロックで使用している背景画像は、元画像の縦横比を保ったまま、ブロック全体を埋める大きさに拡大、または縮小されます。
(ブロックの大きさは、中身のテキストの量や画面サイズによって変化します。)

そのため、使用する画像や画面サイズによって、元画像の上下や左右が切れて表示されてしまいます。
584a7ec6-da98-4386-8ff9-5cfd0a00003f.jpeg

背景に適した画像

背景に使用する画像は、画像の一部が切れても問題のない画像をお使いになることをおすすめします。

例)

  • 風景画像
  • イメージ画像
  • ぼかした画像
    584a7f96-23f4-4346-9e4e-1c210a00005e.jpeg

背景に適さない画像

全体を表示させる必要がある画像は、背景画像としてはおすすめできません。

例)

  • 文字が入ってる画像
  • 画像が切れると意味が伝わらない画像584a7f52-aff4-403f-b3ed-1a500a00005c.jpeg 

画像全体を表示させたい場合

閲覧する画面に関わらず画像全体を表示させたい場合は、
「画像」、「画像(横幅フルサイズ)」ブロックをご利用ください。
(元の画像の上下左右が見切れず、全体がそのまま表示されます。)
詳細はこちら