TwentyTwelve・全体のカスタマイズ

wordpress-twentytwelve-whole

コンテンツ全体、記事やサイドバーの幅の調整をする

TwentyTwelveの初期状態ではコンテンツ全体の横幅が960pxに設定されている。

それぞれの幅の大きさを見ていくと、

  • コンテンツ全体:960px
  • 記事の部分:625px
  • サイドバーの部分:250px
  • 中間の余白:85px

という割合になっている。

しかしこれではコンテンツ全体が大きすぎて右側と左側の余白部分が画面からはみ出してしまう。そこでこのように変更してみようと思う。

  • コンテンツ全体:860px
  • 記事の部分:540px
  • サイドバーの部分:300px
  • 中間の余白:20px

幅の割合を計算する

設定にはパーセントを使用するので計算する必要がある。

  • 記事の部分がコンテンツ全体に占める割合(パーセント)を算出する。
    540÷860×100=62.79069767(%)
  • サイドバーの部分がコンテンツ全体に占める割合(パーセント)を算出する。
    300÷860×100=34.88372093(%)

これで全ての数字が揃った。

幅の調整をするコードを書き込む

コンテンツ全体と記事とサイドバーの幅の調整にはstyle.cssを使用する。style.cssの下部にこのコードを追加しよう。念のためIE8対策のコードも入れてある。

/* 幅変更 */
@media screen and (min-width: 600px) {
.site {max-width: 860px;}
.widget-area {width: 34.88372093%;}
.site-content {width: 62.79069767%;}
}
/* 幅変更IE8対策 */
@media screen and (min-width: 600px) {
.ie8 .site {max-width: 860px;}
.ie8 .widget-area {width: width: 34.88372093%;}
.ie8 .site-content {width: 62.79069767%;}
}

背景色を変更する

wordpressのサイトはコンテンツ、サイドバー、ヘッダー、フッターというパーツに分かれている。それぞれの背景の色の調整をしていく。

コンテンツ、サイドバー、ヘッダー、フッターの背景色を変更する

背景の色の変更にはstyle.cssを使用する。以下のコードをstyle.cssの下部に追加しよう。

/* コンテンツ背景色 */
.site-content { background: #B40486;} /* ピンク色 */
/* サイドバー背景色 */
.widget-area { background: #08088A;} /* 青色 */
/* ヘッダー背景色 */
.site-header{ background: #01DFD7;} /* 水色 */
/* フッター背景色 */
footer[role="contentinfo"]{ background: #298A08;} /* 緑色 */

分かりやすくコンテンツ、サイドバー、ヘッダー、フッター、それぞれを色分けしてみた。ピンクがコンテンツ部、青色がサイドバー部、水色がヘッダー部、

wordpressの背景色の変更

そして緑色がフッター部だ。どのように表示されるか確認して欲しい。

wordpressの背景色の変更

さて、ここで問題が1つある。背景色を変更したのはいいが、白い余白が目立つと思う。これはヘッダー、フッター、コンテンツ、サイドバー、それぞれの間に余白があるからだ。

この余白部分の色も調整してみよう。そのためにはページ背景色を変更する必要がある。

ページの背景色を変更する

先ほどのコードを削除して下のコードをstyle.cssの下部に追加しよう。

/* ページ背景色 */
.site {background: #00ff66;}

こんな風にページの背景色が変わった事を確認できたと思う。

wordpressの背景色の変更

ページ、コンテンツ、ヘッダー、フッター、サイドバーの背景色を変更する

それでは、ページ背景色、コンテンツ、ヘッダー、フッター、サイドバーの背景色を組み合わせてコードを組んでみる。

先ほどのコードを削除して下記のコードをstyle.cssの下部に追加しよう。

/* ページ背景色 */
.site {background: #00ff66;}
/* コンテンツ背景色 */
.site-content { background: #B40486;} /* ピンク色 */
/* サイドバー背景色 */
.widget-area { background: #08088A;} /* 青色 */
/* ヘッダー背景色 */
.site-header{ background: #01DFD7;} /* 水色 */
/* フッター背景色 */
footer[role="contentinfo"]{ background: #298A08;} /* 緑色 */

これで白い余白が、変更したページ背景色に変わったはずだ。

wordpressの背景色の変更

タイトル部分や見出し部分、サイドバーの色の調整は、

TwentyTwelve・記事部分のカスタマイズ

の”記事タイトルの調整“、”見出しの調整“、

TwentyTwelve・パーツ部分のカスタマイズ

の”サイトタイトルの調整“、”サイドバータイトルの調整“、”サイドバーの調整“、

で解説しているので参考にして欲しい。

背景に画像を挿入する

また、背景に画像を挿入する場合は下記のコードをstyle.cssの下部に追加しよう。※”http://アップロードしておいた画像URL“にはアップロードした画像のURLを入力しよう。

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

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

/* サイドバー背景画像 */
.widget-area {
background-image:url(http://アップロードしておいた画像URL);
background-repeat:repeat;
}

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

/* フッター背景画像 */
footer[role="contentinfo"]{
background-image:url(http://アップロードしておいた画像URL);
background-repeat:repeat;
}

また、ページ枠の外側のねずみ色の部分の色の調整も可能だ。

ページ枠の外側の背景色を変更する

管理画面で”外観“を選択して”背景“をクリックすると”カスタム背景“というページが開く。そのページの”背景色“という項目で色の設定をする。するとページ枠外側が設定した色に変わる。

wordpressの背景色の変更

これで背景の色の設定が完了だ!

背景の色は最初は調整しなくても良い。wordpressに慣れてきて、自分のサイトにオリジナリティを出したい時に背景色を自由にカスタマイズしてみて欲しい。

ページ上下の余白の調節をする

body .site {margin-top: 0px;margin-bottom: 0px;}

このようにするとページ上下の余白が無くなる。
px値を自由に変更して、
自分のデザインに合った余白に設定して欲しい。