WordPressのデフォルトテーマにもなったTwenty Eleven。
トップページでは2カラムとなっておりますが、どちらのカラムも横幅が微妙な感じがします。
余白が多すぎるというか．．．
今回は、この横幅をなんとかしようと思います。
子テーマのスタイルシートに追記
1 2 3 4 5 6 7 8 9 10 11 | #primary { margin: 0 -26.4% 0 0; } #content { margin: 0 30.6% 0 2%; width: 67.4%; } #secondary { margin-right: 2%; width: 24.4%; } |
ここでの横幅の割合は適宜調節してください。
ここで注意事項が。
- #contentのwidth + #contentのmargin(右 + 左) = 100
- #primaryのmargin右の絶対値 = #secondaryのwidth + #secondaryのmargin右
横幅の設定値がパーセンテージとなっているところが、Twenty Elevenのミソですね！
レスポンシブなページができあがるわけです。
実際の横幅はどうなるのか
さて、メインカラムとサイドカラムの幅の割合が変わりましたが、では具体的にはどのくらいになっているのでしょうか？Twenty Elevenのスタイルシートには、
1 2 3 4 | #page { margin: 2em auto; max-width: 1000px; } |
というコードがあります。
#pageは、#contentや#secondaryの祖先にあたる要素であり、#pageの横幅を#contentと#secondaryで分け合います。
使用しているブラウザに状態によって表示ページの横幅が変化しますが、#pageの横幅は1000px以上にはなりませんよー！というコードですね。
よほど小さなモニターを使っていない限り、またブラウザ窓をかなり小さくしない限り、1000pxの横幅で表示されると思います。(※ もちろんモバイルブラウザは除外しての話です。)
そして、先ほどの子テーマスタイルシートを適用した場合には、
- #contentの横幅：674px (1000pxの67.4%)
- #secondaryの横幅：244px (1000pxの24.4%)
仕組みがわかってしまえば、簡単ですね！
見やすい横幅を手に入れてください！
関連記事
Twenty Elevenを1カラムにして横幅を目一杯広げるWordPressのデフォルトテーマにもなったTwenty Elevenをカスタマイズし、個別記事や固定ページを1カラムで横幅目一杯で表示する方法です。
