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

公開日: : 最終更新日:2015/03/06 Stinger, Wordpress ,

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

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

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

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

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

Sponsored Link

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

まずはデフォルトの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


 これは!と思ったらシェアして頂けると嬉しいです
  • このエントリーをはてなブックマークに追加
  • Pocket
  • 111 follow us in feedly
Loading Facebook Comments ...

PROFILE

Jimon Profile
Jimon
東海地方の大学院生。おしゃれなグッズやiPhone,Macの情報など、人に教えたくなる「これは!」というモノを発信していきます。
お問い合わせ

About


おしゃれな小物とiPhone,Macの情報発信ブログ。
管理人『Jimon』(@jimon_s)がこれは!と思ったアイディア、ニュース、活用術を発信していきます

PAGE TOP ↑