Stinger5カスタマイズ！左右を逆転！サイドバーと記事本文の表示位置を入れ替える方法

最近よく見かける「サイドバーと記事部分」という２カラムスタイル。
我らがStingerもこのスタイルになっています。

記事とサイドバーのどちらを左に置くかは好みによって差が出るところ。
比率的にはブログは左側が記事、企業のページは右側が記事になっているものが多いように感じます。
Stinger5のデフォルトでは左側が記事になっていますが、逆転させたいという方もいるのではないでしょうか。

今回はStinger5の記事部分とサイドバーの配置を入れ替える方法をご紹介します。
完成するとこんな感じになりますよ。

デフォルトではこうなってるよ

まずはデフォルトのStingerを見てみましょう。

記事や記事一覧に当たる部分には「#contentInnner」、サイドバーには「aside」が割り当てられています。
（もっと詳しくclass構造が見たいよ、という方はこちらの記事をご覧ください）

この2つがそれぞれcssで「float」指定されているんですね。

floatって？

要素を左右に寄せるためのコード。
float:left；で左寄せ、float:right;で右寄せになります。

今回はこの部分のcssを変更して左右の表示を逆転させますよ。

変更するのは「style.css」。
float指定を逆転させるために「領域④」の部分に以下のコードを追加します。
(Stinger5のstyle.cssは4つの領域に分かれています。詳しくはこちらの記事をご覧ください。)

#contentInner{
float:right;
}

aside{
float:left;
}

これでサイドバーと記事部分が反転しました。この状態でページを見てみるとこんな風になっています。

ただ入れ替えただけなので余白が乱れてしまっていますね。

乱れた余白を修正するためにコードを追加します。
同じく「領域④」にこちらのコードを付け足してください。

main{
margin-right: 300px;
margin-left:20px;
}

今回のカスタマイズはこれで完了です。
最後まで終えるとこんな見た目になります。

上記のコードをそのまま入力すると、表示が横揺れしてしまうとのご報告を頂きました。
対処法を2つ追記します。

cssに横揺れ防止コードを追記してください。

html{
overflow:auto;
}

body{
overflow:hidden
}

コードの詳細はこちらのサイトを参照ください。

cssを横揺れのしない形に変更します。
こちらの方法については、あめたまさん@ametama_l2lが記事にして下さっているので、参照ください。

人間は左にあるものを優先的に見る性質があるそうです。
その辺りも考慮して自分にあったスタイルを作ってみてください。

最後まで読んでいただきありがとうございました。
Jimon(@jimon_s)でした。