こんにちは、makeshopの近藤です。
いつもmakeshopをご利用いただきありがとうございます。
今回は、ショップの全ページを3カラムにする方法をご紹介いたします！
トップページだけを3カラムにしたい方はこちら！
参考：ショップページを3カラムにしたい（トップページのみ編）
こんなお悩みありませんか？
・ショップページに右メニューを追加したい
・3段構成にしたい
[難易度 ★★★ ]
ショップページを3カラムにする方法！
※プレミアムショッププランのみ
設定方法
（1）左側メニュー管理内でtableを強制的に閉じます
【ショップデザイン（PC）】> 【トップページ編集】 > 左側メニュー管理
一番上に、下記のように記載してください。
|
1 |
</td></tr></table> |
これでtableが閉じられました！
3カラムを実現させるためにはtableの構造が邪魔になってしまいます。
強制的に閉じてしまいましょう。
（2）閉じたtableの代わりにdivで囲います
【ショップデザイン（PC）】> 【トップページ編集】 > 左側メニュー管理
先程のものの下に、下記のように記載してください。
|
1 2 3 |
<div id="rightMenu">右メニュー用のソース</div> <div id="leftMenu">左メニュー用のソース</div> <div id="mainContents"> |
メインコンテンツ部分（真ん中に来る予定の部分）の開始タグを必ず記述してください。
※開始タグをこの位置に書かないと【独自ページ入力】で作成した画面が崩れてしまいます。
（3）CSSを指定します
【ショップデザイン（PC）】> 【トップページ編集】 > 共通CSS管理
下記の例の用にスタイル指定を追記してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
#leftMenu { float:left; /* 左側に配置 */ width:200px; } #rightMenu { float:right; /* 右側に配置 */ width:200px; } #mainContents { float:left; /* 左側に配置 */ width:560px; } |
（4）下段メニュー管理内で、メインコンテンツ部分のdivを閉じます
【ショップデザイン（PC）】>【トップページデザイン】 > 下段メニュー管理
行頭に下記を追記してください。
|
1 |
<!– #mainContents end –></div> |
（5）全ページが3カラムになりました！
ショップをみるで確認してみましょう！
いかがでしたでしょうか。
ぜひお試しください！それではまた！
