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

Twenty Elevenで個別記事も2カラムにするbeforeWordPressのテーマ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(); ?>

を加える。

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

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

各カラムの幅を調節する

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

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

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


関連記事

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>