【アメブロカスタマイズ】ブログの背景画像を変更・設定する方法

さて、今回はブログの背景画像を設定する方法です。

背景の色使いなどによってブログの記事をより見やすくする事ができますが、そこまで重要かは個人個人によって変わります。

このブログの背景画像はシンプルに作ってありますがこうやって枠をつけるだけでも随分見やすくなりますね。

では、実際にやっていきたいと思います。

まず、コチラで背景画像を作ってみたので試しに使ってみてください。

>>画像のダウンロードはコチラ

ダウンロードしたらブログの管理画面で画像をアップデートしてください。

そうしたら

「ブログを書く」→「デザインの変更」→「ＣＳＳの編集」

でＣＳＳの編集画面を開いてください。

そうすると、ＣＳＳの記入欄の上のほうに

/*----------------------------------------------------- ameblo CSS Skin Settings Skin for: basic_ad FileName: common.css $Revision: 1.8 $ -----------------------------------------------------*/ /*============ ☆ かんたんスキンカスタマイズはこちら ☆ ==============*/ /*:(コロン)と、;(セミコロン)の間に色、画像、サイズなどを指定して下さい*/ /*１）ブログタイトルの文字サイズを変更する*/ #header h1{ font-size: 0px; /*-- 25px相当の文字サイズ --*/ } /*２）ブログタイトルの文字色を変更する*/ #header h1 a{ color:#fff; /*-- 濃いグレー --*/ } /*３）ブログ説明の文字サイズを変更する*/ #header h2{ font-size: 0px; /*-- 12px相当の文字サイズ --*/ } /*４）ブログ説明の文字色を変更する*/ #header h2{ color:#fff; /*-- 指定なし --*/ } /*５）ページ背景に画像を入れる*/ body{ background-image:url(画像); background-attachment : scroll; }

上記の太字の部分を青の部分のようにしてください。

コピー＆ペーストでできるはずです。

この画像の部分を画像のＵＲＬを貼り付けてください。

これで保存していただければ背景画像が変わるはずです。

これは全体の背景を変える方法ですが、工夫をすればもっと色々やる事ができます。

例えば、私のブログの場合は、背景画像を中央に設定して縦しかスクロールしない設定にしています。

その場合は

/*５）ページ背景に画像を入れる*/ body{ background-image:url(画像); background-position:center;/*-- 画像を中央に持ってくる設定 --*/ background-position:top;/*-- 画像を一番上にする設定 --*/ background-repeat:repeat-y;/*-- 画像を縦のスクロールにする設定--*/ }

でやっています。

また、横のみにスクロールさせたい場合は、、、、

/*５）ページ背景に画像を入れる*/ body{ background-image:url(画像); background-position:top;/*-- 画像を一番上にする設定 --*/ background-repeat:repeat-y;/*-- 画像を横のスクロールにする設定--*/ }

このようにすると横一列でスクロールさせる事ができます。

是非、試してみてくださいね。

>>動画版はコチラをクリックする（アメンバー登録が必要となります）