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

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

:2014/8/29 STINGER Wordpress

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

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

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

サイドバーと記事部分を入れ替え

スポンサーリンク

記事内リード文下_PC

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

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

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

記事部分がleft、サイドバーがright

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

floatって?

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

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

カスタマイズ手順

Step1 float指定を逆転

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

style.cssの4つの領域

#contentInner{
float:right;
}

aside{
float:left;
}

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

余白がおかしい

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

Step2 余白の修正

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

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

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

サイドバーが左になりました

※追記 画面の横揺れについて

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

対処法:その1

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

html{
overflow:auto;
}

body{
overflow:hidden
}

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

【続】横幅いっぱいのヘッダーやフッターにするcssテクニック

対処法:その2

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

[STINGER5]サイドバーと記事本文の表示位置を左右で入れ替えるテクニック

あとがき

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

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

jimon


記事下_W左_PC

記事下_W右_PC

-STINGER, Wordpress
-,

サイドバー上_PC

CATEGORY
この記事のカテゴリ
STINGERの親カテゴリ
ブログ内の他のカテゴリ
更新チェックはこちらから!