FC2ブログに背景画像を設定する方法

FC2ブログに背景画像を設定する方法

FC2ブログに背景画像を設定する方法を紹介します。

基本的にどのテンプレートでもやることは同じですが、テンプレートによって編集箇所が若干異なる可能性もあるので、分からない時は各テンプレートのマニュアルを参考にして下さい。

背景画像を用意する

まず最初に、背景に設定したい画像をSubtle Patterns等からダウンロードして下さい。

もちろん、イラスト等の画像でも構いませんが、あまり容量の大きな画像を使用するとサイトの表示速度が遅くなる可能性があります。また、FC2ブログ無料版では、2MBを超えるファイルをアップロードすることはできません。著作権で保護されている画像も使わないで下さい。

初音ミクのイラストが無料で使える「ピアプロ(piapro)」

2013.05.31

背景画像の設定

背景画像をアップロードする

ブログ管理画面の「ファイルアップロード」をクリックします。

「ファイルアップロード」をクリック

「ファイルアップロード」をクリック

画像を選択して「アップロード」をクリックします。

画像を選択して「アップロード」をクリック

画像を選択して「アップロード」をクリック

ファイル一覧に追加された画像の「画像URL」をコピーします。

画像URLをコピー

画像URLをコピー

背景画像を設定する

ブログ管理画面の「テンプレートの設定」をクリックします。

初めてテンプレートを編集する方は、必ず複製してから作業して下さい。テンプレートを複製しておけば、編集ミスしてレイアウトが崩れても簡単に元に戻すことができます。

「テンプレートの設定」をクリック

「テンプレートの設定」をクリック

スタイルシート編集画面のbody要素に背景画像のプロパティと値を追加して、「更新」をクリックします(見つからない場合は「Ctrl+F」を押して「body」で検索して下さい)。

body要素に背景画像のプロパティと値を追加

body要素に背景画像のプロパティと値を追加

ブログに背景画像が追加されたら設定は完了です。

ブログに背景画像が設定される

ブログに背景画像が設定される

既に背景画像が設定されているテンプレートの場合は、画像URLのみを置き換えて下さい。

基本的にbody要素を編集することで背景画像を設定できますが、テンプレートによっては本文領域と被っていたり、編集場所が異なることもあるので、上手くいかない時は各テンプレートのマニュアルを参考にして下さい(テンプレートによっては編集方法が記載されていることもあります)。

背景画像を固定する

画面をスクロールした時に背景画像を固定させることもできます。

設定は、body要素に下記のプロパティと値を追加するだけです。

body要素に背景固定のプロパティと値を追加

body要素に背景固定のプロパティと値を追加

イラストや写真を背景画像に使った時にサイトの雰囲気が大きく変わります。

fixedで背景画像の位置を固定

fixedで背景画像の位置を固定

位置の指定については、文字の変更・背景の変更 | FC2ブログヘルプを参考にして下さい。

背景色を変更する

body要素に下記のプロパティと値を追加するだけです。

参考:HTMLカラーコード: WEB色見本 原色大辞典

body要素に背景色のプロパティと値を追加

body要素に背景色のプロパティと値を追加

ブログの背景色が変更されたら設定は完了です。

背景色が変更される

背景色が変更される

既に背景色が設定されているテンプレートの場合は、カラーコードのみを置き換えて下さい。

また、背景画像が設定されているテンプレートの場合は、画像が優先されてしまうので、背景画像のプロパティと値を削除する必要があります。

最後に

基本的に背景画像及び背景色の変更は、「body要素」にプロパティと値を追加するだけです。

ポイント
  1. 背景画像は「background-image: url(画像URL);」で追加
  2. 背景色は「background-color: 値;」で指定

ただ、テンプレートによっては編集場所が異なることがありますし、変更しても綺麗に表示されない可能性もあるので、その時は各テンプレートのマニュアルを参考にして下さい。

スポンサーリンク
スポンサーリンク