こんにちは、MakeShopの近藤です。
いつもMakeShopをご利用いただきありがとうございます。
今回はよく見かける幅の広いサイトをMakeShopで実現するための方法をご紹介します！
こんなお悩みありませんか？
・テンプレートだと横幅が狭いので、幅を広げたい
・tableだから横幅拡げられないんじゃないの？
・ショップページの幅をワイドにしたい
[難易度 ★★☆ ]
実はかんたん！
独自デザインでショップページの横幅を広くする方法！
※プレミアムショッププランのみ
設定方法
（1）ショップ全体の横幅を指定するCSSを入れる！
【独自デザイン（PC）】> 【トップページ編集】 > 共通CSS管理
下記のスタイル指定を追記してください。
|
1 2 3 |
table#makebanner { width:960px !important; } |
・幅のサイズは任意です！好きなサイズを指定しましょう
・幅のサイズは必ず固定値(pxなど)で指定してください！
・%指定（リキッドレイアウト）は指定ができません。
・幅のサイズは必ず固定値(pxなど)で指定してください！
・%指定（リキッドレイアウト）は指定ができません。
（2）左側メニュー、および中央画面をdivで囲む！
【独自デザイン（PC）】> 【トップページ編集】 > 左側メニュー管理
メイン部分のソース全体を、idかclassを付けたdivで囲みます。
|
1 2 3 |
<div id="leftContents"> ソース </div> |
【独自デザイン（PC）】> 【トップページ編集】 > 中央画面管理
メイン部分のソース全体を、idかclassを付けたdivで囲みます。
|
1 2 3 |
<div id="mainContents"> ソース </div> |
</div>の前に<!– #M_leftContents end –>のようなコメントを付けておくと、ソース管理がしやすいのでオススメです！
（3）CSSを指定する！
【独自デザイン（PC）】> 【トップページ編集】 > 共通CSS管理
下記のスタイル指定を追記してください。
|
1 2 3 4 5 6 7 |
#leftContents{ width:220px; } #mainContents { width: 736px; } |
・幅のサイズは任意です！好きなサイズを指定しましょう。
・幅のサイズは必ず固定値(pxなど)で指定してください！
・%指定（リキッドレイアウト）は指定ができません。
・幅のサイズは必ず固定値(pxなど)で指定してください！
・%指定（リキッドレイアウト）は指定ができません。
（4）幅がひろがりました！
ショップをみるで確認してみましょう！
いかがでしたでしょうか。
ぜひお試しください！それではまた！
