Twenty Elevenのヘッダー背景を設定

Twenty Elevenはデフォルトではヘッダー背景は設定されていません。
※ ヘッダー内に画像は表示されますが、背景ではありません。

シンプルで爽やかなのですが、シンプルすぎる感もあります。

そこで、Twenty Elevenのヘッダーに背景を設定してみようと思います。

Twenty Elevenの投稿日を削除する

Twenty Elevenの投稿記事タイトル周辺に表示される投稿日が邪魔だと感じた方、簡単に削除できます！
投稿日を表示したくない場合や、他の方法で表示したい場合なんかには削除してしまいましょう！

Twenty Elevenに背景画像を設定する

初期段階では背景カラーのみの設定であり、少々地味なデザインのTwenty Eleven。
良く言えばシンプルなんですが。

カスタマイズが簡単であり、それでいて効果が絶大な背景画像の設定。

今回は背景画像の設定方法を紹介します。

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

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

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

Twenty Elevenで2カラムの横幅･余白を変更

WordPressのデフォルトテーマにもなったTwenty Eleven。
トップページでは2カラムとなっておりますが、どちらのカラムも横幅が微妙な感じがします。
余白が多すぎるというか．．．

今回は、この横幅をなんとかしようと思います。

カテゴリーページを記事タイトル一覧で全件表示する

WordPressのカテゴリーページについて、多くの場合ではデフォルトテーマでのトップページと同様に、タイトルと記事の抜粋が表示されると思います。

トップページでは、この表示方法でいいかもしれませんが、カテゴリーページではタイトルのみを表示し、目次みたいな感じにしたくなることもあると思います。
この画像のような表示方法です。
ってことで、カテゴリーページをカスタマイズしてみました！
今回のカスタマイズはWordPressデフォルトテーマのTwenty Elevenにて行いました。もちろん、他のテーマでも同様のことができます。

ループ部分を編集しタイトルのみの表示とする

category.phpのループ部分を編集します。
※ もし、category.phpが存在しないテーマであれば、index.phpをコピーするなりしてcategory.phpを作成します。

タイトルをリスト表示としたいので、ループ部分を囲うようにしてulタグを記述します。

<ul>

(ループ部分)

</ul>

Twenty Elevenであれば、

Twenty Elevenのヘッダー画像を削除する

Twenty Elevenのカスタマイズで私が最初にやりたかったこと、それがこのヘッダー画像を削除するということです。
とてもきれいな画像なのですが、削除したかったんです。
この画像がなくなるだけで、かなりスッキリとします。

ダッシュボードからテーマ編集

この画像部分の、「外観」メニュー内のヘッダーを選択します。
そして、画面をスクロールしていくと．．．

Twenty Elevenのヘッダー内余白を削除する

シンプルで使いやすいWordPressのテーマTwenty Elevenを楽しくカスタマイズしています！
本日はヘッダー内の左側の余白を削除してみたいと思います。
この画像のように、サイトタイトル左側に結構な余白があります。
私としてはサイトタイトルをもっと左側に寄せたかったのです！

子テーマのスタイルシート編集

編集は、ほんの一瞬で終わります。

1
2
3

#branding hgroup {
	margin: 0 2%;
}

これを追記するだけです。

Twenty Elevenの上部余白を削除する

WordPressのデフォルトテーマであるTwenty Eleven。シンプルで使いやすいですが、カスタマイズしたい箇所がたくさんあると思います。
本サイトでは、Twenty Elevenの子テーマを作成し、色々なカスタマイズを紹介しております。

Twenty Elevenの最上部に余白があります。この余白がどうしても削りたく思いました。
早速、子テーマのCSSを編集です！

子テーマのスタイルシート編集

編集自体はとても簡単に終わります。

#page {

	margin: 0em auto;

}

これを追記するだけです。

WordPressの子テーマを作成しよう

WordPressをカスタマイズして、自分の好きなデザインや機能を盛り込もうとしたときに必ず知っておきたい方法があります。
子テーマを作るという方法です。
私はこの子テーマという機能を知らなかったので、後々に苦労をしました。

子テーマというものは、親(テンプレート)となるテーマに対して、カスタマイズが必要な部分のみを記したファイルを作成し、親テーマを直接修正しないので、管理･運用がとてもラクです。

既存のテーマを直接カスタマイズすると、バージョンアップした際に上書きされてしまったり、デフォルトがどんなコードかが分からなくなったりしていまいます。
カスタマイズの際には子テーマを作成することを強くお勧めします。

子テーマの作成方法

子テーマの作成方法はとても簡単です。
WordPressのテーマがあるディレクトリに任意のディレクトリを作成し、その中にスタイルシートを置くだけです。
この時、スタイルシートの記述は、

/*

Theme Name: Child

Template: twentyeleven

*/

上記のようにします。