こんにちは、makeshopのあらいです。
いつもmakeshopをご利用いただきありがとうございます。

今回はフッターの幅を100％にする方法をご紹介します！
※カスタマイズテンプレートをご利用の方は既に幅が100％になっています。
おもにカスタマイズテンプレートをご利用していない方向けの記事になっています。

こんなお悩みありませんか？

・フッターを画面の幅いっぱいにしたい
・フッター幅をワイドにしたい

[難易度 ★★☆ ]
フッターの幅を100％にする方法！
※プレミアムショッププランのみ

設定方法

（1）下段メニュー管理内でtableを強制的に閉じる！

旧管理画面：【ショップデザイン（PC）】>【トップページ編集】> 【下段メニュー管理】
新管理画面：メインメニュー / ショップデザイン / テンプレート選択・編集
　　　　　　【ショップデザイン（PC）】>【トップページ編集】> 【下段メニュー管理】

下段メニュー管理のエディターエリアの一番上に、下記のように記載してください。

これでtableが閉じられました！

makeshopはベースにテーブルレイアウトがあり、左側メニューとメインコンテンツの入るテーブルセルは、下段メニューと続いた構成になっているので、テーブルを強制的に閉じます。

（2）フッターをdivで囲む！

旧管理画面：【ショップデザイン（PC）】>【トップページ編集】> 【下段メニュー管理】
新管理画面：メインメニュー / ショップデザイン / テンプレート選択・編集
　　　　　　【ショップデザイン（PC）】>【トップページ編集】> 【下段メニュー管理】

（1）で入力した</td></tr></table>の下に
「フッター全体を囲むdiv」と
「フッターを表示させる部分を囲むdiv」をご用意ください！

id="xxx"およびclass="yyy"の「xxx」「yyy」部分は自由に変更できます。
変更する場合は、共通CSS管理の#xxxおよび.yyyも合わせて変更する必要があり
ますのでご注意ください！

（3）CSSを指定する！

旧管理画面：【ショップデザイン（PC）】>【トップページ編集】> 【共通CSS管理】
新管理画面：メインメニュー / ショップデザイン / テンプレート選択・編集
　　　　　　【ショップデザイン（PC）】>【トップページ編集】> 【共通CSS管理】

下記のスタイル指定を追記してください。

・ フッター全体を囲むdiv幅は100%指定しましょう！
・ フッターの中身を表示させる部分を囲むdivの幅は、必ず固定値(pxなど)で指定してください！

（4）フッター100％完了！

ショップをみるで確認してみましょう！

いかがでしたでしょうか。
ぜひお試しください！それではまた！