ホームページ制作・SEO対策を通じて集客向上↑売上UP↑ならCyberAccel-Advisors

   投稿日: 2016/01/22    投稿者:webコラム

こんにちは！ライターのモモタロウです。
今回は、FC2ブログで夢のような背景画像と背景色をカスタマイズしてみましょう！

FC2ブログの背景色を変えるには？

ブログ全体の背景を変えるには、（スタイルシート）を少し変更すれば簡単にできます。だけど、どういった背景画像、背景色にするのか？結構悩みませんか？


ブログ全体の色を変えるだけで、ブログそのものの印象が変わったりします。

印象が変われば、ブログの好感度が夢のようにアップするかもしれません！

では、最初にブログの背景色を変更する方法をご紹介しますね。

FC2ブログにログインし、管理画面に入ったら、テンプレートボタンをクリックします。

テンプレート設定のところで下の方に↓のようなスタイルシートの編集ができるようになっている部分があります。

今回は全体の背景色を変更します。
「basic_white」という今回の初期設定されているテンプレートでは「container」部分を変更すると、全体の背景が変わるようになっていますので、ここを編集します。

テンプレートの種類や変更したい部分によって、スタイルシートの記載場所は変わります。

変更したい箇所が見つからない場合は、スタイルシートの編集の中にカーソルを入れて、「Ctrl＋F」キーを押すと、検索窓（小窓）が出てくるので、そこに「background-color」と入力して探してみてください。変更したいパーツの箇所にその記述があれば、色の値を変えるだけで、変更したい箇所の背景色を変更することができます。


カラーチャートはここがお勧めです！→4096 Color Wheel
あらゆる種類の色が選べます。

FC2ブログで背景画像を変更する方法

次に、背景画像を変更する方法をご紹介します！


選ぶ背景画像によっては、ブログそのもののイメージがガラッと変わることがあります。

背景画像は皆さんの感覚やお好みによって変わると思います。
まずはブログで何を見せたいか？によって画像を選ぶ必要があるでしょう。

画像の用意はできましたか？



今回はこの画像を使用します。


背景色を編集したときと同じように、スタイルシートを編集します。

▼元の状況はこちら（何もないまっさらな状態です）▼




背景色の変更と同じように、変更したい箇所を探し、「background-image:url("http://～")」のURL（"http://～"）の部分を変更します。

今回は「container」という箇所を編集してみます。

もしなければ、以下の記述を追加してみましょう。

background-image:url("http://～");

↑のように、("http://～")部分に表示したい画像URLを入れれば、ブログの背景に繰り返し表示されます。


【設定したい画像URLはどこを見ればわかる？】
"http://～"に入れたい画像URLは、管理画面左サイドの「ファイルアップロード」よりFC2ブログに画像をアップロードしてから、そのURLをコピーして貼り付けることで可能です。

↑上記のようにアップロードを行った後、下の方に移動してみてください。
アップロードして頂いた画像があるはずです。

その画像右の「ファイル情報」にある画像URLをコピーして先程の箇所に貼り付ければOKです。

気をつける点がいくつかあります。


・CSS（スタイルシート）を編集して更新して戻せなくなる可能性がありますので、必ずバックアップをとっておくこと

・重たい画像を背景にすると表示速度が遅くなる可能性があります！

・FC2無料版は2MB超の画像はアップロードできません！

・著作権で保護されている画像は基本的には使用できません！



以上のことに注意して、早速背景に画像を設定しましょう。


背景画像及び背景色の変更方法は以上です。

だいぶイメージが変わったのではないでしょうか。

個性豊かな背景色と背景画像の変更でブログの発信力アップ！

背景色を指定したい場合は「background-color:色の値;」、背景画像を指定したい場合は「background-image:url（画像URL）;」を変更・追加するだけです。

どの部分を変更したいかによって、CSSの記述場所が異なると思いますが、行うことは同じです。

テンプレートにどの部分のパーツかなどの説明文も書いてあることが多いので、それを参考にしながら探して、編集すれば大丈夫です。
ブログのイメージチェンジを夢見ている人はぜひチャンレジしてみてください！