こんにちは、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> |
変更する場合は、共通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カラムになりました!
ショップをみるで確認してみましょう!
内の編集なので、ここで使える「変数」が右メニューコンテンツで使えます!
例)
・バナー[BANNER?]
・カレンダー[CALENDAR]
・お知らせ[NEWSEVENT?]
・投票[POLL]
・ランキング[RANKING_?_?_?_?]
・Shoptweet[SHOPTWEET] など
いかがでしたでしょうか。
ぜひお試しください!それではまた!