ワードプレステンプレート賢威の背景色の変更と画像を挿入する方法


賢威のサイトのみならず、多くのウェブサイトは背景色を変更したり、背景に画像を挿入したりして、ブログをオリジナルにデザインしています。

賢威のテンプレートでこのような設定をするには、要素ごとに背景色を指定したり、背景画像の設定が必要です。

なので、今回は賢威7と賢威6.2のテンプレートで、背景色を変更したり、背景画像を挿入する方法について解説します。

賢威7の背景色の変更と、背景画像を挿入する方法

まずは、賢威7の背景色と、背景画像を挿入する方法について解説します。

背景色や背景画像を変更前は、以下のようになっています。

賢威7 背景色 背景画像 デフォルト

賢威7の背景色を変更するには、

ワードプレスのダッシュボード→外観→テーマの編集→base.css

の順番にクリックし、base.cssのファイルを開きます。

base.cssのファイルを開きましたら、『賢威テンプレートの共通設定』の項目にあるbodyの部分を探します。

以下の赤枠で囲っている部分です。

賢威7 base.css body要素

上記の箇所を見つけましたら、そこに以下の一文を書き加えます。

background-color: #○○○

『#○○○』の部分は、色見本を参考に好みのカラーコードを入力します。

今回は一例として、黄色のカラーコード『#ff0』を使用します。

『background-color: #○○○』の一文を書き加えると、以下のようになります。

賢威7 body要素 背景色

このように、CSSの編集をすることで、さきほど真っ白だった背景色が、以下のように黄色に変化します。

賢威7 サイト背景色 黄色

ひとまずこれで全体の背景色を変更することができました。

続いて、背景に画像を挿入する方法について解説します。

背景画像を挿入するには、先の背景色と同じで『賢威テンプレートの共通設定』の項目にあるbodyの部分を編集します。

賢威7 base.css body要素

上記画像にある、bodyの中に、以下のCSSコードを書き加えます。

background: url(画像のURL) center center repeat;
background-attachment: fixed;}

書き加えると以下のようになります。

賢威7 背景画像 挿入

(画像のURL)の部分に、アップロードした画像のURLを入力することで、背景に指定した画像が表示されるようになります。

『center center repeat』は、画像の表示位置と、画像を上下方向に繰り返しの表示を指定するCSSコードです。

『background-attachment: fixed』は、画像の固定を意味するCSSコードです。

CSSコードの文字色や背景に関しては、CSSリファレンスを見ることで理解が深まります。

上記のコードを書き加えると、ブログの表示は以下のようになります。

賢威7 背景画像 変更

これで、背景画像の挿入は完了です。

ただ、このままではメインコンテンツ(記事本文が表示される)エリアやサイドバーにも、指定した背景色や背景画像が表示され文字が見づらいです。

なので、次に

・ヘッダー

・メインコンテンツ

・サイドバー

などの、背景色を変更します。

それぞれの方法について解説します。

賢威7のヘッダーの背景色を変更する方法

ヘッダーの背景色を変更するには、base.cssの中にある以下の項目を探します。

賢威7 base.css header要素

上記画像の『.site-header-conts』の1行上に、以下のCSSコードを書き加えます。

.site-header{
background-color: #○○○;
}

上記のCSSコードを書き加えると、以下の赤枠のようになります。

賢威7 header要素 追記

『○○○』の部分は、色見本を参考に好みのカラーコードを入力します。

今回は一例として、白色のカラーコード『#fff』を使用します。

ブログの表示は以下のように、ヘッダーの部分の背景色だけが白色に変わります。

賢威7 ヘッダー 背景色 白

これで、賢威7のヘッダー部分の背景色を変更することができました。

賢威7のメインコンテンツの背景色を変更する方法

次は、メインコンテンツの背景色を変更します。

メインコンテンツの背景色も、これまでと同様にbase.cssを編集します。

賢威7 base.css メインコンテンツ

上記画像の『line-height: 1.8;』と書かれている、すぐ下に以下のCSSコードを書き加えます。

background-color: #○○○;

上記のCSSコードを書き加えると、以下のようになります。

賢威7 メインコンテンツ 背景色

メインコンテンツは、記事本文が表示される場所になりますので、見やすいように白色のカラーコード『#fff』を使用します。

もちろん、白色以外の背景色に変更することも可能です。

白色以外の背景色にする場合は、これまでと同様に、『○○○』の部分に、好みのカラーコードを入力します。

