ページトップの画像を変更する

既存のデザインも、トップの画像を差し替えるだけで、
随分と、印象が変わります☆

そこで！

トップの画像だけを変更する方法をお伝えしますねっ！

【１】
まずは、もとの画像と同じサイズの差し替えたい画像を用意します。

お手持ちの写真やイラストと入れ替えたい場合は、
画像ソフトでサイズを【あらかじめ】変更しておいてくださいねっ

元の画像のサイズが知りたい場合は、その画像の上にマウスカーソルを置いて右クリック。
メニューが出てきたら、一番下の「プロパティ」をクリック。

すると、画像についての詳しい情報が出てきます。

「大きさ」というところに、サイズが出ています。

800×360ピクセルと出ていたら、
横幅が８００ピクセル、縦が360ピクセルの画像だということです。

この大きさに合わせて、画像を作ってくださいね。

【２】
用意した画像を、[ブログの管理画面]-[ファイルのアップロード]から、アップロードします。

ファイルのアップロード画面で「ファイルをアップロードする」リンクをクリックします。

サムネイルは必要ないので、チェックをはずしてください。

左メニューの「ファイルのアップロード」をクリックして画面を開きなおします。

一番上にある、アップロードした画像に横にある、青色の「投稿する」ボタンをクリックしてみてください。

すると、ブログの記事投稿画面になるのですが…
その中から、その画像のＵＲＬだけをコピー(Ctrl + c)してください。

例)
<img src=”http://image.blog.livedoor.jp/moteblog/
imgs/a/6/a600f8f9.JPG” width=”800″ height=”360″ border=”0″ alt=”トップ画像” hspace=”5″ class=”pict” align=”left” />

この、太字のＵＲＬ部分だけを抜き出します。
※表示上URLが折り返してますが、１行で書いてくださいね！

【３】
次に、ブログの管理画面上部メニューにある「カスタマイズ/管理」をクリックします。
続いて、左の縦メニューにある「デザインの設定」をクリックして、
画面が切り替わったら、一番下の右端にある「カスタマイズ」をクリックします。

すると、カスタマイズ画面です☆

一番初めは、「スタイルシート（CSS）」が開いているので、そのまま編集に入ります。

さて。その中にある【 #banner 】というところの
【 background 】を編集します。

例＞
　#banner{
　　width:800px;
　　height:360px;
　　text-align:left;
　　margin:0 auto;
　　background:url(http://parts.blog.livedoor.jp/
img/usr/wonderland01/header.jpg) no-repeat 50% 0;
　}

このbackgroundのＵＲＬで、画像の場所が指定してあるんですね。
そこを、自分でアップロードした画像のＵＲＬに書き換えてやります。
※表示上URLが折り返してますが、１行で書いてくださいね！

　#banner{
　　width:800px;
　　height:360px;
　　text-align:left;
　　margin:0 auto;
　　background:url(http://image.blog.livedoor.jp/moteblog/
imgs/a/6/a600f8f9.JPG) no-repeat 50% 0;
　}

※表示上URLが折り返してますが、１行で書いてくださいね！

ＵＲＬだけを変更してくださいね！
他はいぢっちゃ、ダメですよ！！

続いて、そのページの一番下にある「この内容で保存する」ボタンを押してください。

その後、左メニュー上にある「ブログに設定を反映(再構築)」リンクをクリックして、「デザイン(CSS)」を選んでブログを再構築してください☆

ＩＥ以外のブラウザで確認したときに、
どうも表示がうまくいかない…という場合は、以下のようにしてください。

#banner{
　background-image:url(http://***.jpg);
　background-position:50%;
　background-repeat:repeat-y;
}

これは、さっき１行で設定してたのを、バラしたやつ。