背景の画像を変更する / カスタマイズ

ブログが作りたい!FC2ブログのカスタマイズ > 背景の画像を変更する / カスタマイズ

背景の画像を変更する / カスタマイズ

背景の画像を変更する / カスタマイズ

カスタマイズ(8)

今回は、ヘッダー(ブログの上部分)の背景画像を変更してみようと思います。お話は次の順番で進みます。

▲ページの先頭に戻る

ヘッダーの背景画像を変更する

1:テンプレート「air」

(01)

今回は、テンプレート「air」を使います。「共有テンプレート追加」からダウンロードして、適用してください。

テンプレート「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だったんですね。

余白がいっぱい(約36px)

どうしてこういうことをしているのか分かりませんが、何か理由があるのでしょう。

(19)

理由は分かりませんが、試しに、画像の高さ480pxに合わせて、heightを480pxに指定してみましょう。

(20)

ブラウザで表示してみます。あらら、画面いっぱいに画像が表示されてしまいます。いくら何でも大き過ぎるかもしれません。

ブラウザで表示

どうするかは、人それぞれです。

480pxでは大きいと感じたら、適度に画像をトリミング(または縮小)して、heightを画像の数値に変更すれば OKです。

▲ページの先頭に戻る

7:間に余白を入れる

(21)

次は、画像(ヘッダ)下部の窮屈さを、改善してみましょう。ヘッダーとその下(記事など)の部分の間に余白を入れます。

方法としては、ヘッダーの方に「margin-bottom」を入れるか、その下(記事など)の部分に「margin-top」を入れます。

margin-bottomかmargin-top

(22)

ここでは、「.header」に「margin-bottom: 15px;」を設定してみます。

(23)

ブラウザで表示してみましょう。うまく間に余白が入っているはずです。

間に余白

ブログ名(タイトル)の色が気になる場合は、記事「文字色の変更 / カスタマイズ」をご覧ください。

▲ページの先頭に戻る

次回予告

次回は、画像の中央揃えを予定しています。

▲ページの先頭に戻る

関連記事

カスタマイズに関連する記事を、ご紹介します。

▲ページの先頭に戻る

作成日:2008/06/02 更新日:2008/06/02

« 「SEO効果があるタイトル作成方法」|「画像を中央揃えにする」 »

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

梅雨入りですね

先日コメント欄で紹介していただいたFC2ブログstyle-トップページにだけ表示させたいーのページは、とても参考になりました。(如何せん、実際の表示例が少ない)
本日の背景画の入れ替えは、見事に視覚にうったえてくる感じで、これこれ、こういうのを先に見てればあたい、人の画像とっぱらって使いたいテンプレの選択も広がったわ~て、言ってる場合か。もう、テキトーなテンプレでプレオープンしたほうがいいのかな、と思い始めています。(SEO的に)←なまいき
実際の私は…、TeraPadの関連付けで行き詰っています…(信じられない!我ながらイライラします。) ネタ帳だけが太ってゆくーーーではでは。

前向きな妥協

(おずおず)Ozozさん、こんにちは。
コメントありがとうございます。

そうですねー、妥協できるレベルのテンプレートで開始するのも、
ひとつの方法かもしれませんね。

何しろ、簡単に衣替えできるのがテンプレートの良さでもあるし、

みんな何を見に来てくれるかと言えば、テンプレートではなく、
中身(コンテンツ)ですものね。

TeraPadの関連付けって・・・テキストファイルを、
ダブルクリックで開こうとするとTeraPadで起動するというお話かしら。

sachiさんも苦戦したみたいだし、
書いておいた方が良かったみたいですね。
こりゃ気が利かなかったわん。▼・ェ・▼ワンワン

背景画像

こんにちは!
背景画像を変えるカスタマイズは、一番初めに自ブログを始めたときに
しっぽたってまうやん、の猫の絵でやってみた気がします。


ヘッダーの画像を変えるだけで、かなり全体の印象が変わりますよね。
上のairのテンプレートは、まったく別物みたいです。
高さも変えるとほんと印象が変わるなあ。
高さが高いと、ちょっとお洒落な感じになりますね。


しっかし、背景画像を表示とか、Firefoxって便利ですよね。
自分もメインブラウザ、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

またまたお邪魔いたしました。シンプルなテンプレートをお借りして背景の画像を変更したかったので必死で頑張りました。ほんと初心者の私にはよくわかりうれしく思います。
これからもおじゃましていろいろ勉強していきたいとおもいます。ありがとうございました。

さざんかの宿

ひだまり2さん、こんにちは!( ・∀・)ノ
コメントありがとうございます。

おおぅ! すごい。
うまいこといったようで良かったでーす。(´▽`)♪


山茶花きれいですね。
恥ずかしながら、牡丹と区別がつかないやもしれません。

山茶花は、ツバキ科の常緑広葉樹。
牡丹は、ボタン科ボタン属の落葉小低木。

まるで違うのですねー。(´Д`;)ほほほ
勉強するきっかけになりました。ありがとうございました。

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/346-0fa13881
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて