ヘッダー下に空白が表示されます(PC商品ページ、カテゴリーページ)

バナーのご設定状況やインターネット通信の影響が考えられます。

商品ページやカテゴリページにて以下の画像のように、ヘッダーとメインエリアの間に大きな空白ができてしまうことがございます。

原因:どうして空白ができるのか

考えられる原因として2つあります。

  • 表示期間指定中且つ表示期間外のバナー部分が空白になる
  • インターネット通信などの影響により、ヘッダー部分の高さが正しく取得できていない

1. 表示期間指定中且つ表示期間外のバナー部分が空白になる

表示期間指定のバナーを固定タイプで表示している場合

表示期間が指定されているバナーを固定(スライド型以外)の表示タイプで設定している場合、表示期間を過ぎますとバナーは非表示となり、高さのみ取得されますので、その部分が空白となってしまいます。

ご設定された表示期間以外は、右側の完成イメージ画面上では該当するバナーが透けるように表示されます。

この状態で反映を行うため、商品ページ・カテゴリページでは上記バナーのサイズ分、余白が空いてしまうことが確認されています。

楽天市場の仕様により、表示期間外バナーの高さを自動計算することが不可

大変恐縮ながら、こちらは現在の楽天市場の仕様上、商品ページ・カテゴリページではプログラム(JavaScriptなど)が使用できないことから、どうしても表示期間外バナー分の高さを自動で縮めることができず、余白が空いてしまいます。

なぜトップページでは正しく見えるのか?

ビーノで作成したトップページは、商品ページやカテゴリページと異なり、楽天GOLDという別のスペースに保存しています。

楽天GOLD上では自由にプログラムを使用できますことから、ビーノシステム側にて無駄な余白を表示しない仕組みの設定が可能となっています。

2. インターネット通信などの影響により、ヘッダー部分の高さが正しく取得できていない

インターネットの通信環境や回線速度による影響

PCトップページ作成時にシステム側にて、インターネット通信環境などの影響によりヘッダー部分の高さが正しく取得できていない可能性があります。

ビーノでは、PCトップページ反映時に、ヘッダーの高さを自動で取得し設定していますが、インターネットの通信環境や回線速度によって正しい高さを計算出来ないことが確認されています。

横幅100%タイプのテンプレートをご利用の場合

「横幅100%タイプ」のテンプレートでは、「1200px固定タイプ」のテンプレートに比べて、より安定したインターネット通信の速度が求められる傾向にあります。

そのため、空白が気になります場合は、1200px固定タイプのテンプレートへご変更をお試しくださいませ。

対処方法

原因1の場合:バナーの表示形式をスライド表示のタイプに変更する

バナーの表示期間を指定されます場合は、バナーの表示タイプをスライド表示のものに設定していただくことで、空白になることを避けることができます。

ご注意

その際、必ず一緒に「表示期間未設定のバナー」も追加をお願いいたします。

表示期間未設定のバナー」を一緒にご設定いただきますことで、実際の商品ページやカテゴリページでは、表示期間未設定のバナーのみ表示されているかと思います。
ぜひお試しください。

原因2の場合:再度、PCトップページの反映を行う

ネットワーク環境の一時的な問題やPC環境の動作不安定等により、ヘッダー部分の高さが正しく取得できていない可能性が考えられますため、お手数ではございますが、再度、PCトップページの反映をお試しいただけますと幸いです。

PCトップページ反映手順

  1. ビーノ管理画面へログイン
  2. PCトップページを作る をクリック
  3. 【反映する】をクリック

最後に

もし、上記に記載の方法をお試しいただきましても改善されません場合には、お手数ではございますが、こちらよりカスタマーサポートまでお問い合わせいただけますと幸いです。

知りたかった点は解決しましたか?

関連しそうなFAQなど

ビーノとSUMAOU!の違い 次の開発予定 動画で学ぶビーノ 導入事例