Twenty Elevenを1カラムにして横幅を目一杯広げる

WordPressのTwenty Elevenで1カラム表示横幅カスタマイズWordPressのテーマTwenty Elevenのカスタマイズにおいて、個別記事や固定ページを2カラム表示にするというのが主流な感じがしていますが、1カラムで横幅を広くとりたい場合もあると思います。
本記事では、Twenty Elevenの個別記事・固定ページを1カラムとし、横幅を目一杯広げるというカスタマイズを紹介します。

もちろん、トップページでも可能です。

個別記事と固定ページの編集

WordPress Twenty Eleven の個別記事の横幅・余白をカスタマイズTwenty Elevenデフォルトでは、個別記事・固定ページは1カラムであり、左右の余白もかなりあります。
この左右の余白を削り、コンテンツを目一杯の横幅で表示させたいと思います。

style.cssとsingle.php、page.phpを編集します。

しかし、なぜこんなにも余白をとったのでしょうか...?

style.cssの編集

子テーマを作成している場合には子テーマフォルダのstyle.css下記コードを追記してください。Twenty Elevenを直接編集する場合には、style.cssの最下部に下記コードを追記してください。

1
2
3
4
5
6
7
8
9
#content-custom {
	margin: 0 2% 0 2%;
}
.singular .entry-header,
.singular .entry-content,
.singular footer.entry-meta,
.singular #comments-title {
	width: 100%;
}

single.phpの編集


<div id="content" role="main">
上記部分のクラス名contentをcontent-customに変更する
<div id="content-custom" role="main">

page.phpの編集


<div id="content" role="main">
上記部分のクラス名contentをcontent-customに変更する
<div id="content-custom" role="main">


WordPress Twenty Eleven の余白をカスタマイズし1カラム目一杯使える横幅にするこんな簡単な編集で、見た目が大きく変わります。
左右の余白が削られて、コンテンツ表示に悠々とスペースを利用できます。

私はフォトギャラリーサイトを作ったりもしているのですが、写真を大きなサイズで表示できますので、とても迫力が出ます。

トップページも同様に編集

トップページも1カラムにし横幅を広げることが、簡単にできます。style.cssについては、先ほどの編集と共通です。

index.phpの編集


<div id="content" role="main">
上記部分のクラス名contentをcontent-customに変更する
<div id="content-custom" role="main">
 
下部にある<?php get_sidebar(); ?>を削除

この編集を施せば、トップページも同様に1カラムで悠々と表示が行えます。

感想

1カラムにて横幅目一杯にコンテンツを表示したいニーズは、結構あると思います。
とても簡単に行えるカスタマイズなので、ぜひお試しあれ!


関連記事

WordPressのTwenty Elevenのヘッダーに画像を貼る Twenty Elevenのヘッダーに画像を貼る
WordPressのTwenty Elevenのヘッダー部分に画像を、拡大表示せずに貼る方法を紹介します。
Twenty Eleven固定ページのコメント欄削除
WordPressで、固定ページのコメント欄が不要だと思う方に、コメント欄削除の方法を紹介します。
Twenty Elevenの記事タイトルを装飾
Twenty Elevenでの記事タイトルの表示の仕方を編集・装飾の方法を紹介します。
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>