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;
}

まとめ

作業時間は1分程度ですが、左右入れ替えると、だいぶ印象が変わったんじゃないかなと思います。左コンテンツ、右コンテンツはサイト管理者の好みの差という意見もありますが、長年見てくださってる閲覧者のインターフェースを考慮して左右配置は慎重に決めてみてはいかがでしょうか？

stinger5のカスタマイズ

stinger5でのカスタマイズはこちらをご覧ください。