Home > FC2ブログ > basic_white > basic_whiteテンプレート ヘッダー全体に背景画像を入れる

basic_whiteテンプレート ヘッダー全体に背景画像を入れる

 basic_whiteテンプレートのヘッダー全体に背景画像を指定する方法です。

 表示位置や繰り返し表示はお好みに合わせて変更してください。

変更点1:HTML

 場所はCtrl+Fキーで『id="header"』を検索。

<div id="header">
  <h1><a href="<%url>" accesskey="0" title="<%blog_name>"><%blog_name></a></h1>
  <p><%introduction></p>
</div><!-- /header -->

 上記に以下(<div id="head-img">と</div>)を追加。

<div id="header"><div id="head-img">
  <h1><a href="<%url>" accesskey="0" title="<%blog_name>"><%blog_name></a></h1>
  <p><%introduction></p>
</div></div><!-- /header -->

変更点2:スタイルシート

 以下を追加。アドレス部分が背景に敷き詰める画像ファイルです。

#head-img {
  padding: 20px 0 80px 0; min-height: 1px;
  background: url(http://blog-imgs-62.fc2.com/f/c/2/fc2blogtemplates/basic-white-back1.gif) left top repeat;
}
body #header {padding: 0px 0 0px 0;}

 以上で完成です。表示サンプル

背景画像をコンテンツの横幅に合わせたい

 スタイルシートを変更します。場所はCtrl+Fキーで『#header h1,』を検索。

 『#header h1,』の直後に『#head-img,』を追加するとコンテンツと同じ横幅内に背景画像が表示されます。

#header h1,#head-img,
#header p {
  min-width: 800px;
  max-width: 1200px;
  width:expression(document.body.clientWidth < 802? "800px" : document.body.clientWidth > 1202? "1200px" : "auto"); /* For IE */
  margin: 0 auto;
}

背景画像を繰り返さず一つだけ表示したい

 変更点2でスタイルシートに追加したコードの中にある『repeat』を『no-repeat』に変更します。

background: url(ファイルアドレス) left top no-repeat;

 画像を中央に表示させたい時は『left』を『center』に変更します。右端に表示させたい時は『left』を『right』に変更します

background: url(ファイルアドレス) center top no-repeat;

 以下のスタイルを指定すればこちらのサンプルのように右側に空の画像が表示されます。

#head-img {
  padding: 20px 0 80px 0; min-height: 1px;
  background: url(http://blog-imgs-62.fc2.com/f/c/2/fc2blogtemplates/pub-basic_white_title-back2.jpg) right top no-repeat;
}
body #header {padding: 0px 0 0px 0;}

 位置を細かく指定したい時は『left』を『500px』などに指定します。前述の背景画像をコンテンツの横幅に合わせるカスタマイズを使用すれば位置を上手く調整できると思います。

background: url(ファイルアドレス) 500px top no-repeat;

 縦の位置も調整したい時は『top』を『center』や『50px』などに変更してください。

background: url(ファイルアドレス) left center no-repeat;

背景画像が表示しきれない場合

 ヘッダーに収まるように背景画像を加工してください。または以下のような方法で解決します。

ヘッダーの高さを調整する方法

 高さのある画像はヘッダーの高さを増やすことで表示できます。追加したスタイルシートのmin-heightの数値を画像の高さに合うように増やしてください。次のようにするとヘッダーの高さが250pxになります。

#head-img {
  padding: 20px 0 80px 0; min-height: 250px;

 画像がヘッダーメニューに重ならないようにする時は画像の高さ+39の数値を指定してください。(例)画像の高さ200px→min-height: 239px;

ウインドウに合わせて画像を表示する方法

 追加したスタイルシートの#head-img内に「background-size: cover !important;」を加えてください。

#head-img {
  background-size: cover !important;
  padding: 20px 0 80px 0; min-height: 1px;

 すると背景画像がウインドウに合わせてある程度縮小拡大されるようになります。

関連記事
スポンサー リンク
コメント
#44 : No title
may さま

こんにちは。ありがとうございます>_<
タイトルの背景全体に、写真を入れることができました!

しかし、入れたい写真の一部分が全体になっていて>_<
元の画像をもっと広く選択して挿入したいのですけど、
そういうことは可能でしょうか??

