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

今回は、ショップの全ページを3カラムにする方法をご紹介いたします!
トップページだけを3カラムにしたい方はこちら!
参考:ショップページを3カラムにしたい(トップページのみ編)

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

・ショップページに右メニューを追加したい
・3段構成にしたい

[難易度 ★★★ ]
ショップページを3カラムにする方法!

設定方法

(1)左側メニュー管理内でtableを強制的に閉じます

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

一番上に、下記のように記載してください。

</td></tr></table>

これでtableが閉じられました!

3カラムを実現させるためにはtableの構造が邪魔になってしまいます。
強制的に閉じてしまいましょう。

(2)閉じたtableの代わりにdivで囲います

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

先程のものの下に、下記のように記載してください。

<div id="rightMenu">右メニュー用のソース</div>
<div id="leftMenu">左メニュー用のソース</div>
<div id="mainContents">

メインコンテンツ部分(真ん中に来る予定の部分)の開始タグを必ず記述してください。
※開始タグをこの位置に書かないと【独自ページ入力】で作成した画面が崩れてしまいます。

(3)CSSを指定します

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

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

#leftMenu {
  float:left; /* 左側に配置 */
  width:200px;
}
#rightMenu {
  float:right; /* 右側に配置 */
  width:200px;
}
#mainContents {
  float:left; /* 左側に配置 */
  width:560px;
}
(4)下段メニュー管理内で、メインコンテンツ部分のdivを閉じます

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

行頭に下記を追記してください。

<!– #mainContents end –></div>
(5)全ページが3カラムになりました!

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

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