バナーのご設定状況やインターネット通信の影響が考えられます。
商品ページやカテゴリページにて以下の画像のように、ヘッダーとメインエリアの間に大きな空白ができてしまうことがございます。
原因：どうして空白ができるのか
考えられる原因として2つあります。
- 表示期間指定中且つ表示期間外のバナー部分が空白になる
- インターネット通信などの影響により、ヘッダー部分の高さが正しく取得できていない
- 「headタグへの自由追記箇所」へHTMLではなく、テキストを入力されている場合
1. 表示期間指定中且つ表示期間外のバナー部分が空白になる
表示期間指定のバナーを固定タイプで表示している場合
表示期間が指定されているバナーを固定（スライド型以外）の表示タイプで設定している場合、表示期間を過ぎますとバナーは非表示となり、高さのみ取得されますので、その部分が空白となってしまいます。
ご設定された表示期間以外は、右側の完成イメージ画面上では該当するバナーが透けるように表示されます。
この状態で反映を行うため、商品ページ・カテゴリページでは上記バナーのサイズ分、余白が空いてしまうことが確認されています。
楽天市場の仕様により、表示期間外バナーの高さを自動計算することが不可
大変恐縮ながら、こちらは現在の楽天市場の仕様上、商品ページ・カテゴリページではプログラム（JavaScriptなど）が使用できないことから、どうしても表示期間外バナー分の高さを自動で縮めることができず、余白が空いてしまいます。
なぜトップページでは正しく見えるのか？
ビーノで作成したトップページは、商品ページやカテゴリページと異なり、楽天GOLDという別のスペースに保存しています。
楽天GOLD上では自由にプログラムを使用できますことから、ビーノシステム側にて無駄な余白を表示しない仕組みの設定が可能となっています。
2. インターネット通信などの影響により、ヘッダー部分の高さが正しく取得できていない
インターネットの通信環境や回線速度による影響
PCトップページ作成時にシステム側にて、インターネット通信環境などの影響によりヘッダー部分の高さが正しく取得できていない可能性があります。
ビーノでは、PCトップページ反映時に、ヘッダーの高さを自動で取得し設定していますが、インターネットの通信環境や回線速度によって正しい高さを計算出来ないことが確認されています。
⚠横幅100％タイプのテンプレートをご利用の場合
「横幅100％タイプ」のテンプレートでは、「1200px固定タイプ」のテンプレートに比べて、より安定したインターネット通信の速度が求められる傾向にあります。
そのため、空白が気になります場合は、1200px固定タイプのテンプレートへご変更をお試しくださいませ。
3. 「headタグへの自由追記箇所」へHTMLではなく、テキストを入力されている場合
テキスト分もヘッダーの高さとして計算され、空白が表示される
トップページ左メニューの「SEO／外部読み込みの設定」にございます、【headタグへの自由追記箇所】へ、テキストをご入力されております場合、そのテキスト分もヘッダーの高さとして計算され、空白として表示されるようでございます。
※ヘッダーの高さにつきましては、PCトップページ反映時に、自動で取得し設定しております。
対処方法
原因1の場合：バナーの表示形式をスライド表示のタイプに変更する
バナーの表示期間を指定されます場合は、バナーの表示タイプをスライド表示のものに設定していただくことで、空白になることを避けることができます。
ご注意
その際、必ず一緒に「表示期間未設定のバナー」も追加をお願いいたします。
「表示期間未設定のバナー」を一緒にご設定いただきますことで、実際の商品ページやカテゴリページでは、表示期間未設定のバナーのみ表示されているかと思います。
ぜひお試しください。
原因2の場合：再度、PCトップページの反映を行う
ネットワーク環境の一時的な問題やPC環境の動作不安定等により、ヘッダー部分の高さが正しく取得できていない可能性が考えられますため、お手数ではございますが、再度、PCトップページの反映をお試しいただけますと幸いです。
PCトップページ反映手順
- ビーノ管理画面へログイン
- PCトップページを作る をクリック
- 【反映する】をクリック
原因3の場合：<headタグへの自由追記箇所>のテキストを削除する
お手数ではございますが、headタグへの自由追記箇所にご設定されております内容を削除いただきますことで、空白が表示されなくなりますためお試しくださいませ。
headタグへの自由追記箇所について
HTML／CSSでのご入力が必要
「headタグへの自由追記」につきましては、店舗様にてmetaタグの追記や外部CSSファイルの読み込みを行われたい場合のご設定箇所となっております。
そのため、テキストでのご入力ではなく、HTMLタグ等のご入力が必要となりますことご注意いただけますと幸いです。
詳細につきましては以下よくある質問ページをご参考くださいませ。
metaタグ、OGPタグ、外部CSSの読み込み等を追記したい！
対処方法をお試し後も改善されない場合
ブラウザのキャッシュクリアをお試しください
ブラウザ側のキャッシュの影響によりページが適切に更新されていない可能性がございます。
そのため、お手数ではございますが、Webブラウザのキャッシュクリアもしくはスーパーリロードの実行をお試しいただけますと幸いです。
キャッシュクリアの手順につきましては以下よくある質問ページへ掲載しておりますので、ご確認くださいませ。
https://lab.biiino.com/faq/item-page-header-update/
最後に
もし、上記に記載の方法をお試しいただきましても改善されません場合には、お手数ではございますが、こちらよりカスタマーサポートまでお問い合わせいただけますと幸いです。
関連キーワード： 商品ページ表示 カテゴリーページ表示 余白 スペース 白いスペース