また質問で、すみません>_<
教えていただけたら嬉しいです。
#45 : タイトルの背景全体に写真2
コンニチハ。
元の画像サイズが大きすぎてヘッダ内に入りきれていないのだと思いますが、タイトル部分の高さは220pxくらいしかないのでそれ以上大きい画像は一部しか表示されません。
その画像を編集して高さが220px程度になるまで縮小して切り取れば表示できるかと思いますが…(正方形に近い縦横比の画像を縮小すると、横幅が足りなくなるので高さを切り捨てる必要が出てきます)。

スタイルシートだけでヘッダ内に収める場合は画像を指定している部分「body #header {」の直後に「background-size: cover !important;」を追加すればある程度リサイズされて表示されるかと思います。

body #header {
background-size: cover !important;

ただしこの設定はIE8以下など少し古いブラウザには対応しておらず、PC環境によっては正常に表示されない可能性があります。
IE9以上、Firefox、Google Chromeなら問題ありませんが、未だ多く使用されているWindows XPのPCではIE8までしか使えないため、画像を直接編集してタイトル部分の高さに合うように加工するのが一番いいのではないかと思います。
#47 : No title
may さま

ありがとうございました!できました‼(;_;)

画像が大きそうだったので、加工してからでないとダメかなと思いましたが、教えていただいたbackground-size: cover !important;を追加したら、ちょうどよくハマりました!

ていねいに教えていただき、本当にありがとうございましたm(_ _)m
#73 : 管理人のみ閲覧できます
このコメントは管理人のみ閲覧できます
#75 : Re: ブログタイトルの背景に画像をいれる
コンバンハ。
最初からあるコードは何もいじらずに追加だけ行います。(上書きはしない)
このコメントのURLのリンク先に画像で説明しているのでご確認ください。

「basic_whiteのHTML編集」のすぐ下にあるのがHTML入力欄です。
変更点1:HTML→HTML入力欄の指定の場所に追加

「basic_whiteのスタイルシート編集」のすぐ下にあるのがスタイルシート欄(CSS)です。
変更点2:スタイルシート→スタイルシート欄に追加。
追加する場所は文字の途中や{}内などでなければどこでも構いませんが、スタイルシート欄を一番下までスクロールさせた位置に追加するのがわかりやすいかと思います。
#241 : No title
may 様。

貴重な情報ありがとうございます。

FC2 ブログ ヘッダー画像変更で検索かけたら、いろいろ
でてきましたが、basic_whiteでの説明(現在のFC2ブログ
のデフォルト)がここしかなかったため助かりました。

ヘッダー画像の挿入は成功したのですが、
サイズが高さ半分ほどになってしまっております。

私の挿入した画像は、

高さ300px、幅900pxなのですが、どこをさわれば
このサイズを表示させることができるのでしょうか。

お手数おかけしてもうしわけありませんが、
教えてもらえたら助かります

よろしくお願いいたします。
#242 : Re: #241 ヘッダーの高さ調整
コンバンハ。
本カスタマイズで追加したスタイルシートにある「min-height: 1px;」の数値を「min-height: 300px;」や「min-height: 340px;」などに増やすとヘッダーの高さが画像の高さまで広がります。
参考になるかはわかりませんが、このページにも「背景画像が表示しきれない場合」として説明を追記いたしました。
#261 : No title
こんばんはー。
TOPの背景画像の貼り方を丁寧に教えていただいてありがとうございます。
画像がアレですが、思った通りにできました。
ありがとうございます!感謝。
#315 : ありがとうございます
思い切ってブログをカスタマイズする事に致しました。
大変参考になります。まだまだ、お世話になります。
宜しくお願い申し上げます。
#338 : No title
はじめまして。 やっと見つけたと思ったのですが、「スタイルシート」の方に
見本にある「タグ(文字列)」が見つかりません。 
fc2が更新されているのでしょうか。。
お邪魔しました(^_^;)

コメントの投稿

  

※コメントは記事と直接関連のある事柄のみ受け付けています。

カテゴリ
月別アーカイブ
最新記事
Comments
<>+-
プロフィール

Author:may
 不具合のないように心掛けておりますが、カスタマイズの方法などは自己責任でご利用ください。テンプレートを大きく変更する際は複製してバックアップを用意することを推奨します。

 ご自身のブログをカスタマイズする分には問題ありませんが、記事内容や配布コードの転載・再配布はご遠慮ください。

 過度のご質問・要望については返信や対応が遅れることがございます。返信のない場合は保留・棚上げとなりますが、記事の題材がなくなり、時間にそれなりのゆとりが生じた時に対応する予定です。

Galleryサンプル
ヨッシー New アイランド
The Last of Us Remastered