BASEのデザイン崩れを自分で直すには

BASEのデザインを直したいのに、管理画面で触っても思った場所が変わらない、スマホで見ると余白や画像の切れ方が違う、という状態だと思います。BASEはテンプレートという型を選んでショップを作る仕組みなので、自由に動かせる部分と動かせない部分があります。また、パソコンでは整って見えてもスマホでは別の幅で表示されるため、見え方が変わることがあります。まず崩れている場所を分けて、画像、テンプレート設定、追加した部品を順に確認します。

考えられる原因

1. テンプレートで動かせる範囲が決まっています

   BASEは選んだテンプレートの形に沿って表示されるため、文字や画像を完全に好きな位置へ動かせないことがあります。設定で変えられる部分と変えにくい部分を分けて見ます。

2. 画像の縦横比が合っていない可能性があります

   横長の場所に縦長写真を入れると余白が出たり、正方形の枠に横長画像を入れると端が切れたりすることがあります。画像そのものの比率をそろえると改善する場合があります。

3. スマホとパソコンで表示幅が違います

   パソコンで横並びに見えるものが、スマホでは縦に並んだり、文字の折り返しが増えたりします。片方だけで確認すると、もう片方の崩れに気づきにくいことがあります。

4. 追加したコードや外部パーツが影響することがあります

   計測タグ、バナー、外部サービスの埋め込みなどを追加している場合、テンプレートの表示に影響することがあります。最近追加したものから順に確認します。

ご自身で確認できること

1. 崩れている場所を具体的に分ける

   トップページ、商品一覧、商品詳細、カート付近など、どこで崩れているかを分けます。スマホだけか、パソコンでも起きるかをスクリーンショットで残します。

2. 変更前の状態を控える

   デザイン設定を触る前に、現在の色、画像、バナー、追加コードの内容を控えます。スクリーンショットやテキストのコピーを残すと、戻したいときに確認しやすくなります。

3. 画像のサイズと縦横比を確認する

   余白や切れが出る画像は、テンプレートの枠に対して縦長すぎる、横長すぎる可能性があります。同じ場所に使う画像は比率をそろえて作り直すと安定しやすくなります。

4. BASEのデザイン設定で直せる範囲を確認する

   管理画面のデザインに関する設定から、色、文字、ロゴ、バナー、表示項目を確認します。テンプレートによって項目が違うため、表示されている範囲で調整します。

5. スマホとパソコンの両方で確認する

   編集画面の見え方だけでなく、実際のショップをスマホとパソコンで開きます。文字の折り返し、画像の切れ、ボタンの押しやすさをそれぞれ確認します。

6. 最近追加したものを一つずつ確認する

   崩れが急に出た場合は、最近入れたバナー、外部パーツ、計測タグなどを確認します。消す前に内容を控え、影響を一つずつ見ます。

直らない場合は、代行します

すぐウェブでは、BASEの崩れた箇所の確認、画像比率の調整、テンプレート内で直せる範囲の修正を行います。テンプレート自体の制限は事前に説明します。

表示の料金は作業1回分です。月額や継続のご契約はありません。納期はご依頼から24時間以内の対応を目指しています。営業のお電話は行っていません。

よくあるご質問

関連する症状

• BASEで商品登録・商品変更を進める方法
• Wixでレイアウトが崩れる・スマホ崩れの直し方
• ホームページの画像を差し替える方法（自分でやる場合と頼む場合）