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

このブログはサイドバーを左に、記事本文を右に表示しています。Stinger5のサイドバーはデフォルトが右なので、表示位置を左右入れ替えた形ですね。

サイドバーを左右のどちらに置く方がいいのかはブログを始める前から考えていました。ブログ開設に際し調べてみるとFラインやZラインという理論がありました。人間の目線は左側から始まりFやZの動きをします。そのため一番目に付きやすい左側に記事本文を置き、サイドバーは右側に置くというのが一般的なようです。

それではなぜ私がサイドバーを左にしたのか。天邪鬼で左サイドバーにしているみたいですが、これにはちゃんと理由があります。（天邪鬼なことは否定しませんけども）

サイドバーを左にするとPV（ページビュー）が増える？！

いろんな人が検証しているようですが、私が気になったのはPITEさんのブログ『Number333』です。

ブログのサイドバーを左に変えただけでまさかこんなに訪問別PVが増えるとは思いませんでした。 - Number333

こちらのブログでは訪問別PVがサイドバーを左に変更する前と後で「0.1」増加したそうです。なにやらあまり変わってない気がしますね。

訪問別PVが0.1変われば一日あたり2500PVもPVが増えるわけです。これを月間になおすと約7万5000PV。

すみません、さすが月間PV80万でした。

それでは今回はサイドバーと記事本文の表示位置を左右で入れ替えるテクニックをご紹介します。

目標：サイドバーと記事本文の表示位置を入れ替える！

完成予定図

答えの書いてあるブログを発見！

え？答え見つかった？Stingerカスタマイズに詳しいJimonさんのブログに答えが載ってました！『これは！ログ』はStinger5の構造についての解説もあり、ぱんくず問題を調べる時にも大変お世話になりました。

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

早速やってみましょう。

style.cssを修正する

構造や理論はJimonさんのブログの方がめちゃくちゃわかりやすいので、そちらをご覧ください。

今回はCSSの変更だけなので簡単ですね。

と思ったのも束の間。ちょっと問題発生です。

横スクロールバーが表示される

画面解像度の横幅が1200程度だと横スクロールバーが表示されてしまいます。

あれやこれやとソースを眺めて気が付きました。左右が入れ替わったからマージンの取り方も逆にしないとダメなんじゃなかろうか？

やってみたらうまくできました！

再度style.cssを修正する

今更ですが私は子テーマを作ってstyle.cssを修正しています。いずれ子テーマの簡単な作り方を記事にしようと思っていますが、直接触る場合は下記ソースを適宜読み替えてください。

なんかどんどんWordPressとStinger5の理解が深まっている気がします！記事を書くのも楽しいですが、ソースをいじってうまく出来たときって幸せを感じますよね。

最後までお読みいただきありがとうございました。