FC2ブログの背景色及び背景画像の設定

FC2ブログでは、「HTML」及び「CSS」を編集することで、ブログの背景色及び背景画像を変更することができます。編集もそれほど難しいことではありません。

テンプレートによって編集箇所が若干異なりますが、やることは同じです。

編集前に用意する物

背景に画像を設定したい方は、画像を用意して下さい。
背景色を変更するだけなら、何も用意する必要はありません。

今回は、piapro(ピアプロ)|るみあさんのページの初音ミク画像を使わせて頂きます。

全力で!by るみあ

全力で!by るみあ

ピアプロについては下記記事を参考にして下さい。

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

2013.05.31

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

編集の流れ

管理画面より「テンプレート」の設定をクリック

FC2ブログ テンプレートの編集

FC2ブログ テンプレートの編集

テンプレートを複製する

くどい様ですが、テンプレートの編集は必ず複製してから行って下さい。

テンプレートの複製

テンプレートの複製

スタイルシート(CSS)を編集する

編集するテンプレートを確認し、画面一番下の「スタイルシート編集」で作業を行います。

編集するテンプレートを確認

編集するテンプレートを確認

編集する箇所

編集する箇所はスタイルシートの「body」の部分です。

見つからない場合は「Ctrl+F」を押して「body」で検索して下さい。

背景色及び画像の変更はbodyに定義します

背景色及び画像の変更はbodyに定義します

後は、ここに背景の設定を追加するだけです。

背景色を変更する

今回のテンプレートの場合、初期設定では黒色の背景色が設定されています。

テンプレート初期設定では背景は黒単色

初期設定の背景色「黒」

この背景色を白に変更したい場合は下記の一行を追加します。

編集した後の「body」のCSSは下記の様になっています。

背景が白くなりました。

背景色を白色に変更

背景色を白色に変更

カラーコードについては、HTML,CSS カラーコード一覧表 | 背景色や文字色の設定を参考にして下さい。既に「background-color」が定義されている様な場合は、カラーコード「#○」の部分のみ変更して下さい。

背景画像を設定する

背景画像をアップロードします。

FC2ブログに画像をアップロード

FC2ブログに画像をアップロード

画像URLをコピーします。

画像URL

画像URLをコピー

背景画像を設定したい場合は下記の一行を追加します。

※「http://…miku.jpg」の部分にはアップロードした画像URLを入力して下さい。

編集した後の「body」のCSSは下記の様になっています。

背景に画像が挿入されました。

背景画像を設定

背景画像の挿入

背景に画像を設定する際のポイント

小さな画像を設定するとどうなるのか?

先程の画像を横幅300pxの小さな画像にして背景画像に設定してみます。

小さい画像を設定した場合

小さい画像を設定した場合

何も定義しなければ、画面左上を起点に右と下に向かって繰り返し表示されます。繰り返し表示させたくない場合は、下記のプロパティと値を追加します。

画面左上に一つだけ画像が表示されます。

no-repeatで画像が一つしか表示されなくなります

no-repeatで繰り返さない

また、水平方向だけ並べたい時は「background-repeat: repeat-x;」、垂直方向だけ並べたい時は「background-repeat: repeat-y;」を指定します。

表示位置を変更したい場合

下記のプロパティと値で指定します。

※「値」の部分には表示させたい位置を入力します。

使える値については、スタイルシート[CSS]/プロパティ一覧/background-position プロパティ – TAG index Webサイトを参考にして下さい。

例えば、画面右上に配置したい時は、「background-position: right top;」を追加するだけです。

background-positionで背景画像の位置を調整

background-positionで背景画像の位置を指定

繰り返し表示する際の起点となる位置の指定に使うこともできます。

背景画像の固定

下記のプロパティと値で指定します。

この設定はかなり印象が変わります。どんなに画面をスクロールさせても背景画像は固定されます。

画面をスクロールさせたも背景画像は固定されている

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

※初期設定は、固定しない「background-attachment: scroll;」になっています。

ストライプ柄を背景に使ってみる

今まではイラスト画像を使いましたが、背景画像は繰り返し表示されますから、ストライプ柄や格子柄を背景画像に設定することも可能です。

例えば、下記の様な小さな画像を背景画像に設定してみます。

stripe

ストライプ画像

実際のサイトでは下記の様に表示されます。

背景画像にストライプ柄

背景画像にストライプ柄を設定

興味のある方は、下記サイト(海外サイト)で無料配布されているので覗いてみて下さい。

最後に

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

無駄に長くなってしまいましたが、背景色を指定したい場合は「background-color: 値;」、背景画像を指定したい場合は「background-image: url(画像URL);」を「body」に追加するだけです。また、表示方法や位置もカスタマイズできます。

テンプレートによっては編集箇所が若干異なると思いますが、やることは同じです。

難しい編集ではないと思いますので、興味のある方は是非挑戦してみて下さい。

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