ブログの表示は以下の画像のように、メインコンテンツの部分の背景色が白色に変わります。

賢威7 メインコンテンツ 背景色 変更

これで、賢威7のメインコンテンツの背景色を変更することができました。

賢威7のサイドバーの背景色を変更する方法

最後に、サイドバーの背景色を変更します。

サイドバーの背景色も、これまでと同様にbase.cssを編集します。

賢威7 base.css サブコンテンツ

上記画像の『border: none;』と書かれている、すぐ下に以下のCSSコードを書き加えます。

background-color: #○○○;

上記のCSSコードを書き加えると、以下のようになります。

賢威7 サブコンテンツ 追記サイドバーも見やすいように白色のカラーコード『#fff』を使用します。

もちろん、サイドバーも白色以外の背景色に指定することが可能です。

ここまでで、賢威7の

・ブログ全体の背景

・ヘッダーの背景

・メインコンテンツの背景

・サイドバーの背景

を変更しました。

全てを変更すると、以下のようになります。

賢威7 背景色 背景画像 変更

以上が、賢威7の背景色の変更と、背景画像を挿入する方法です。

今回は、ブログ全体の背景を設定してから、個別にヘッダーの背景、メインコンテンツの背景、サイドバーの背景という順番に背景を変更しました。

ただ、「ブログ全体は白のままでいいから、○○の背景だけを変えたい」ということもあります。

その場合は、ブログ全体の背景は初期状態のままで、ヘッダーやメインコンテンツ、サイドバーなどの背景だけを、個別に変更します。

そうすると、変更した部分の背景色だけの変更が可能です。

賢威6.2の背景色を変更する方法

続いて賢威6.2で背景色を変更したり、背景画像を挿入する方法について解説します。

まずは、賢威6.2の背景色を変更する方法について解説します。

賢威6.2の背景色を変更するには、ワードプレスのダッシュボード→外観→エディター→design.cssに進みます。

1

そしたら、上の画像にある赤枠の部分「fff(白)」を変更します。ここの色のコードは「色見本のサイト」で確認し、好きな色のコードに書き換えて下さい。その後「ファイルを更新」をクリックして保存し、トップページに戻ります。

2

このようだったのが、

3

このように、メニュー以下の領域の色が変わりました。今回は分かりやすいように「ff0(黄色)」にしてみました。

ですが、ヘッダー領域の色は「fff(デフォルト背景色の白)」のままです。

ここはヘッダー領域の背景色を出力している「background-color」を変更することで反映出来ます。

賢威6.2のヘッダー領域の背景色を変更する方法

4

design.cssファイルから、上の画像の赤枠の部分を探して下さい。「サイト全体の背景設定」のすぐ近くにあります。

そしたら、やり方は先ほどと同じです。色のコードを入力して「ファイルを更新」をクリックして保存し、トップページに戻ってみます。

5

この様になっていればOKです。

ちなみに、design.cssファイル内で、「グローバルナビ」という部分があります。

6

ここの「background-color」を変更すると、メニューの背景色が変わります。

この様に、賢威の背景色を変更するには、この「background-color」を変更することで反映出来ます。

稀に正しく設定してもすぐに反映されないことがあります。その場合はグーグルクロームのシークレットウィンドウでサイトにアクセスするか、サイトのページを更新することで反映されます。

賢威6.2の背景に画像を設定する方法

続いて、賢威の背景に画像を設定する方法です。

まずは、背景となる画像をワードプレスのメディアにアップロードしてください。アップロードする画像は大きめの方がいいです。今回は例として1920px×1200pxの海の画像をアップロードしました。

そしたら、design.cssのサイト全体の背景設定に行きます。

賢威背景画像挿入画像1

ここの#container{ background-color: #fff;}のうち、末尾の;}を消して、次のようにコードを入力します。

賢威背景画像挿入画像2

抜き出したコードがこちらです。

#container{ background-color: #fff!important;
background: url(画像のURL) center center no-repeat;
background-attachment: fixed;}

画像のURLに、アップロードした画像のURLを入力します。これを入力したら、一旦保存してトップページを確認します。

賢威背景画像挿入画像3

このようになっていればOKです。

ただし、このままではコンテンツ内およびサイドバーの文字が見えなくなってしまいます。

賢威背景画像挿入画像4

サブコンテンツエリアもこの通りです。なので、コンテンツとサイドバーの背景色を設定していきます。

