こんにちは、makeshopのあらいです。
いつもmakeshopをご利用いただきありがとうございます。
今回はフッターの幅を100%にする方法をご紹介します!
※カスタマイズテンプレートをご利用の方は既に幅が100%になっています。
おもにカスタマイズテンプレートをご利用していない方向けの記事になっています。
こんなお悩みありませんか?
・フッターを画面の幅いっぱいにしたい
・フッター幅をワイドにしたい
[難易度 ★★☆ ]
フッターの幅を100%にする方法!
※プレミアムショッププランのみ
設定方法
(1)下段メニュー管理内でtableを強制的に閉じる!
【独自デザイン(PC)】>【トップページ編集】> 下段メニュー管理
下段メニュー管理のエディターエリアの一番上に、下記のように記載してください。
1 |
</td></tr></table> |
これでtableが閉じられました!
(2)フッターをdivで囲む!
【独自デザイン(PC)】>【トップページ編集】> 下段メニュー管理
(1)で入力した</td></tr></table>の下に
「フッター全体を囲むdiv」と
「フッターを表示させる部分を囲むdiv」をご用意ください!
1 2 3 4 5 |
<div id="footerWrap"> <div id="footer"> フッターに表示させる部分 </div> </div> |
変更する場合は、共通CSS管理の#xxxおよび.yyyも合わせて変更する必要があり
ますのでご注意ください!
(3)CSSを指定する!
【独自デザイン(PC)】> 【トップページ編集】 > 共通CSS管理
下記のスタイル指定を追記してください。
1 2 3 4 5 6 7 |
#footerWrap{ width:100%; } #footer{ width:960px; /* フッター幅を指定*/ margin:0 auto; } |
・ フッターの中身を表示させる部分を囲むdivの幅は、必ず固定値(pxなど)で指定してください!
(4)フッター100%完了!
ショップをみるで確認してみましょう!
いかがでしたでしょうか。
ぜひお試しください!それではまた!