ワードプレステーマ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; }
これで悩みが一つ解決しましたね!!記事投稿頑張っていきましょう♫
ピンバック: 【TwentyTwelve】サイドバーのカスタマイズ | Struggle