Twenty Twelveのサイドバーを左側にする

Twenty Twelveのstyle.cssをジロジロと眺めていたら、私がこれまでカスタマイズのベースにしていたデフォルトテーマTwenty Tenと比べて、サイドバーとコンテンツ部の左右を入れ換えるのがとっても簡単になっていることに気が付いたのでメモです。

前置きが長くなりますが、従来のデフォルトテーマのおさらいを少しだけ。

Twenty Tenの場合

Twenty Tenにおけるサイドバーのレイアウトは少々複雑で、ネガティブマージン(マージンの値がマイナス)が設定されていたりしますので、単純に左右を入れ換えるだけでも、入門者には少しだけ敷居が高いのではないでしょうか。

WordPressを使い始めたばかりの頃、style.cssとにらめっこしながら苦戦した覚えがあります。ちなみに、Twenty Tenのサイドバーを左にするにはうぇぶるじょんさんの記事がとてもわかりやすいです。この記事に何度助けていただいたことか。

Twenty Elevenの場合

Twenty Elevenのレイアウト変更はちょっとオシャレです。なんと管理画面から行えちゃいます。
これはカスタマイズというか、設定ですね。

Twenty Twelve

ここからが本題です。
Twenty Twelveの場合、管理画面から設定することはできないようですが、簡単なカスタマイズでサイドバーとコンテンツの左右を入れ換えることができます。

カスタマイズの方法

style.cssの1371行目〜

.site-content {
	float: left;
	width: 65.104166667%;
}

と、
1380行目〜

.widget-area {
	float: right;
	width: 26.041666667%;
}

にそれぞれfloatの指定がありますので、このleftとrightを入れ換えてやるだけです。

子テーマを使う場合は、子テーマのstyle.cssに以下の記述を行います。

@media screen and (min-width: 600px) {

.site-content {
    float: right;
}

.widget-area {
    float: left;
}

}

一応比較してみたよ

デフォルトの配置

左右が入れ替わりました!

超基本的な内容かもしれませんが、サイドバーを左側にしたいシーンは多々ありますので、とりあえず知っておいて損はないかと思います。

ちなみに、この画像では配置がわかりやすいように、ボックスに色をつけてあります。こちらの記事で、上記のようにTwenty Twelveに色がつく子テーマを置いてありますので、ご参考までに。

Twenty Twelveのサイドバーを左側にする” への8件のコメント

  1. IE7/8 対策で以下も必要になると思います。http://hetarena.com/archives/1663 に Twenty Twelve 関連をいろいろまとめましたので、是非ご覧ください。

    .ie .site-content {
    float: right;
    }
    .ie .widget-area {
    float: left;
    }

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>