こんにちは、MakeShopの近藤です。
いつもMakeShopをご利用いただきありがとうございます。
今回はよく見かける幅の広いサイトをMakeShopで実現するための方法をご紹介します!
こんなお悩みありませんか?
・テンプレートだと横幅が狭いので、幅を広げたい
・tableだから横幅拡げられないんじゃないの?
・ショップページの幅をワイドにしたい
[難易度 ★★☆ ]
実はかんたん!
独自デザインでショップページの横幅を広くする方法!
※プレミアムショッププランのみ
設定方法
(1)ショップ全体の横幅を指定するCSSを入れる!
【独自デザイン(PC)】> 【トップページ編集】 > 共通CSS管理
下記のスタイル指定を追記してください。
1 2 3 |
table#makebanner { width:960px !important; } |
・幅のサイズは必ず固定値(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> |
(3)CSSを指定する!
【独自デザイン(PC)】> 【トップページ編集】 > 共通CSS管理
下記のスタイル指定を追記してください。
1 2 3 4 5 6 7 |
#leftContents{ width:220px; } #mainContents { width: 736px; } |
・幅のサイズは必ず固定値(pxなど)で指定してください!
・%指定(リキッドレイアウト)は指定ができません。
(4)幅がひろがりました!
ショップをみるで確認してみましょう!
いかがでしたでしょうか。
ぜひお試しください!それではまた!