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


賢威のサイトのみならず、ウェブサイトの背景色は基本的には白であることが多いです。字の読みやすさを考えると、背景色は白にした方がいいのです。

また、背景に画像を差し込んでいるサイトもあります。こちらの方法についても解説します。

賢威のデフォルトの背景色は白ですが、これを変更したい時はCSSファイルのコードを変更します。

賢威の背景色を変更する

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

1

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

2

このようだったのが、

3

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

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

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

ヘッダー領域の背景色を変更する

4

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

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

5

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

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

6

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

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

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

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

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

まずは、背景となる画像をワードプレスのメディアにアップロードしてください。アップロードする画像は大きめの方がいいです。今回は例として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. 天慈 より:

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

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

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

    • ヒデアキ より:

      天慈さん

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

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

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

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

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

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

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

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

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

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

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

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

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

このブログは、

・アフィリエイト開始初月から9万円のネット収入が得られた秘密

アフィリエイト開始2ヶ月目で以前勤めていた会社からの給料と
 同額
のネット収入を確保した方法

・5ヶ月目で月収120万円を達成した最先端テクニック

・これから流行り始めるブログマネタイズの新しい思考法

などを書いています。

只今、ブログの内容をより体系的にまとめたビジネス教科書を
無料でプレゼントしています。

以下のフォームに教科書を受け取るメールアドレスと、
あなたの苗字を記入してプレゼントをお受け取り下さい。





記事一覧


著者:ヒデアキ
現在は、毎月100万円の収入を得ているブログアフィリエイトの知識を活かして「新たな収入源を手に入れ大切な人を守りたい」と真剣に考えている方を全力でサポートしています。
更に詳しいプロフィールはこちら


このページの先頭へ