Facebookのレイアウトを2カラム右サイドバーにしたいのですが、そのためにはPCのレイアウトも2カラム右サイドバーにしなければならないようです。PCのレイアウトを3カラムのままだと私がやっている限りではFacebookのレイアウトは2カラム左サイドバーにしかできません。これだと詳細画面で拡大画像表示の右半分がはみ出して見えなくなるためチケットリストの右端にある価格を拡大して確認できません。PCのレイアウトは3カラムのままでFacebookのレイアウトを2カラム右サイドバーにできないでしょうか?
もしCSSの追加で可能であれば追加するCSSのコードを教えてください。
PC表示 ⇒ 3カラム
Facebook表示 ⇒ 2カラム ※サイドバーは右に表示
設定方法は、フリーエリアパーツ管理(デザイン設定>詳細レイアウト他)で行う方法と、スタイルシートを追記する方法がございます。
設定は、スタイルシートを追記する方法が簡単でメンテナンスも容易ですが、念のため、両方の設定方法を下記します。
■フリーエリアパーツ管理で行う方法
フリーエリアパーツ管理(デザイン設定>詳細レイアウト他)のページ選択を[商品詳細]に切り替えます。
レイアウト図の左カラムに配置された各パーツの編集ボタンを押し、[表示区分:]の[Facebook]のチェックを外して保存します。
次に[未使用パーツ]にある[新規作成]から左カラムに配置されているパーツと同じものを作成します。
※作成する際、[表示区分:]のチェックは[Facebook]のみにしてその他はチェックを外します。
以上で設定は完了です。
パソコン表示、Facebook表示をご確認ください。
■スタイルシートを追記する方法
パソコン用スタイルシート一覧(デザイン設定>適用中のスタイルシートカスタマイズ)から[スタイルシート(SNS用){css_url}]の編集ボタンを押して以下のスタイルを貼り付けて保存すれば完了です。
div.pane_body_mid {
overflow:hidden;
}
div.pane_body_mid_1 {
margin: 0 0 0 -224px;
float:left;
}
div.pane_body_mid_1 .pane_body_mid_1_contents{
margin: 0 0 0 224px;
}
div.pane_body_mid_2 {
margin:0;
width:224px;
padding:0px;
float:left;
}
div.pane_body_mid_3 {
margin:0;
width:224px;
float:right;
}
div.pane_body_mid_2 .pane_body_mid_2_contents,
div.pane_body_mid_3 .pane_body_mid_3_contents{
overflow:hidden;
}
ご案内は以上です。