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

9 comments

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

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

スポンサーリンク
スマートフォン買取

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

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

タイトル-4

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

TwentyTwelveの背景を変更する場所

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

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

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

コンテンツの外側の背景

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

背景-2

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

背景-3

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

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

背景-4

この部分は子テーマのスタイルシート(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」

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

背景-5

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

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

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

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

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

背景-7

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

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

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

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

背景-8

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

ヘッダーの余白

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

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

ヘッダーの余白-1

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

おすすめのASP

⇒もしもアフィリエイトの登録や使い方
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

広告
【無料】キーワード選定に特化した無料教材＆動画「キーワード無双」
広告
【期間限定無料】一億円ブロガーの電子書籍「自由な人生を手に入れる教科書」

ブログの更新はこちらから

アフィリエイトで稼ぐ方法を全部話そうと思う

関連記事

“TwentyTwelveの背景色を変更するカスタマイズ”に9件のコメントがあります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. okinagatarashi

    しげぞう様
    本当にありがとうございます。
    明日、早速やってみます。
    本当にありがとうございます。

    いつも面倒を言います。これからも見捨てず居て下さい。
    きっと直ぐ、泣きつきHELP！です。
    これからもよろしくお願いします。

  2. しげぞう 投稿作成者

    okinagatarashi様

    良かったです！私も嬉しいです。えっとですね、まず背景画像の上の文字ですが、paddingで調整できます。ここには４つの数字があり、時計まわりに上、右、下、左の順番に余白を指定できます。例えば文字をもっと右にずらしたい場合には左に余白を作ればいいので、4つ目の数値を大きくすればその分右に移動します。

    それから今回は「div class=”colorbox”」という名前を付けてスタイルシートで装飾しました。なので、別の部分で別の画像を使う場合にはここの名前を変更してスタイルシートで同じように装飾すればOKです。背景画像だけ変えるとか。

    例えば「div class=”nextbox”」と名付ければスタイルシートに「.nextbox { ●●;}」のようにやっていく感じです。

  3. okinagatarashi

    しげぞう様
    お世話になります。
    出来たよ！！いつも感激します。
    あなたはすごい！！ポンコツ小躍り連発中！！
    ほんとにありがとうございます！！ほんとに何かお礼をさせて下さい！！

    背景画像に文字を載せる位置は指定できますか？
    padding:10px 10px 10px 10px;　の　px　の数値の変更でいいのでしょうか？

    他のページでは他の画像を使いたい時はどうしたらいいですか？

    宜しくお願いします。

  4. しげぞう 投稿作成者

    okinagatarashi様

    返信ありがとうございます。確認できました。えっとですね、先ほど追加されたCSSですが一度削除してもらって、次のコードを追加して下さい。

    .colorbox {
background-color:#ccc;
background-image:url("画像のURL");
padding:10px 10px 10px 10px;
max-width:300px;
height:300px;
color: #fff;
}

    前回のは多分１つ１つコメントを付けた部分にミスがあったと思いますので、今回は説明メモのコメントは付けてません。新たに横幅（max-width）と高さ（height）を追加してますので、使われる画像の幅や高さに合わせて変更をして下さい。それとcolorは文字色です。

    一度これで試して確認をしてみて下さい。

  5. okinagatarashi

    しげぞう様
    早々にご返信ありがとうございます。ポンコツがどっかおかしな事したに決まってますが、
    私のお知らせ事項に不備があります。

    前のURLでなく、テスト用URLで、且つ、下書きでやってました。が、先ほど公開しました。
    oneday　と　onedays　のdaysの方がテスト用でした。
    こちらをお知らせしてなかったと思います。
    本当にありがとうございます。宜しくお願いします。

  6. しげぞう 投稿作成者

    okinagatarashi様

    返信ありがとうございます。okinagatarashi様のサイトを確認させて頂いたのですが、子テーマのスタイルシートに「colorbox」の記述がありませんね。「colorbox」のCSSの記述を別の所に書いているという事はないでしょうか？一度確認してみて下さい。もしかすると反映されなかったで一度削除してます？

    それと背景を入れる時、入れない時など対処はできますが、とりえず上記が上手く反映されるか確認されて下さい。またできない場合にはスタイルシートの記述はそのまま残した状態で返信してもらえると助かります。

  7. okinagatarashi

    しげぞう様
    お世話になっています。
    ご返信をありがとうございます。

    固定ページ「HTML」に

    tesuto tesuot tesut　　(→適当な文書)

    保存

    子テーマのスタイルシートに
    .colorbox {
    background-color:#ccc; /* 背景色 */
    background-image:url(“画像のURL”); /* 背景に画像を使う場合 */
    padding:10px 10px 10px 10px; /* 中身の文字の余白 */
    }
    保存
    でやってみましたが、ビジュアル、プレビュー共「 tesuto tesuot tesut 」の文字だけで背景画像は出ませんでした・・・
    あるページに背景は入れる時、入れない時、入れる画像が其々違う事も出来ますか？
    ムリな質問でごめんなさい。宜しくお願いします。

  8. しげぞう 投稿作成者

    okinagatarashi様

    コメントありがとうございます。そうですね、記事の一部だけ背景色とか背景画像を変えるというのは可能です。

    記事の投稿をする時に「ビジュアル」と「テキスト」でエディタを切り替える事ができますよね、これをテキストエディタに切り替えて記事中に次のコードを入れて下さい。

    <div class="colorbox">
ここに中身を入れる
</div>

    中身は何でもいいです。適当にテキストを入れて一度保存して下さい（下書きでもOKです）。

    保存ができたらスタイルシートに以下のコードを追加します。

    .colorbox {
  background-color:#ccc;  /* 背景色 */
  background-image:url("http://アップロードしておいた画像URL");  /* 背景に画像を使う場合 */
  padding:10px 10px 10px 10px;  /* 中身の文字の余白 */
}

    背景に画像を使う場合には事前にメディアから画像のURLを調べておいて下さい。余白の部分は時計まわりに「上、右、下、左」の順番で余白を設定できます。この例では10pxの余白にしてます。これで保存して、再度投稿で保存した記事を確認してみてください。

  9. okinagatarashi

    しげぞう様
    こんにちは！お世話になります。
    固定ページや投稿ページのある1ページにコンテンツ部分に背景画像を入れる方法って、
    ないですか？テーブルに背景を入れるのはどこかで見つけて出来たのですが
    罫線なしってわけにはいかないんでしょうか？

    新型HELP！宜しくお願いします。