ワードプレステーマ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