Stinger3カスタマイズ・サイドバーの左右位置を変える

近年左右２カラム型のCSSテーマでは左側に広い記事エリア、右側に狭めなリンクエリアを設けるものが増えています。Stinger3もデフォルトではこのCSS配置を採用しています。実際マウスのアイポイントを考えると非常に効率的な配置だと思います。しかしインターネット普及期の頃に作成されたレイアウトはStinger3とは真逆な左にリンクエリア、右側に広い記事エリアというレイアウトが一般的でした。たとえばサイトの歴史が古く、ユーザーも馴染んでいるサイトをWORDPRESS化＆テーマをStinger3を選択したいんだけど、レイアウトの左右が変わるのはちょっと違和感、、、という場合など、Stringer3のサイドバー位置を変えるカスタマイズです。

といっても今回は割と簡単で、style.cssのカスタマイズだけです。

style.cssをテキストエディタで開き、「基本構造」で検索。その直下付近のカスタマイズとなります。

11行目と15行目のfloat以下のleft rightを書き換えるだけの作業です。


/*-----------------------------
基本構造
------------------------------*/

#header-in, #wrap-in, #navi-in, #footer-in, #gazou-in {
width: 986px;
margin-right: auto;
margin-left: auto;
}
#wrap #wrap-in #side {
float: left;
width: 336px;
}
#wrap #wrap-in #main {
float: right;
width: 550px;
padding-right: 39px;
padding-left: 39px;
padding-top: 20px;
border: 1px solid #ccc;
background-color: #FFF;
border-radius: 4px 4px 4px 4px;
padding-bottom: 20px;
}