makeshopサポート │ ショップページの横幅を広げる方法

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

今回はよく見かける幅の広いサイトをmakeshopで実現するための方法をご紹介します！

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

・テンプレートだと横幅が狭いので、幅を広げたい
・tableだから横幅拡げられないんじゃないの？
・ショップページの幅をワイドにしたい

ショップデザイン / テンプレート選択・編集 / トップページ編集 / 共通CSS管理

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

table#makebanner {
    width:960px !important;
}

・幅のサイズは任意です！好きなサイズを指定しましょう
・幅のサイズは必ず固定値(pxなど)で指定してください！
・%指定（リキッドレイアウト）は指定ができません。

ショップデザイン / テンプレート選択・編集 / トップページ編集 / 左側メニュー管理

メイン部分のソース全体を、idかclassを付けたdivで囲みます。

<div id="leftContents">
  ソース
</div>

ショップデザイン / テンプレート選択・編集 / トップページ編集 / 中央画面管理

メイン部分のソース全体を、idかclassを付けたdivで囲みます。

<div id="mainContents">
  ソース
</div>

</div>の前に<!– #M_leftContents end –>のようなコメントを付けておくと、ソース管理がしやすいのでオススメです！

ショップデザイン / テンプレート選択・編集 / トップページ編集 / 共通CSS管理

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

#leftContents{
    width:220px;
}

#mainContents {
    width: 736px;
}

・幅のサイズは任意です！好きなサイズを指定しましょう。
・幅のサイズは必ず固定値(pxなど)で指定してください！
・%指定（リキッドレイアウト）は指定ができません。

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

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

ショップページの幅を広くしたい【ベーシックモード】