講師のじょうまさふみのブログです。まとめテンプレートを編集するFC2ブログにログインしたら管理画面より「テンプレート」を押します。背景色を変更するにはテンプレートに手を加えます。編集ミスがあった場合にデザインが崩れた原因がわからず、元に戻せなくなる可能性があります。背景色変更に限らずテンプレートを編集するときには必ず「複製」を行い、元テンプレートの状態を保持したうえで編集するようにしましょう。編集したいテンプレートの「複製」を押します。複製元テンプレートと区別がつくようにテンプレート名を変更しておくと良いでしょう。名称を変更したら、「更新」を押します。複製し名前を変更したテンプレートを編集していきます。「編集」を押しましょう。編集する箇所ブログ背景を変更するには「スタイルシート(CSS)」を編集して行きます。スタイルシートはプロパティと値の組み合わせで定義されます。編集していきましょう。テンプレート管理画面の下に「スタイルシート編集」という箇所があります。編集する箇所は、backgroundプロパティと呼ばれる部分です。スタイルシート内を「background」で検索すると、いくつかヒットすると思います。{...}」となっている場合が多いです。」の箇所に変更コードを書き込んでみて、背景色が変わるか確認してみてください。これで背景色が変われば、それを使えば良いです。背景色を変更する色を変更するために、次のプロパティに値を設定します。カラーコード;今回はskyblue(#87ceeb)に変更してみます。カラーコードは、Google検索などで「カラーコード」と検索すると一覧表を見つけることができます。「#」で始まる3桁または6桁が色を表すコードになります。*/}スタイルシートを変更したら「プレビュー」を押します。背景色がskyblue(#87ceeb)に変更されました。上部の部分の色が変わっていません。このテンプレートでは、メイン背景とヘッダー背景が分けて作られているので、ヘッダー部分を別に定義する必要がありました。#CCC;}このようにskyblue(#87ceeb)に書き換えるとヘッダー背景も変更できました。ここでは、background-colorプロパティではなく、backgroundプロパティを変更しています。興味があったら違いを調べてみてください。背景画像を設定する今度は背景色ではなく、背景画像を設定してみましょう。著作権で保護されている画像は使わない様にして下さい。写真AC」から画像を使わせてもらいました。↓https://www.photo-ac.com/まずは背景に使う画像をアップロードしておきます。左側にある「ファイルアップロード」を押します。背景画像に使うファイルをドロップしてください。背景画像を使うときの注意点として、「無料プラン」ではアップロードサイズは1ファイル2MBまでです。容量が大きな画像を背景に使うと、ページの表示が遅くなる可能性があるので、大きな画像は避けてください。ファイルをドロップしたら、「アップロード」を押します。ファイル一覧にアップロードした画像が追加されました。アップロード画像のURLを使うので、コピーしてメモ帳などにメモしておきます。背景画像を設定する場合は次の1行を追加します。url(背景画像URL);背景色を変更した箇所を変更して、背景画像を表示させてみましょう。先ほどコピーした背景画像URLを貼り付けます。url(https://...../background_01.jpg);}プレビューしてみましょう。背景に画像が設定されました。背景一面に表示されましたが、小さい画像だったらどうでしょうか。テクスチャ画像を使ってみましょう。同じように画像をアップロードして、URLをコピーしておきます。同じように画像を背景画に使います。url(https://...../background_02.jpg);}プレビューしてみましょう。背景が一面に表示されているように思えますが、元々の画像はこれです。これが繰り返して貼り付けられ、一面に表示されています。何も指定をしなければ、このようにブラウザの左上から右下に向かって繰り返し表示されます。1つだけ表示してみます。no-repeat;}画面左上に一つだけ画像が表示されました。使い、背景の並べ方を指定します。他にも、横方向にだけ並べたければ次のように指定します。repeat-x;縦方向に並べたければ、次のように指定します。repeat-y;何も指定しなければ繰り返し表示の起点は左上です。background-positionプロパティを使えば、画像位置を指定することでき、起点を変更することもできます。right;}右上に配置することができました。background-position」で検索してみてください。最後に、背景画像の固定をしてみましょう。初期値では背景画像の配置についてはブログをスクロールさせると背景も一緒に移動します。background-attachmentプロパティを使うことで、背景スクロールを固定表示にさせることができます。fixed;まとめ静止画だとわかりにくいですが、画面をスクロールさせても背景画像は固定されます。スクロールしたときのイメージが変わりますので、背景画像を重視するデザインの場合などに使ってみると良いでしょう。テンプレートによって編集箇所が異なりますが、変更点となるスタイルシートのプロパティと値については同じです。Pocketこの記事を書いた人じょうまさふみ城雅文(じょうまさふみ)。フリーランス7年目です。職業:アフィリエイター、ワードプレス講師。今回は、FC2ブログの記事内にインフォトップのバナー広告を貼る方法について紹介します。今回は、FC2ブログの記事内にもしもアフィリエイトのバナー広告を横並びに貼る方法について紹介します。