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

今回は、ショップのトップページを3カラムにする方法をご紹介いたします！
全ページを3カラムにしたい方はこちら！
参考：ショップページを3カラムにしたい（全ページ編）

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

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

[難易度 ★★☆ ]
実はかんたん！トップページを3カラムにする方法！

設定方法

（1）ショップデザインの「中央画面管理」内に3つのdivを作る！

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

の中に、
1.中央に表示させる部分を囲うdiv
2.右メニューに表示させる部分を囲うdiv
3.上記2つを囲うdiv
をご用意ください！

<div id="twoColomn">
　　<div id="mainContents">中央に表示させる部分</div>
　　<div id="rightContents">右メニューに表示させる部分</div>
</div>

（2）CSSを指定する！

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

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

#twoColomn {
width:960px; /* 中央画面全体の幅を指定*/
overflow:hidden;
}
#mainContents {
width：500px; /* 中央部分の幅を指定*/
float:left;
overflow:hidden;
}
#rightContents {
width：460px; /* 右メニューの幅を指定 */
float:left;
overflow:hidden;
}

（3）3カラムになりました！

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

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