FAQ ログイン
 

FAQ > 「パーツ」のご利用について > 

Q : 「ヘッダパーツ」 -「サイト名と背景画像(背景色)」の画像の取扱いについて-

「サイト名と背景画像(背景色)」では、登録した画像と基本設定で設定した「ホームページタイトル (店舗名、会社名、他)」を組み合わせて表示する事ができます。

画像を利用する場合、「高さ」の設定を選択する事で画像の表示パターンを切り替えることができます。
e-shops crayon (クレヨン)

■1.高さ「Auto」を選択した場合
画像の縦横比を保持したまま端末の表示幅に合わせて高さを調整し常に画像全体を表示させる事ができます。
e-shops crayon (クレヨン)
画像の縦横比を保持するので、端末に応じて画像全体が表示されるよう自動で縮小が行われます。

【例】サンプルヘッダ画像(W750 × H150)を登録し高さ「auto」を選択した場合
e-shops crayon (クレヨン)

■PCなどでの表示
表示幅が広い場合などでも画像の縦横比を保持したまま拡大表示されます。
e-shops crayon (クレヨン)

■スマートフォンでの表示
表示幅が狭いスマートフォンでも画像の縦横比を保持したまま縮小表示されます。
e-shops crayon (クレヨン)


2.高さ「S・M・L」を選択した場合
設定された「高さ」を基準に、登録された画像の上端から選択した「高さ」応じた部分のみを切り出して表示します。
e-shops crayon (クレヨン)
なお、表示にあたっては画像の縦横比を保持したうえで、端末に応じて画像を表示しますが、高さの縮小比率の最低値は設定された「高さ」が最小サイズとなります。

【例】例:サンプルヘッダ画像(W750 × H150)を登録し高さ「L(H:100px)」を選択した場合
e-shops crayon (クレヨン)

■表示状態①(「W」は端末の表示幅、100pxは選択した「高さ:L」のサイズを示します。)
画像の上端から指定の高さ(サンプルでは100px)部分を切り出して表示されます。
e-shops crayon (クレヨン)

■表示状態②(「W」は端末の表示幅、100pxは選択した「高さ:L」のサイズを示します。)
端末に合わせて縮小された画像のサイズが実際の端末幅「W」、高さ「100px」と同じとになった場合には画像すべてが表示されます。
e-shops crayon (クレヨン)

■表示状態③(「W」は端末の表示幅、100pxは選択した「高さ:L」のサイズを示します。)
縮小される画像の「高さ」は、選択された高さ(ここではL:100px)を下限として処理がされます。
サンプル画像ですと縮小にあたっては縦横比を保持しますので、原寸[ W750px × H150px ]の画像では[ W500px × H100px ]の縮小の下限となります。
なお、表示される端末の幅は縮小下限で決定する画像幅よりも小さいサイズとなる事もありますので、そのような場合には「表示状態③」のように一部が表示されない状況となります。
e-shops crayon (クレヨン)

その他の質問