Twenty Elevenで個別記事を2カラムにし幅を整える

WordPressのテーマTwenty Elevenで個別記事ページが1カラムなのが、少々不満でした。
個別記事にもサイドバーがほしいですよね！

本日は、Twenty Eleven個別記事ページにサイドバーを出現させ、2カラムにする方法を紹介します。

子テーマファイルを編集

今回操作するファイルは2つあります。

style.css
single.php

です。
上記2ファイルをTwenty Elevenのテーマフォルダから子テーマフォルダにコピーしてください。
子テーマとはなんぞや？という方は、WordPressの子テーマを作成しようをご覧ください。

また、子テーマではなくTwenty Elevenを直接編集する場合には、後述の編集について、

style.cssには最下部に追記
single.phpは子テーマと同様に直接編集

として下さい。

style.css

/*
	個別記事も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(); ?>

を加える。

この編集で、このように個別記事ページも2カラムとなります！

サイト内の情報が増えてきたときには、サイドバーに色々と表示したくなりますよね！

各カラムの幅を調節する

先ほどのcssで、メインコンテンツ部分とサイドバー部分の横幅は調節されておりますが、納得のいかない方は、Twenty Elevenで2カラムの横幅･余白を変更を参考に、.singular #primaryと.singular #content, .left-sidebar.singular #contentのwidthを適宜変更してください。

そして、納得のいく横幅を手に入れてください！

Twenty Elevenのカスタマイズ、楽しいですね！

Twenty Elevenのヘッダーに画像を貼る
WordPressのTwenty Elevenのヘッダー部分に画像を、拡大表示せずに貼る方法を紹介します。

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

Twenty Eleven固定ページのコメント欄削除
WordPressで、固定ページのコメント欄が不要だと思う方に、コメント欄削除の方法を紹介します。

Twenty Elevenの記事タイトルを装飾
Twenty Elevenでの記事タイトルの表示の仕方を編集･装飾の方法を紹介します。

Twenty Elevenのコメントリンク･吹き出しを削除
Twenty Elevenでコメント何件という表示をしてくれている吹き出しを削除する方法を紹介します。

Twenty Elevenで個別記事を2カラムにし幅を整える

子テーマファイルを編集

各カラムの幅を調節する

関連記事

コメントを残すコメントをキャンセル

子テーマファイルを編集

各カラムの幅を調節する

関連記事

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル