第３回となるファンブログのカスタマイズ、
遂にブログに変更を加える記事となります〜(^O^)／

ファンブログのカスタマイズ（目次）

では説明していきますね（＾◇＾）

まずはファンブログの設定が必要です。

ファンブログの管理画面から
を選択してください。

次にスキンを選択します。
ＨＴＭＬ/ＣＳＳ変更可能という
スキンを選んでください。

因みに私の使っているスキンはこれです。

このブログと配置が一緒なのがわかると思います。

スキンを選ぶコツはイメージしているデザインと同等に
画像が配置されているものを選んでくださいね（＾◇＾）

そのほうがやりやすいです。

さあここからが挫折しやすいところです。。。
頑張ってくださいね(^O^)／

スキンを選んだらプレビューを押してください。
きちんと表示されればＯＫです(^O^)／
気に入ったら保存してください。

きちんと表示できない・・・という方は、
（一部外部のアフェリエイトバナーなどが
表示されませんがそれは問題ありません。
明らかに形がおかしい、色がおかしいなど
なった状態の事です）
すでにカスタマイズしてますね・・・＼(-o-)／
機能選択・並び替えからから自分で作った
機能を解除して下さい。
その後プレビューを押して正常ならＯＫです。
保存してください。

さてスキンを変更したら次はご自分のブログを表示させてください。

多分選んだスキンで表示されてるかと思います(^^♪

そしたら左メニューの「フリースキンの編集」内にある
「スタイルシート」を選択してください。

表示されるのがＣＳＳですね。

そして表示されたCSSのちょっと下にいくと
#header {
background:url(https://fanblogs.jp/burikama/file/313/g3eDYoNfgVug6w.jpg) top no-repeat;
width:880px;
height:275px;
margin-top:0;
padding-top:0;
}
とこのように書かれた部分があるはずです。
目印は「#header」ですよ(^O^)／

これがheader（ヘッダー）と呼ばれる部分で、
トップ（上の大きい画像）の画像を指示している部分です。

この中にあるbackground･･･の右にあるアドレスが画像のアドレスです。

感のいい方はもう気付いたともいますが、このアドレスを変更すれば
トップの画像が切り替わるわけですね(^O^)／

さて、ここに表示したい画像のアドレスを入れるわけですが、
これを用意しなければなりません。

そこでどういうものを用意すればよいのか？
ＣＳＳのこの部分に注目してください。

width:880px;
height:275px;

これはその部分の画像サイズを示しています。
なのでこのサイズの画像を用意しなければなりません。
（画像の保存形式が色々ありますが、わからない場合は
「.jpg」の画像を用意する事をおすすめします）

ここからが最大の山場です(^_^;)
頑張ってくださいね！！

個人的におすすめなのはこのソフトです。
フォトショップエレメンツ


私はこれのプロ仕様のフォトショップ7.0を使用していますが、
こっちは普通に買うと１０万円近くするので。。。

フォトショップエレメンツ
はフォトショップの廉価版ですが全然こちらでも問題ありません。
と言うか使いあまる程の高機能です！！

まあ最初はここからとかでフリーソフトでも全然ＯＫですよ(^O^)／
http://softnavi.vector.co.jp/?cat=68
（画像加工フリーソフトの一覧です）

で、何とか指定サイズの画像を作成してください。。。
ネットでフリーの写真素材などを探して
このサイズにするだけでもいいですよ〜(^O^)／

出来なかった方は諦めて・・・
って事はありません！！！！！

いいサイト見つけました(^O^)／
http://www.takahari.com/picture.html

なんとここで簡単に画像加工出来ちゃいます！！

適当な大き目の写真などを用意して、
「・画像の切り出し」を選んでください。

あとのやり方はそのサイトを見てくださいね(^_^;)

さて用意が出来ましたら遂にアップするときがやってきました〜

まず普通にブログの記事を作成するように、
使用する画像を貼り付けた記事を作成してください。

そしたら下書きにして保存します。
※必ず一度保存してください！！

再度その記事の編集画面を開いて、
「挿入されているファイル」に表示された
使う画像を右クリックして、

（ＩＥ）プロパティを表示、アドレスの部分にある文字列（URL）をコピーします。

（Firefox、chrome）画像URLコピーします。

そしたらそのアドレスを初めにあった
CSSの画面へ行き、青太字の部分を置き換えてください。

#header {
background:url(https://fanblogs.jp/burikama/file/313/g3eDYoNfgVug6w.jpg) top no-repeat;
width:880px;
height:275px;
margin-top:0;
padding-top:0;
}

出来たらプレビューしてみましょう！
思い通りの表示になったら成功です(^O^)／

保存を押さない限り失敗しても
「保存されている内容に戻す」ボタンを押せば
大丈夫ですので果敢にプレビューしまくってくださいね〜(^^♪

ここまで出来れば次からは理解しやすいので安心してください(^O^)／

今回はちょっと理解しがたい部分があると思うので、
質問があったらどんどんコメントに書き込んでくださいね〜(^。^)

次回は背景、その他の変更で〜す！