WordPress のテーマの一つである Twenty Twelve は、サイドバーが右側になるように作られています。必要があってこれを左側にもってきて、ここにメインナビゲーションを表示することにしました。
方法はよく紹介されている次の方法です。スタイルシートの次の部分
.site-content {
float: left;
width: 65.104166667%;
}
.widget-area {
float: right;
width: 26.041666667%;
}
この float の right と left を入れ替えて次のようにします。
.site-content {
float: right;
width: 65.104166667%;
}
.widget-area {
float: left;
width: 26.041666667%;
}
そして左側のサイドバーにメインナビゲーションを表示するようにしました。
横幅の広いウィンドウではきれいに表示されるのですが、狭めたりスマホで見ると右のように崩れてしまいます。メニューが本文に重なってしまいます。
これはメニューバーの形をそろえるためにメニューバーの width を固定に指定していることに原因がありそうです。それでグリッドシステムを使用することにしました。スタイルシートに下記を追加して、
.grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, glrd8, grid9, grid10, grid11,grid12 {
float: left;
display: inline;
margin-left: 10px;
margin-right: 10px;
}
.grid1 { width: 60px; }
.grid2 { width: 140px; }
.grid3 { width: 220px; }
.grid4 { width: 300px; }
.grid5 { width: 380px; }
.grid6 { width: 460px; }
.grid7 { width: 540px; }
.grid8 { width: 620px; }
.grid9 { width: 700px; }
.grid10 { width: 780px; }
.grid11 { width: 860px;}
.grid12 {width: 940px;}
sidebar.php の全体を <div class=”grid3″> </div> で囲みます。
そうしましたら、本文と重なることはなくなり、さらに狭めるとメニューが下に移動するようになりましたが、右のように「検索」と「TOP」は崩れたままです。
幅を指定したメニューバーの下の部分は正しく表示されています。それで、検索に幅を指定してみようと試してみました。
.widget_search {
width: 220px;
width: 15.71428571rem;
}
このように検索の部分に width で幅を固定に指定してみましたら、右のようにきれいに表示されるようになりました。「TOP」もこれに影響されていたのか、正しい位置に表示されるようになりました。
グリッドシステムでは、横幅の指定のしかたに注意が必要のようです。
なぜなのか、調査は今後の課題です。どなたかご存じでしたら教えてください。
