アフィリに役立つメモ

シリウスで右カラム(右サイドバー)にする方法3手順!

シリウスで右カラム(右サイドバー)にする方法です。

シリウスの2カラムテンプレートってデフォルトだと全部左カラムですよね。

右カラムにしたいなーって実は前々から気になっていたんですが、、今日ググってみたところ、全然誰も解説してないじゃないですか!w

なので自分でやってみました。

WS000036

↓↓↓

WS000039

 

ではその3手順です。

  1. メインコンテンツとサイドバーを逆にする
  2. サイドバーの影(グレー部分)を右に移動
  3. 位置を微調整

 

1.メインコンテンツとサイドバーを逆にする

例としてトシの購入特典のページでやってます^^;
トシからのご購入者特典

まずはシリウスでCSSを編集します。CSSはCtrl+Wで開けますよ。

場所はココ。

2014-02-09_020319

#mainは本文が入る場所、#menuはサイドメニューです。
めんどくさい話は抜きにして、これのrightとleftを入れ替えます。

するとこんな感じに。

WS000037

サイドバーは移動しましたが、その影部分がまだ残ったまま。

 

2.サイドバーの影(グレー部分)を右に移動

メイン部分の背景がおかしいので直します。
266行目あたり。「#contents」とかで検索してください。

2014-02-09_020703

ここもrightに変更します。

するとこんな感じに。

WS000038

これでOK!でもいいですが、
細かいところまでこだわりさんのトシはメニューと後ろの影の位置がズレてますので直します。

 

3.位置を微調整

328行目あたり。ここでメニュー部分の左右のあきを記述していますので、左右のあきを逆にします。

2014-02-09_021030 WS000039

微調整もでき、右カラム完成です♪

今日の今日のことなんで、間違いなどあったらご指摘くださいませm(__)m