WordPressのテーマTwenty Elevenで個別記事ページが1カラムなのが、少々不満でした。
個別記事にもサイドバーがほしいですよね!
本日は、Twenty Eleven個別記事ページにサイドバーを出現させ、2カラムにする方法を紹介します。
子テーマファイルを編集
今回操作するファイルは2つあります。- style.css
- single.php
上記2ファイルをTwenty Elevenのテーマフォルダから子テーマフォルダにコピーしてください。
子テーマとはなんぞや?という方は、WordPressの子テーマを作成しようをご覧ください。
また、子テーマではなくTwenty Elevenを直接編集する場合には、後述の編集について、
- style.cssには最下部に追記
- single.phpは子テーマと同様に直接編集
style.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | /* 個別記事も2カラムにする */ .singular #primary { float: left; margin: 0 -26.4% 0 0; width: 100%; } .singular #content, .left-sidebar.singular #content { margin: 0 30.6% 0 2%; width: 67.4%; } /* メインコンテンツ部分の左右の余分な余白を削除 */ .singular .entry-header, .singular .entry-content, .singular footer.entry-meta, .singular #comments-title { width: 100%; } |
single.php
<?php get_footer(); ?> |
の上部に、
<?php get_sidebar(); ?> |
を加える。

サイト内の情報が増えてきたときには、サイドバーに色々と表示したくなりますよね!
各カラムの幅を調節する
先ほどのcssで、メインコンテンツ部分とサイドバー部分の横幅は調節されておりますが、納得のいかない方は、Twenty Elevenで2カラムの横幅・余白を変更を参考に、.singular #primaryと.singular #content, .left-sidebar.singular #contentのwidthを適宜変更してください。そして、納得のいく横幅を手に入れてください!
Twenty Elevenのカスタマイズ、楽しいですね!
関連記事

WordPressのデフォルトテーマにもなったTwenty Elevenをカスタマイズし、個別記事や固定ページを1カラムで横幅目一杯で表示する方法です。