Twenty Elevenで2カラムの横幅・余白を変更

Twenty Elevenで2カラムの横幅を変更する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%)
ということになります。

仕組みがわかってしまえば、簡単ですね!
見やすい横幅を手に入れてください!


関連記事

WordPressのTwenty Elevenのヘッダーに画像を貼る Twenty Elevenのヘッダーに画像を貼る
WordPressのTwenty Elevenのヘッダー部分に画像を、拡大表示せずに貼る方法を紹介します。
WordPressのTwenty Elevenで1カラム表示横幅カスタマイズ Twenty Elevenを1カラムにして横幅を目一杯広げる
WordPressのデフォルトテーマにもなったTwenty Elevenをカスタマイズし、個別記事や固定ページを1カラムで横幅目一杯で表示する方法です。
Twenty Eleven固定ページのコメント欄削除
WordPressで、固定ページのコメント欄が不要だと思う方に、コメント欄削除の方法を紹介します。
Twenty Elevenの記事タイトルを装飾
Twenty Elevenでの記事タイトルの表示の仕方を編集・装飾の方法を紹介します。
Twenty Elevenのコメントリンク・吹き出しを削除
Twenty Elevenでコメント何件という表示をしてくれている吹き出しを削除する方法を紹介します。

コメントを残す

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

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>