IT

【ひ】WordPressテーマJINでサイドバーを左側に表示する方法

お世話になっております。
怠惰の化身ハルトです。

【ひ】WordpressテーマJINでサイドバーを非表示にする方法お世話になっております。 怠惰の化身ことハルトです。 さて、WordpressテーマJINを購入してから……それなりの時間が経過...

以前こんな記事を書いたのですが、ありがたいことにこちらを読んでいただいた方からこんなご意見をいただきまして。

「サイドバーを左側に表示する方法はないでしょうか」

うむ。

確かにJINにはサイドバーの表示位置を変更するカスタマイズ項目はありません(見落としなら申し訳ない)。

ならば、それを何とかするのも、痒い所に手が届くサイトを目指す私の役目。

というわけで、JINでサイドバーを左側に表示する方法を紹介します。

ステップ1:CSSのカスタマイズ

以下のCSSを

  • 外観>カスタマイズ
  • 追加CSS

に貼り付けましょう。

@media (max-width: 767px) {
#main-contents {
float: right;
margin-left: 0px;
margin-right: 15px; } }
@media (min-width: 768px) {
#main-contents {
float: right;
margin-left: 0px;
margin-right: 10px; } }
@media (min-width: 1024px) {
#main-contents {
float: right;
margin-left: 0px;
margin-right: 30px; } }
@media (max-width: 767px) {
#sidebar {
float: right;
margin-left: 0px;
margin-right: 15px; } }
@media (min-width: 768px) {
#sidebar {
float: right;
margin-left: 0px;
margin-right: 20px; } }
@media (min-width: 1024px) {
#sidebar {
float: right;
margin-left: 0px;
margin-right: 30px; } }

以上!

というのも味気ないので、このCSSの解説でも少ししておきましょうか。

あ、単にサイドバーを左側に表示したいだけで、それ以上のことは特に興味はない、って人は読み飛ばしていただいて結構です。

技術的な解説(主にfloat)

このCSSを適用することでサイドバーが左側に来るようになるのですが、 その肝はfloatにあります。

JINにおいて、メインコンテンツとサイドバーは

  • メインコンテンツ
  • サイドバー

の順番で表示されます。

日本語環境では当然、左から右に文字が進んでいきますから、
先に出てきたものが左側に表示されます。

そのため、基本の設定の場合には、左からメインコンテンツ、サイドバーの順に表示されるため、サイドバーの方が右側に表示されます。

そしてこの順番は、基本的に入れ替えることができません。
では、どうする必要があるのでしょうか。

そう、右から順番に表示されるようにすればいいですね。

floatにrightを設定することで、要素を右から順番に並べることができるようになります。
(実は少し違うのですが、この場合には特に問題ありません)

まあ、正道ではありませんが、こういった解決方法もありますよ、ということでご紹介でした。

よろしくどうぞ。