背景の画像を変更する / カスタマイズ
カスタマイズ（8）
今回は、ヘッダー（ブログの上部分）の背景画像を変更してみようと思います。お話は次の順番で進みます。
ヘッダーの背景画像を変更する
1：テンプレート「air」
（01）
今回は、テンプレート「air」を使います。「共有テンプレート追加」からダウンロードして、適用してください。
2：画像のサイズを調べる
（02）
背景画像がありそうな箇所で右クリックし、メニューから「背景画像を表示」を選びます。
（03）
背景画像だけが表示されます。ブラウザの上部を見ると、サイズが分かります。この画像の場合は、770×318px（幅770×高さ318）みたいです。
これで、おおよそ「あぁ～、これくらいの大きさの画像を用意したらえぇんやなぁ～」ということが分かります。
（04）
次に、画像ファイル名をコピーして控えておきます。
3：CSSの該当する記述を探す
（05）
それでは、テンプレート「air」の CSSを、見てみることにしましょう。
検索機能を使いたいので、CSSコードをコピーして、テキストエディタを起ち上げて、貼り付けてください。
CSSコードを、どこからコピーしてくるかと言うと、場所は、「環境設定」の「テンプレートの設定」です。
（06）
そして、CSSコードを検索します。
前述（04）でコピーしておいた画像ファイル名（ここでは「06_back.jpg」）で検索してみましょう。
（07）
ヒットしました。「.header」というクラスの中で指定しているようです。
background-imageをご存じない場合は、記事「背景に画像【background-image】：CSS入門」をご覧ください。
4：画像を用意する
それでは、画像を用意しましょう。
（08）
使用したい画像を、GIMPなどで好きなように編集・加工してみてください。
どのようにすれば良いかは、デザインの方向性や、写真（画像）の状況などによります。
ここでは、次の写真（リンク先：640×480）で試してみることにします。
（09）
画像が決まったら、ファイルアップロードして、画像の保存先（URL）をコピーして、控えておいてください。
4：CSSで背景画を指定
（10）
前述（09）で控えておいた画像の保存先（URL）を、CSSの指定箇所に貼り付けて、テンプレート（CSS）の[更新]ボタンをクリックしましょう。
（11）
ブラウザで表示してみます。
当り前ですが、画像のサイズが違うので、繰返しや、窮屈な状況が発生しています。
5：繰返しの解除
（12）
試しに、背景画像が繰り返さないように、「background-repeat: no-repeat;」を指定してみます。
（13）
ブラウザで表示してみると、右側がパッツンという感じになってしまいました。
（14）
GIMPなどの画像編集ソフトで、右側が白く抜けていくように加工して縁を曖昧（あいまい）にしておく必要がありそうです。
次のような感じです。
6：画像の状態を再確認
（15）
画像の高さ 318pxのところに、高さ 480pxの画像をねじ込んでいるために、画像がすべて表示されていません。
解決方法は2つです。
- 画像の高さを削る。（画像のトリミング）
- CSSの画像表示領域を広げる。（heightの変更）
ここでは、heightの変更を試してみることにします。
画像のトリミングは、GIMPなどで加工してください。ここではその方法は書きませぬ。
（16）
CSSコードを、もう一度見てみることにしましょう。
ん？あれ？318pxが指定されているのかと思ったら、「height:260px;」になっていますね。何じゃこりゃあ？？？
（17）
改めて、画像を見てみました。画像のした部分に、なぜか余白がいっぱい（約36px）あります。
つまり、実質表示していた部分（高さ）は、260pxだったんですね。
どうしてこういうことをしているのか分かりませんが、何か理由があるのでしょう。
（19）
理由は分かりませんが、試しに、画像の高さ480pxに合わせて、heightを480pxに指定してみましょう。
（20）
ブラウザで表示してみます。あらら、画面いっぱいに画像が表示されてしまいます。いくら何でも大き過ぎるかもしれません。
どうするかは、人それぞれです。
480pxでは大きいと感じたら、適度に画像をトリミング（または縮小）して、heightを画像の数値に変更すれば OKです。
7：間に余白を入れる
（21）
次は、画像（ヘッダ）下部の窮屈さを、改善してみましょう。ヘッダーとその下（記事など）の部分の間に余白を入れます。
方法としては、ヘッダーの方に「margin-bottom」を入れるか、その下（記事など）の部分に「margin-top」を入れます。
（22）
ここでは、「.header」に「margin-bottom: 15px;」を設定してみます。
（23）
ブラウザで表示してみましょう。うまく間に余白が入っているはずです。
ブログ名（タイトル）の色が気になる場合は、記事「文字色の変更 / カスタマイズ」をご覧ください。
次回予告
次回は、画像の中央揃えを予定しています。
関連記事
カスタマイズに関連する記事を、ご紹介します。
1：カスタマイズ前
2：HTML入門、CSS入門
3：FC2ブログのカスタマイズ
作成日：2008/06/02 更新日：2008/06/02
« 「SEO効果があるタイトル作成方法」｜「画像を中央揃えにする」 »
コメントありがとうございます。
お手数ですが、コメント前に留意事項をご覧くださいませ。
また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。
梅雨入りですね
前向きな妥協
コメントありがとうございます。
そうですねー、妥協できるレベルのテンプレートで開始するのも、
ひとつの方法かもしれませんね。
何しろ、簡単に衣替えできるのがテンプレートの良さでもあるし、
みんな何を見に来てくれるかと言えば、テンプレートではなく、
中身（コンテンツ）ですものね。
TeraPadの関連付けって・・・テキストファイルを、
ダブルクリックで開こうとするとTeraPadで起動するというお話かしら。
sachiさんも苦戦したみたいだし、
書いておいた方が良かったみたいですね。
こりゃ気が利かなかったわん。▼･ェ･▼ワンワン
背景画像
背景画像を変えるカスタマイズは、一番初めに自ブログを始めたときに
しっぽたってまうやん、の猫の絵でやってみた気がします。
ヘッダーの画像を変えるだけで、かなり全体の印象が変わりますよね。
上のairのテンプレートは、まったく別物みたいです。
高さも変えるとほんと印象が変わるなあ。
高さが高いと、ちょっとお洒落な感じになりますね。
しっかし、背景画像を表示とか、Fireｆoxって便利ですよね。
自分もメインブラウザ、Firefoxにしようかな。
なんかIEからお気に入りの移動がうまくいかんくて、めっちゃめちゃに
移動されてしまって、未だ何となくIE使ってるけど、そのうち変えようかな。
ぺ・ヤング
コメントありがとうございます。
おぉ！名作「しっぽ立ってまうやん」のときに！
ときにー！
そう、ヘッダだけでまるで別人になりますよね。
いい写真を使ったりしたら、それだけでギューンときます。
IEって、背景画像の表示がないんですかね。
たしかに見当たらないッス。
お嬢さん。
やっぱ、ナウなヤングはFirefoxらしいですよ。
ナウでヤングでスィーツ（笑）
ヘッダを変えるっていうのはほんとに効果が目に見えるし
「変えてやったぜー！」って気になるから、本当に手間の割りに楽しい作業ですよね。
IEは、もう今日バグで大喧嘩したので知りません。
いやー、なんで自分、こんなダラダラIE使ってんのかな。
ダメだわあ。
そのうち本当にFirefoxのお気に入り整理してメインにしよう。
今さっき、今のブログの猫を「しっぽたってまうやん」仕様にしてきました。
もうずっと何らかの形でしっぽたってまうやんにこだわろうと思いました。
キャラクターグッズ
コメントあーりがーとさーん。じょじょりん。じおじおりん。
相変わらずIEのシェアは高いですね。
順調に、IE7に移行しているようです。
Firefoxが逆転する日って、来ないのかなぁ。
やっぱ、そうかもね。
不朽の名作「しっぽ立ってまうやん」は、
こだわりをもって続けていくことが大事かもしれない。
そして、グッズ販売に着手！
「しっぽ立ってまうやん」ストラップがバカ売れ！
IE
おうおう、順調に移行しているのですね！
IE7は、IE6に比べてだいぶおりこうさんになっているので嬉しいな。
IE8ではもっとおりこうになるのかな。
Firefoxは、おりこうってレベルじゃないとおもう。
コードの通りに表示する、透過pngも表示する、
なんかいろんなプラグインがある、
アイコンのキツネがかわいい、いろいろハイレベル。
デザイナーさんとかweb制作に関わってる人には人気らしいです。
逆転してもおかしくない状況なんだけどなあ。
なんでだろう？
パソコンのデフォルトで入ってるブラウザってIEなのかな？
自分のパソコンは初めからIEはいっとったけど、
普段サイトを見て廻る分には、ブラウザをわざわざ変えるってことは
皆しないのかな。
自分もブラウザを複数入れたのは、サイト作り始めてからなので
もしかしたらそうなのかもなあ。
しっぽたってまうやん、夏バージョンと秋バージョン考えとこ＾＾
ビキニ
コメントありがとうございます。
IE7のシェアが、IE6を越えそうな状態になっているもようです。
もっとFirefoxを使う人が増えてくれるといいんだけどなぁ。
OSがWindowsのパソコンは、IEが標準だものね。
どちらもMicrosoftさんの商品やさかい、しゃあないですわ。
「しっぽ立ってまうやん」ブランドの夏・秋バージョン！
きた！ブームの予感。
夏はやっぱし、ビキニか！？
グラビア
ジョイトイ並みにやろう。
IE7、強制アップデートとかで増えているのかな。
自分はXPなんですが、初めてIE7にした時、すぐにブラウザが終了してしまって
なんじゃごりゃあ！ってなったんだけど、スレイプニルにしてから大丈夫になった。
（中身はIE7）
なんだったんだろう。
vista買えよって事かしら。
オブジョイトイ
いつもコメントありがとう！
おぉう！とうとうグラビアデビューっすか。
オブジョイトイなみとは、おそるべし。
知らないうちにバージョンアップしていた人もいるのかしら。
あれよ、あれよという間に・・・みたいな。ぷー。
vistaって、どうなんやろ。
あまり、「えぇでー」なんて話も聞きませんけど。
みんな、Linuxにすればいいのに。
No title
これからもおじゃましていろいろ勉強していきたいとおもいます。ありがとうございました。
さざんかの宿
コメントありがとうございます。
おおぅ！ すごい。
うまいこといったようで良かったでーす。(´▽`)♪
山茶花きれいですね。
恥ずかしながら、牡丹と区別がつかないやもしれません。
山茶花は、ツバキ科の常緑広葉樹。
牡丹は、ボタン科ボタン属の落葉小低木。
まるで違うのですねー。(´Д｀;)ほほほ
勉強するきっかけになりました。ありがとうございました。
本日の背景画の入れ替えは、見事に視覚にうったえてくる感じで、これこれ、こういうのを先に見てればあたい、人の画像とっぱらって使いたいテンプレの選択も広がったわ～て、言ってる場合か。もう、テキトーなテンプレでプレオープンしたほうがいいのかな、と思い始めています。（SEO的に）←なまいき
実際の私は…、ＴｅｒａPadの関連付けで行き詰っています…（信じられない！我ながらイライラします。） ネタ帳だけが太ってゆくーーーではでは。