デザインタイプで「横幅100%伸縮タイプ」を選択していませんか?
発生事象
店舗様のお選びいただいているデザインテンプレートによって、以下のようにトップページのヘッダーが画面いっぱいに表示されることがあります。
![](https://lab.biiino.com/wp-content/uploads/2022/06/faq_design-width-type_003-700x348.png)
原因について
横幅100%伸縮タイプのデザインを選択しているため
ビーノのデザインテンプレートには「横幅1200px固定タイプ」と「横幅100%伸縮タイプ」の2種類があります。
![](https://lab.biiino.com/wp-content/uploads/2022/06/faq_design-width-type_001.png)
![](https://lab.biiino.com/wp-content/uploads/2022/06/faq_design-width-type_002.png)
「横幅100%伸縮タイプ」のデザインは、ヘッダーの一部およびフッターの横幅が画面の表示サイズに合わせて100%表示されるダイナミックなテンプレートとなります。
ご解消方法
横幅1200px固定タイプのデザインを選択する
1. 「PCトップページを作る」をクリック
![Step 1 screenshot](https://images.tango.us/workflows/5548356c-9956-42ad-aff0-ccb17536aa92/steps/cc470159-dc6d-46b0-910b-2217e980f8ae/67ec66bd-3d39-4e54-b49d-2349a260902d.png?crop=focalpoint&fit=crop&fp-x=0.2461&fp-y=0.3822&fp-z=1.9819&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=285&mark-y=251&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz00NTYmaD00MTEmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D)
2. 「デザインを選ぶ」をクリック
![Step 2 screenshot](https://images.tango.us/workflows/5548356c-9956-42ad-aff0-ccb17536aa92/steps/dd5002aa-74ca-4706-a844-36b52eaec698/080d40ea-b4c3-4e2a-904a-1c48d60e9552.png?crop=focalpoint&fit=crop&fp-x=0.0965&fp-y=0.0979&fp-z=2.0178&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=-3&mark-y=147&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz00NzQmaD0xMDUmZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D)
3. 「横幅1200px固定タイプ」の中からお好みのデザインを選ぶ
![Step 3 screenshot](https://images.tango.us/workflows/5548356c-9956-42ad-aff0-ccb17536aa92/steps/0961781e-32b3-48b0-8b2e-8d40acf37da3/631fdd74-3dcd-4d00-a294-ec6d7bc08101.png?crop=focalpoint&fit=crop&fp-x=0.0929&fp-y=0.1458&fp-z=2.0581&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=0&mark-y=254&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz00NTkmaD05OSZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw)
4. 「メニュートップに戻る」をクリック
![Step 4 screenshot](https://images.tango.us/workflows/5548356c-9956-42ad-aff0-ccb17536aa92/steps/3c3bbcef-294d-4f2e-80e6-d2fffd405bf2/07a93e13-4739-4240-8cd6-f7fa10d069ae.png?crop=focalpoint&fit=crop&fp-x=0.0929&fp-y=0.9309&fp-z=2.1379&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=23&mark-y=820&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz00MzAmaD04NiZmaXQ9Y3JvcCZjb3JuZXItcmFkaXVzPTEw)
5. 「反映する」をクリック
![Step 5 screenshot](https://images.tango.us/workflows/5548356c-9956-42ad-aff0-ccb17536aa92/steps/cc2f3d3f-69ea-4dfc-b7c3-d9907a49d569/748d6002-7b85-4369-815d-63257396109f.png?crop=focalpoint&fit=crop&fp-x=0.1441&fp-y=0.4593&fp-z=2.5386&w=1200&border=2%2CF4F2F7&border-radius=8%2C8%2C8%2C8&border-radius-inner=8%2C8%2C8%2C8&blend-align=bottom&blend-mode=normal&blend-x=0&blend-w=1200&blend64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL21hZGUtd2l0aC10YW5nby13YXRlcm1hcmstdjIucG5n&mark-x=296&mark-y=450&m64=aHR0cHM6Ly9pbWFnZXMudGFuZ28udXMvc3RhdGljL2JsYW5rLnBuZz9tYXNrPWNvcm5lcnMmYm9yZGVyPTYlMkNGRjc0NDImdz0yODYmaD0xMTImZml0PWNyb3AmY29ybmVyLXJhZGl1cz0xMA%3D%3D)
横幅1200px固定タイプでの表示イメージ
横幅1200px固定タイプのデザインをお選びいただきますと、以下イメージ画像のようにブラウザの横幅関係なく、ヘッダーは1200pxのサイズで表示されます。
![](https://lab.biiino.com/wp-content/uploads/2022/06/faq_design-width-type_004-700x312.png)
関連キーワード PCトップページ 拡大 表示サイズ 大きく表示される