こんにちは、makeshopの近藤です。
いつもmakeshopをご利用いただきありがとうございます。
今回は、ショップのトップページを3カラムにする方法をご紹介いたします！
全ページを3カラムにしたい方はこちら！
参考：ショップページを3カラムにしたい（全ページ編）
こんなお悩みありませんか？
・ショップのトップページに右メニューを追加したい
・トップページのみ3段構成にしたい
[難易度 ★★☆ ]
実はかんたん！トップページを3カラムにする方法！
※プレミアムショッププランのみ
設定方法
（1）ショップデザインの「中央画面管理」内に3つのdivを作る！
【ショップデザイン（PC）】> 【トップページ編集】 > 中央画面管理
の中に、
1.中央に表示させる部分を囲うdiv
2.右メニューに表示させる部分を囲うdiv
3.上記2つを囲うdiv
をご用意ください！
|
1 2 3 4 |
<div id="twoColomn"> <div id="mainContents">中央に表示させる部分</div> <div id="rightContents">右メニューに表示させる部分</div> </div> |
id="xxx"およびclass="yyy"の「xxx」「yyy」部分は自由に変更できますが、
変更する場合は、共通CSS管理の#xxxおよび.yyyも合わせて変更する必要があり
ますのでご注意ください！
変更する場合は、共通CSS管理の#xxxおよび.yyyも合わせて変更する必要があり
ますのでご注意ください！
（2）CSSを指定する！
【ショップデザイン（PC）】> 【トップページ編集】 > 共通CSS管理
下記の例のようにスタイル指定を追記してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
#twoColomn { width:960px; /* 中央画面全体の幅を指定*/ overflow:hidden; } #mainContents { width：500px; /* 中央部分の幅を指定*/ float:left; overflow:hidden; } #rightContents { width：460px; /* 右メニューの幅を指定 */ float:left; overflow:hidden; } |
（3）3カラムになりました！
ショップをみるで確認してみましょう！
【ショップデザイン（PC）】 > 【トップページ編集】 > 中央画面管理
内の編集なので、ここで使える「変数」が右メニューコンテンツで使えます！
内の編集なので、ここで使える「変数」が右メニューコンテンツで使えます！
例）
・バナー[BANNER？]
・カレンダー[CALENDAR]
・お知らせ[NEWSEVENT？]
・投票[POLL]
・ランキング[RANKING_?_?_?_?]
・Shoptweet[SHOPTWEET] など
いかがでしたでしょうか。
ぜひお試しください！それではまた！
