WordPressのテーマTwenty Elevenのカスタマイズにおいて、個別記事や固定ページを2カラム表示にするというのが主流な感じがしていますが、1カラムで横幅を広くとりたい場合もあると思います。
本記事では、Twenty Elevenの個別記事･固定ページを1カラムとし、横幅を目一杯広げるというカスタマイズを紹介します。
もちろん、トップページでも可能です。
個別記事と固定ページの編集
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"> |
こんな簡単な編集で、見た目が大きく変わります。左右の余白が削られて、コンテンツ表示に悠々とスペースを利用できます。
私はフォトギャラリーサイトを作ったりもしているのですが、写真を大きなサイズで表示できますので、とても迫力が出ます。
トップページも同様に編集
トップページも1カラムにし横幅を広げることが、簡単にできます。style.cssについては、先ほどの編集と共通です。index.phpの編集
<div id="content" role="main"> 上記部分のクラス名contentをcontent-customに変更する <div id="content-custom" role="main"> 下部にある<?php get_sidebar(); ?>を削除 |
この編集を施せば、トップページも同様に1カラムで悠々と表示が行えます。
感想
1カラムにて横幅目一杯にコンテンツを表示したいニーズは、結構あると思います。とても簡単に行えるカスタマイズなので、ぜひお試しあれ！
