この記事の所要時間: 432

賢威7の全体背景の色を変更する方法について画像と動画で徹底解説

賢威7の背景カラーを変更する前に


賢威7のブログ全体背景色は初期設定の状態ですと白が基調になっているので非常にシンプルなのですが、これだとメリハリがなくデザイン的に少し寂しい印象を受けます。

そこで背景色を変更することにより、全体的な見栄えに強弱を付けてメリハリのあるデザインのブログに仕上げていきましょう。

賢威7で背景色を変更するには、直接ソースコードを変更しなければなりませんが、CSS(スタイルシート)にソースコードを追加するだけなので非常に簡単です。

しかし気をつけなければならない点もありますので、今回はそのあたりを詳しく解説しながら背景色の変更方法をご紹介していきます。

もし賢威をまだお持ちでない場合には、私も賢威を特典付きでご紹介しておりますので、是非とも下記のページをご覧ください。


これまで3年間で8回も賢威を大幅にリニューアルしたり、賢威のカスタマイズに関して、200名以上の方をサポートをしてきた実績から、賢威のサポートなら誰にも負けない自信があります。


あなたも賢威のカスタマイズを本気で極めてみませんか?


それでは賢威7の全体背景の色を変更する方法について詳しく解説していきます。

賢威7の全体背景の色を変更する方法


賢威7の全体背景の色を変更する方法はダッシュボードの左側メニュー一覧にある【外観】にマウスを合わせ、そこに表示される【テーマの編集】をクリックしてください。

※クリックで画像が拡大します。
賢威7の全体背景の色を変更する方法について画像と動画で徹底解説

次に右側のソースコード一覧から【bace.css】をクリックして、ソースコードの編集画面を開きます。

※クリックで画像が拡大します。
賢威7の全体背景の色を変更する方法について画像と動画で徹底解説

編集ページを開いたら、そのままソースコード最下部までスクロールして、以下のソースコードをコピーして【bace.css】に追加しましょう。

body {
    background: #ccffcc;
}

.main-conts .section-wrap {
    background: #fff;
}
.sub-conts .section-wrap .section-in {
    background: #fff;
}

※クリックで画像が拡大します。
賢威7の全体背景の色を変更する方法について画像と動画で徹底解説

ソースコードを追加したら【ファイルを更新】をクリックして、ブログをチェックしてみると、背景色が変更されているはずです。

ちなみに先ほど追加したソースコードは、それぞれ意味があり、

body {
    background: #ccffcc;
}

これが全体の背景色を変更するためのソースコードなのですが、これだけで変更してしまうと、記事本文やサイドバーのカラーも全て変更してしまうため、今までと同じくメリハリのないデザインになってしまいます。

そこで次のソースコードを合わせて追加するのですが、

.main-conts .section-wrap {
    background: #fff;
}
.sub-conts .section-wrap .section-in {
    background: #fff;
}

まず【main-conts】が記事本文の背景色を変更するためのソースコードで、その下にある【sub-conts】がサイドバーの色変更をするためのソースコードなのです。

つまり、全体の背景色を変えるだけでなく、記事本文とサイドバーの背景色は白のまま残しておくことで、メリハリのある見やすいデザインになります。

背景色の色は何でも構いませんので、下記のリンク先にあるカラーコード一覧から好きなカラーコードをコピーして上書きしてください。

カラーコード一覧

これで記事本文とサイドバー以外の全体の背景色を変更することができました。

※クリックで画像が拡大します。
賢威7の全体背景の色を変更する方法について画像と動画で徹底解説

賢威7の背景の色を変更する方法を動画で解説


それでは賢威7の全体背景の色を変更する方法を動画で詳しく説明していきます。

賢威7の全体背景の色を変更する方法


賢威7の全体背景の色を変更する方法まとめ


賢威7で背景色を変更するときは、記事本文とサイドバーの背景色を別に変更することが非常に重要なポイントです。

せっかく背景の色を変更しても、全てが同一色になってしまったら、それこそカスタマイズをした意味がありませんので、くれぐれも気をつけてください。

ただ、背景の色にメリハリを付けることで、かなり見やすいデザインになることは間違いないことなので、是非とも背景の色を変更してみましょう。

他にも賢威7のカスタマイズ方法を動画と画像で徹底的に解説していますので是非ともご覧いただき、あなたの賢威7カスタマイズにお役立てください。


賢威7のカスタマイズ方法を画像と動画で徹底解説


本日も最後までお読みいただきありがとうございました!

【完全無料】話題沸騰の史上最強の初心者向け企画!
アフィリエイト初心者のための覚醒メールセミナーNEO

分からないことは今すぐに解決してください!
ネットビジネスで分からないことをナオトに質問する

よく読まれている関連記事をご紹介します!