WordPress 3.2.1 twentyelevenの子テーマを作ってカスタマイズ:showcaseテンプレートでサイドバーの位置を左から右に変更する

Showcase Template で固定記事を作成すると、Twentyeleven の Theme Option で

• ２カラム
• サイドバーを右側

に設定しても、 Showcase Template で作成した固定記事のサイドバーは左側に表示されてしまいます。これを右側にする設定です。

まず、２カラム＋サイドバー右 の設定は、ダッシュボードの左側メニューから、

1. 「外観」→「Theme Option」をクリック
2. Default Layout で左端のレイアウトを選択

これでブログ内の全ての記事が ２カラム＋サイドバー右 表示になったかと思いきやさにあらず。Showcase Template で作成した固定ページでは、サイドバーは左側に表示されています。

Showcase Template で作成された固定ページのサイドバーは、「外観」→「ウィジェット」の、「ショーケースサイドバー」で設定したものを表示します。

このサイドバーに対する表示の設定（つまりスtwentyeleven のスタイルシートによる設定）は、以下の通りです。
float: left; で、サイドバーを左寄せにしています。
そして、margin の設定で、

• 上マージン 0
• 右マージン －22.15％
• 下マージン 0
• 左マージン 0

と指定しています。 右マージンに関してはネガティブが設定されています。
このネガティブマージンについては、こちらのサイトに詳しい説明があります。

.page-template-showcase-php #main .widget-area {
	float: left;
	margin: 0 -22.15% 0 0;
	width: 22.15%;
}

また、.page-template-showcase-php section.recent-post に対しての float: right; と指定してしある事でサイドバー（widget-area）以外のものを右に寄せています。
こちらでのマージンの設定は、

• 上マージン 0
• 右マージン 0
• 下マージン 0
• 左マージン 31％

です。

.page-template-showcase-php section.recent-posts {
	float: right;
	margin: 0 0 0 31%;
	width: 69%;
}

これまでのところをまとめると、Showcase Template で作成された固定ページは、以下のような構造。

そこで、行う事は以下の通り。

1. class名: widget-area　と recent-popsts の float の右・左を逆にする。
2. widget-area と recent-posts のマージンを修正する。

.page-template-showcase-php section.recent-posts {
	float: left;
	margin: 0 31% 0 0;
}

.page-template-showcase-php #main .widget-area {
	float: right;
	margin: 0 0 0 -22.15%;
}