ホームページ制作、SEO対策 サイバーアクセル・アドバイザーズTOP » ブログ » webコラム» FC2ブログカスタマイズ 背景画像・色を変える方法
投稿日: 2016/01/22 投稿者:webコラム
こんにちは!ライターのモモタロウです。
今回は、FC2ブログで夢のような背景画像と背景色をカスタマイズしてみましょう!
ブログ全体の背景を変えるには、(スタイルシート)を少し変更すれば簡単にできます。だけど、どういった背景画像、背景色にするのか?結構悩みませんか?
ブログ全体の色を変えるだけで、ブログそのものの印象が変わったりします。
印象が変われば、ブログの好感度が夢のようにアップするかもしれません!
では、最初にブログの背景色を変更する方法をご紹介しますね。
FC2ブログにログインし、管理画面に入ったら、テンプレートボタンをクリックします。
テンプレート設定のところで下の方に↓のようなスタイルシートの編集ができるようになっている部分があります。
今回は全体の背景色を変更します。
「basic_white」という今回の初期設定されているテンプレートでは「container」部分を変更すると、全体の背景が変わるようになっていますので、ここを編集します。
テンプレートの種類や変更したい部分によって、スタイルシートの記載場所は変わります。
変更したい箇所が見つからない場合は、スタイルシートの編集の中にカーソルを入れて、「Ctrl+F」キーを押すと、検索窓(小窓)が出てくるので、そこに「background-color」と入力して探してみてください。変更したいパーツの箇所にその記述があれば、色の値を変えるだけで、変更したい箇所の背景色を変更することができます。
カラーチャートはここがお勧めです!→4096 Color Wheel
あらゆる種類の色が選べます。
次に、背景画像を変更する方法をご紹介します!
選ぶ背景画像によっては、ブログそのもののイメージがガラッと変わることがあります。
背景画像は皆さんの感覚やお好みによって変わると思います。
まずはブログで何を見せたいか?によって画像を選ぶ必要があるでしょう。
画像の用意はできましたか?
今回はこの画像を使用します。
背景色を編集したときと同じように、スタイルシートを編集します。
▼元の状況はこちら(何もないまっさらな状態です)▼
背景色の変更と同じように、変更したい箇所を探し、「background-image:url("http://~")」のURL("http://~")の部分を変更します。
今回は「container」という箇所を編集してみます。
もしなければ、以下の記述を追加してみましょう。
background-image:url("http://~");
↑のように、("http://~")部分に表示したい画像URLを入れれば、ブログの背景に繰り返し表示されます。
【設定したい画像URLはどこを見ればわかる?】
"http://~"に入れたい画像URLは、管理画面左サイドの「ファイルアップロード」よりFC2ブログに画像をアップロードしてから、そのURLをコピーして貼り付けることで可能です。
↑上記のようにアップロードを行った後、下の方に移動してみてください。
アップロードして頂いた画像があるはずです。
その画像右の「ファイル情報」にある画像URLをコピーして先程の箇所に貼り付ければOKです。
だいぶイメージが変わったのではないでしょうか。
背景色を指定したい場合は「background-color:色の値;」、背景画像を指定したい場合は「background-image:url(画像URL);」を変更・追加するだけです。
どの部分を変更したいかによって、CSSの記述場所が異なると思いますが、行うことは同じです。
テンプレートにどの部分のパーツかなどの説明文も書いてあることが多いので、それを参考にしながら探して、編集すれば大丈夫です。
ブログのイメージチェンジを夢見ている人はぜひチャンレジしてみてください!