TwentyTwelveの背景色を変更するカスタマイズ

今回はサイトの見た目や印象がガラリと変わる背景色の変更をしていきます。背景には色を指定するか画像を使用するという２つの方法があります。

私の場合はフリー素材屋さんから画像を使わせて頂いてますので、その画像をサイトの背景に指定しています。そのため、画像を使いたい方は先に画像を用意しておき、画像のＵＲＬをコピーしておきます。

画像のＵＲＬを調べるには？

背景に画像を使いたい場合は先に画像をアップしておいて下さい。画像をアップしたら画像の「編集」をクリックして、画面の右側に「ファイルのＵＲＬ」というのがありますので、これをコピーしておいて下さい。

これで事前の準備はＯＫですが、作業に入る前に基本的な部分を解説しておきます。

TwentyTwelveの背景を変更する場所

今回もTwentyTwelveの子テーマで作成したスタイルシート (style.css)を使います。ここに記述していく訳ですが、背景色を変更する場所というのが色々あります。例えばこんな感じになってます。

• サイトのコンテンツ部分の背景は「.site-content」
• サイドバーの背景部分は「.widget-area」
• ヘッダー部分の背景は「.site-header」
• フッターの部分の背景は「footer[role=”contentinfo”] 」

これはそれぞれ別々に指定する場合です。また、コンテンツの外側の背景は「管理画面」から変更できます。これらの場所全部を１色でまとめたい場合は「.site」という場所に記入する必要があります。とは言っても言葉だけでは分かりにくいと思いますので、ちょっと変更例を見せておきますね。

コンテンツの外側の背景

ここはコンテンツの外側の背景色を変更できます。

これは管理画面から「外観」⇒「背景」で変更する事ができます。色でも画像でも好きに変更できます。私はここでフリー素材の画像を使っていて、私のサイトで背景を変えているのはこの１箇所のみです。

サイトコンテンツ部分の背景「.site-content」

これは記事コンテンツとその下のコメント欄も含む部分で、サイドバーは含みません。

この部分は子テーマのスタイルシート(style.css)にこのように記述します。

/* コンテンツ背景色 */ 
.site-content { background: #f5faf1;} /* 色を指定 */

また、色の変更ではなくて画像を使う場合はこのようになります。

/* コンテンツ背景画像 */  
.site-content {
background-image:
url(http://アップロードしておいた画像URL);
background-repeat:repeat;}

これが基本形になりますので、後はこの「.site-content」の部分を「.widget-area」や「.site-header」に書き換えると背景色や画像を指定する事になります。

そのため、色を指定する場合の「background: #〇〇」 と画像を指定する「background-image:url(http://アップロードしておいた画像URL);」という表現は覚えておきましょう。

サイドバーの背景部分「.widget-area」

これは分かりやすいですね、サイドバーの背景色や画像を指定できます。

これもソースは先ほどと同じです。指定する場所だけ変更して下さい。

/* サイドバーの背景色 */  
.widget-area {background: #f5faf1;}

このように指定する場所を変えてヘッダーやフッターも背景を変更する事ができます。

余白の部分をどうするか？

前述したようにヘッダー、サイドバー、コンテンツと１つ１つ指定して背景色を変更できますが、余白の部分が白く残ると思います。例えばこんな感じ。分かりやすく背景を黒にしてみました。

このように余白の部分が白く残ってますよね。この部分の色を変更する場合は最初に「.site」というセレクタで全体の色を指定しておきます。

それから各部分の背景色を変更するといいです。先に全体の色を決めて、その上に各部分の色や画像を上塗りする感覚でいいと思います。スタイルシートの記述は下に書いた物が優先されますので、背景色を変更するカスタマイズの一番上（最初）にこの「.site」で全体の色を指定しておきます。

/* 背景色 */  
.site {background: #00ff66;}
.widget-area {background: #000;}
.site-content {background: #000;}
.site-header {background: #000;}

このように「.site」で最初に全体の色を指定してから各部分の色を指定します。この例はちょっと変な配色になってしまいました。

これで余白の部分の色も指定する事ができました。最後にもう一つだけ付け加えておきます。ヘッダーの部分だけ背景色を設定するとナビゲーションの下まで色が付いてしまいます。分かりやすくヘッダーの部分だけ黒くしてみました。

ナビゲーションメニューの下の部分も黒くなっているでしょ？この部分を消すには次のコードを追加します。

/* ヘッダー下の余白をなくす */
.site-header {padding: 24px 0 0 0;}

このようになりました。以上で背景色のカスタマイズは終了です。

• ⇒TwentyTwelveの「コメントをどうぞ」を移動もしくは削除する
• ⇒WordPressカスタマイズまとめページに戻る