シリウスで右カラム(右サイドバー)にする方法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

はてなブックマーク - シリウスで右カラム(右サイドバー)にする方法3手順!
LINEで送る
Pocket



いつも応援クリックありがとうございます。
お茶でも飲みながらごゆっくりしていってください^^

名字(漢字)
メールアドレス

トシおすすめの2大教材・ツール

トシはこの二つでアフィリエイト活動しています^^
本気で稼ぎたい方のための
大まじめな教材
初心者OK!の
No.1アフィリエイトツール☆

3Mアフィリエイト「LUREA」

LUREAのリアルな実践記とトシの特典案内はこちら

サイト作成ツール「SIRIUS」
【レスポンシブテンプレートプレゼント!】トシ限定特典付き購入はこちら

4件のコメント

  • できた!

    ほんと、誰も解説してないので、ありがたいです。

    参考にさせていただき、できました^^

    ありがとうございました。また遊びにきます☆
    応援済みです^^

    • トシ

      応援ありがとうございます!

      自分の困ったことを書いておくとメモにもなりますしお役にも立てるしよいですね^^

      また、遊びにいらしてください☆

  • ちょこ

    できましたーー!
    ありがとうございます!
    おかげで、ずっとやりたかった右メニューが実現しました!ヽ(^o^)丿

    ずうずうしいですが、メニューの後ろのグレーの部分も白にできる方法があればぜひ知りたいと思いました!(^^)! 応援ずみです!

コメントを残す