まずは、メインコンテンツエリアの背景色を設定していきます。

賢威背景画像挿入画像5

ここにbackground-color: #fff;(白)を書き足します。

賢威背景画像挿入画像6

このようになればOKです。

続いて、サイドバーとサブコンテンツエリアです。

賢威背景画像挿入画像7

サイドバーとサブコンテンツは同一のコードで指定されていますので、ここを変更することで両方に反映されます。そしたら、ここも同様にbackground-color: #fff;を書き足します。

賢威背景画像挿入画像8

このようになります。できたら、保存してトップページに行って確認します。

賢威背景画像挿入画像9

メインコンテンツとサイドバーの背景色が白くなり、

賢威背景画像挿入画像10

サブコンテンツエリアの背景色も白くなりました。

このようになればOKです。

次ページ

12次

    

感想・質問コーナー

  1. パトモス より:

    ネトレピ様
    賢威7.0でWordPressをカスタマイズしている初心者です。

    大変分かりやすい記事で助けていただいています。
    本当にありがとうございます。

    ところで質問ですが、
    背景色などのコードを自分なりに変更しているのですが、
    プレビューしてもその変更が反映されません。

    もちろん「ファイルの更新」をクリックしているのですが。

    どこに原因があるのでしょうか。
    以前はチャンと変更が反映されていたのですが。
    「非公開」にしているのが原因なのでしょうか。

    お教えいただければ助かります。

    ご多用中大変恐縮ですが、よろしくお願い申し上げます。

    パトモス

    • ヒデアキ より:

      パトモスさん

      こんにちは、ヒデアキです

      メッセージありがとうございます

      カスタマイズ後の確認方法は、その方法であっています。

      ですので、背景色などのコードを変更して、
      それがデザインに反映されていない場合は、
      コードの変更箇所が正しくない可能性があります。

  2. 天慈 より:

    すばらしいアップをありがとうございます
    分かりやすかったです

    賢威のヘッダーの文字の上にサイトマップの付いている帯がありますよね、
    この部分の色を変えるにはどこをいじればいいのでしょうか?

    賢威は標準だとしょぼいデザインですからどうしてもカスタマイズが必要ですよね。

    • ヒデアキ より:

      天慈さん

      メッセージありがとうございます。

      サイトマップの帯を変えるには、
      ダッシュボード→外観→テーマの編集→design.css
      へ移動して頂き、以下のコードを見つけて下さい。

      /*——————————————————–
      トップ
      ——————————————————–*/

      #top{
      position: absolute;
      top: 0;
      background-color: #ffffff;
      color:#000000;
      font-size: 1.2em;
      }

      ここのコードの、
      background-color: #ffffff;
      の#ffffffを変えれば色が変わります。

      色は「html 色見本」と検索して頂ければ、サンプルが見えます。

      また何かありましたらメッセージして頂ければと思います。

今回の記事はお役にたてましたでしょうか?

もし、今回の記事を読んで感想や分からない事などありましたら、下のフォームよりお伝え下さい。

些細な事でも構いません。

おそらく、あなたが抱いた疑問は、これからこの記事を読む方も抱く疑問です。

そういった疑問を1つ1つ解決していきます。

コメントして頂ければ気づき次第、すぐに回答いたします。



総合案内

著者情報
著者情報
年収1000万円まで守る2つの事
年収1000万円まで守る2つの事
読者さまの声
読者さまの声
もくじ
もくじ
超初心者講座
超初心者講座
ブログ基礎講座
ブログ基礎講座
トレンドブログ講座
トレンドブログ講座
パワーブログ講座
パワーブログ講座
マインドセット
マインドセット
コピーライティング
コピーライティング
ブログアフィリエイト
ブログアフィリエイト
トレンドアフィリエイト
トレンドアフィリエイト
ネットビジネス
ネットビジネス
SEO
SEO
コラム
Googleアドセンス
Googleアドセンス
与える事に徹する
与える事に徹する
先生の選び方
先生の選び方
Googleアドセンスの始め方
Googleアドセンスの始め方
賢威カスタマイズ
賢威カスタマイズ
このブログについて
このブログについて
女性のブログアフィリエイト
女性のブログアフィリエイト
そもそものステップが違う
そもそものステップが違う
中高年の方はシンプルな方法がお勧め
中高年の方はシンプルな方法がお勧め

このページの先頭へ