TwentyTwelve サイドバー/記事コンテンツの左右を入れ替える超簡単な方法

ワードプレステーマTwentyTwelveで、左右のコンテンツ(サイドバー/記事コンテンツ)を入れ替える超簡単な方法を書き残しておきます。

TwentyElevenでは、デフォルトで左右の入れ替えが出来たのですが、Twelveはそれを引き継いでくれませんでした…(涙

で、スタイルシートとにらめっこしている時に、チョッと閃いたので試してみたところ…、超簡単に入れ替えが出来てしまいました…(汗

ってことで、管理画面より「外観」⇒「テーマ編集」からスタイルシートを開いて下さい。(小テーマを使用している方は、小テーマ側のスタイルシートを編集して下さい)

スタイルシートの中から、次の部分を探して下さい。

/* =Media queries
-------------------------------------------------------------- */

/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {
	.author-avatar {
		float: left;
		margin-top: 8px;
		margin-top: 0.571428571rem;
	}
	.author-description {
		float: right;
		width: 80%;
	}
	.site {
		margin: 0 auto;
		max-width: 960px;
		max-width: 68.571428571rem;
		overflow: hidden;
	}
	.site-content {
		float: left;
		width: 65.104166667%;
	}
	body.template-front-page .site-content,
	body.single-attachment .site-content,
	body.full-width .site-content {
		width: 100%;
	}
	.widget-area {
		float: right;
		width: 26.041666667%;
	}

⇒これを、次の様に入れ替えるだけです!!

/* =Media queries
-------------------------------------------------------------- */

/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {
	.author-avatar {
		float: left;
		margin-top: 8px;
		margin-top: 0.571428571rem;
	}
	.author-description {
		float: right;
		width: 80%;
	}
	.site {
		margin: 0 auto;
		max-width: 960px;
		max-width: 68.571428571rem;
		overflow: hidden;
	}
	.site-content {
		float: right;
		width: 65.104166667%;
	}
	body.template-front-page .site-content,
	body.single-attachment .site-content,
	body.full-width .site-content {
		width: 100%;
	}
	.widget-area {
		float: left;
		width: 26.041666667%;
	}

…(汗 げっ激に簡単でしたねww これで、左右のコンテンツが入れ替わったハズです。

もし、コンテンツの位置が微妙にずれてしまった場合は、こちらの部分を少し編集してみて下さい。

/* Page structure */
.site {
	padding: 0 24px;
	padding: 0 1.714285714rem;
	background-color: #fff;
}
.site-content {
	margin: 24px 0 0;
	margin: 1.714285714rem 0 0;
}
.widget-area {
	margin: 24px 0 0;
	margin: 1.714285714rem 0 0;
}

特に問題なければ、スルーしてOKです。もし変更される場合は、’px値’と’rem値’に気をつけて下さい。参考ページ:TwentyTwelveの悩める’$rembase’

ちなみに私の場合は、若干’ズレ’が生じてしまったので以下の様に修正してみました。そうしたら、チャンと表示される様になりました。参考までに☆

/* Page structure */
.site { /* サイト全体の設定 */
	padding: 0 12px;
	padding: 0 0.857142857rem; /* 12/14 */
	background-color: #fff;
}
.site-content { /* 記事ページの位置設定 */
	margin: 0 14px 14px 0;
	margin: 0 1rem 1rem 0;
	background-color: #fff;
}
.widget-area { /* サイドバーの位置設定 */
	margin: 14px 14px 0 10px;
	margin: 1rem 1rem 0 0.714285714rem;
	background-color: #fff;
}

これで悩みが一つ解決しましたね!!記事投稿頑張っていきましょう♫

WordPressデザインブック ステップバイステップ形式でマスターできる
WordPressデザインブック ステップバイステップ形式でマスターできる

 

にほんブログ村 ブログブログ ブログノウハウへ

TwentyTwelve サイドバー/記事コンテンツの左右を入れ替える超簡単な方法” への1件のコメント

  1. ピンバック: 【TwentyTwelve】サイドバーのカスタマイズ | Struggle

コメントを残す

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