FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか？

ヘッダー背景に画像を表示する

ヘッダー背景に画像を表示させるカスタマイズを紹介します。
ここで紹介するカスタマイズのテンプレートは lightframe が対象です。
standard をお使いの方はこちらを参照してください。

スタイルシートを編集します。

/*********************************** ▼ ヘッダー ▼ */
～

#header_body {
～
background-image: url(http://～); /* 画像URL */
height: 300px; /* 画像の高さ */
background-repeat: no-repeat; /* 画像の並べ方 */
background-position: center; /* 表示位置 */
}
/*********************************** ▲ ヘッダー ▲ */

上記箇所に各記述を加えてください。

http://～ に画像のURLを設定してください。
height に画像の高さを設定してください。

background-repeat は画像の並べ方を設定します。
no-repeat ひとつだけ表示
repeat-x 横に並べて繰り返し表示
repeat-y 縦に並べて繰り返し表示
repeat 縦にも横にも敷き詰めて繰り返し表示

background-position は表示位置を設定します。
center 中央寄せ
left 左寄せ
right 右寄せ

又は%で詳細な位置を設定することも可能です。
例　background-position: 5% 50%;

1番目の数値　左右に対応　少ないほど左　多いほど右
2番目の数値　上下に対応　少ないほど上　多いほど下

ヘッダーの背景画像はブログの顔と言っても過言ではないほど個性がでます。
ぜひ素晴らしい画像を用意してこのカスタマイズに挑戦してくださいね。

関連記事

[ 2006/12/09 00:10 ] カスタマイズ lightframe 専用 | TB(0) | CM(77)

≪ カラムが落ちる(下に表示される)のは何故か？ | HOME | 記事の日付を消す ≫

[ 894 ] こんばんは

カスタマイズさせて頂きました。
ワンポイントでいい感じになりました。

色々と(しかもたくさんの！)御指導、有難う御座いますm(__)m

[ 2006/12/20 01:46 ] [ 編集 ]

[ 899 ] > ちゃんさん

こんばんは、ちゃんさん。
ワンポイントが決まってますね。紫と和と武道ってこんなに相性がいいとは。凄く落ち着きますよ。

[ 2006/12/21 22:32 ] [ 編集 ]

[ 1515 ]

テンプレート愛用させてもらっています。
カスタマイズをしてみた所
画像が表示されません。。。
設定通りやってるとおもうのですが。。。

[ 2007/03/26 16:45 ] [ 編集 ]

[ 1528 ] > YUJIさん

私がみたところカスタマイズが適用されていませんでした。
カスタマイズ前の状態に戻してしまったのでしょうか。
この記事の通りにカスタマイズすれば出来るはずなので今一度確認してみてくださいね。

[ 2007/03/27 00:51 ] [ 編集 ]

[ 1543 ]

プレビューで画像表示がされていなかったので適用してません。
後ほどやってみます。

[ 2007/03/27 13:48 ] [ 編集 ]

[ 1557 ] > YUJIさん

カスタマイズしてうまくいかなかったら、そのうまくいかない状態でまた見せてくださいね。

[ 2007/03/28 01:29 ] [ 編集 ]

[ 1586 ]

わかりました。
ちょっと挑戦してきます(＾＾)

[ 2007/03/28 15:43 ] [ 編集 ]

[ 1587 ]

度々すいません。
なんとかできました(＾＾)
お手数かけましたm(_ _)m

[ 2007/03/28 15:59 ] [ 編集 ]

[ 1590 ] > YUJIさん

カスタマイズ出来ましたね＾＾
自ら解決するほうがより知識が吸収できます。いろんなカスタマイズに挑戦してくださいね。

[ 2007/03/29 03:09 ] [ 編集 ]

[ 2240 ] はじめまして

テンプレートお借りしています♪
上の通りやっていると思うのですが画像が表示されません。
どこが間違っているのでしょうか？

[ 2007/06/18 17:35 ] [ 編集 ]

[ 2245 ] 失礼しました

ブログを載せるのを忘れていました。
お手数ですが解決方法を教えてください。
よろしくおねがいします((｡´･ω･)｡´_ _))ﾍﾟｺ

[ 2007/06/18 23:08 ] [ 編集 ]

[ 2252 ]

返答ありがとうございます。
画像URLを置き換えてみましたがプレビューでは表示されませんでした・・。
FC2で不具合があったんですね、知りませんでした！

[ 2007/06/19 23:25 ] [ 編集 ]

[ 2254 ]

出来ました!!
本当にありがとうございました(´；ω；`)
すごく嬉しいです～お手数かけました((｡´･ω･)｡´_ _))

[ 2007/06/20 02:19 ] [ 編集 ]

[ 2268 ] > ☆★ちぃ★☆さん、かどりんさん

こんなに詳しく、、、有り難うございます、かどりんさん。
かどりんさん、凄いです。答えの質が高いです。
本当に有り難うございます。

☆★ちぃ★☆さん、カスタマイズできて良かったですね。

[ 2007/06/21 03:26 ] [ 編集 ]

[ 3194 ] サブタイトル

はじめまして。
テンプレートお借りしました。

画像を載せるのは上手くいったのですが、
サブタイトルが画像の下に潜り込んでいるのか、
表示されません；；
タイトルはちゃんと表示されるんですが･･･。

お忙しい所ご迷惑おかけしますが、アドバイスの程よろしくお願い致します

[ 2008/03/21 12:05 ] [ 編集 ]

[ 3268 ] ヒントだけでもお願いします

いたおさんの
lightframe_whiteをベースに、他の作者さんのテンプレートのいい所を生かしたくて試行錯誤中です。

現状、Sleipnir2.71（Tridentエンジン IE7）と、Opera 9.26では同じように表示されるのですが、Mozilla Firefox 2.0.0.14ではとんでもない表示になってしまいます。

詳細は現在の最新記事、
http://stake7.blog42.fc2.com/blog-entry-893.html

いたおさん、もしくはご覧になった方で、Firefox2対策のヒントだけでも教えていただけると嬉しいのですが。
よろしくお願いします。

[ 2008/05/07 03:44 ] [ 編集 ]

[ 3271 ] > sitetakeuchiさん

HTML文法をチェックしてくれるサイトがあるのでこちらを利用してみてください。なにかヒントが解るかも知れません。

http://openlab.ring.gr.jp/k16/htmllint/htmllint.html

[ 2008/05/07 23:51 ] [ 編集 ]

[ 3272 ]

＞sitetakeuchiさん
IE6から見ると、現在左カラムが落ちて見えます。
過去ログのプルダウンの幅を変更すればすぐに直ると思います。
Firefox2だと確かに記事部分しか表示されていないですよね
色んなブラウザに対応出来るようにする為、私も色々弄りました･ﾟ･(ﾉД`)･ﾟ･

…って何の役にも立っていなくてすみません(汗)

そしていたおさんお帰りなさい(*´ω｀)

[ 2008/05/08 01:03 ] [ 編集 ]

[ 3276 ] > ちゃんさん

お久しぶりです。ちゃんさん！
いつもありがとうございます。
そしてただいま＾＾

[ 2008/05/09 00:23 ] [ 編集 ]

[ 3278 ] ケアレスミスでした

いたおさん
なんとか、Firefox2でもまともな表示になりました。
たった１カ所コメントが入れ子状態になっていた、私の本当にケアレスミスでした。ハイフン2つで解決しました(^^ゞ

ちゃんさん
ご指摘ありがとうございました。
IE6での左カラム落ち、解消出来ているでしょうか。

[ 2008/05/09 01:31 ] [ 編集 ]

[ 3557 ] はじめまして

lightframe のテンプレートを使わせて頂いてます
初心者なのでいたおさんの詳しい説明はありがたいです。

ところで質問なのですが
ヘッダー部分の背景をランダムに表示させることはできるのでしょうか？

もし出来るのならば教えていただけないでしょうか
ご無理を言ってすみません

[ 2008/10/17 19:04 ] [ 編集 ]

[ 3574 ] ありがとうございます。

テンプレートお借りしました。
こちらのサイトを参考にいろいろカスタマイズさせていただいています。
大変勉強になりました！！
これからもちょくちょく寄らせていただきます＾＾
よろしくお願いします。

[ 2008/11/03 07:35 ] [ 編集 ]

[ 3666 ] 教えてください！

いつも色々参考にさせていただいています
カスタマイズ初心者なのでよろしくお願いいたします

ブログの名前や説明の背景画像を変更したら画像の顔の部分に文字がかぶってしまうので
文字の位置を変更したいのですが
どのようにしたら良いですか？

よろしくお願いいたします

[ 2009/01/13 23:00 ] [ 編集 ]

[ 5240 ] どこを間違えているのでしょうか？

いつもお世話になっています。
昨夜から必死で取り組んでいるのにも関らず、なぜか画像が表示されませ～ん！（号泣）
かどりんさんの記事No２２５３の回答も読みましたが、それでも表示されません・・・・・・
どこか根本的に間違えてるのでしょうか？（泣）

[ 2009/08/02 12:20 ] [ 編集 ]

[ 5251 ] > 豪州サンディさん

スタイルシートに設定している画像URLには、画像が無いようです。URLを確認してみてください。

[ 2009/08/03 00:02 ] [ 編集 ]

[ 5267 ] なぜだ～？（泣）

URLを確認し訂正しましたが・・・・・
それでも表示されませーん！（泣）
元々こういうことに知識がないので、根本的に理解してないのかもしれません。
HTMLには手を加えなくていいんですよね？
一体どこが間違ってるのでしょうか？（号泣）

[ 2009/08/03 12:42 ] [ 編集 ]

[ 5273 ] > 豪州サンディさん

HTMLは修正する必要はありません。スタイルシートの画像URLが問題です。

background-image: url
(http://blog-imgs-26-origin.fc2.com/g/o/s/goshusandy/P1000148/20090802105849.jpg); /* 画像URL */

このURLに飛んでも画像がありません。

まず画像が正しくアップロードされているか、そしてその画像URLが正しいか確認してください。

[ 2009/08/03 19:49 ] [ 編集 ]

[ 5274 ] 再び、なぜだ～？（泣）

background-image:url
http://blog-imgs-26.fc2.com/g/o/s/goshusandy/P1000148_20090802105849.jpg

これでいいはずなんですが・・・・・

[ 2009/08/03 22:09 ] [ 編集 ]

[ 5275 ] > 豪州サンディさん

このURLは正しいです。後は
background-image: url(http:～
とurlの後に空白を入れずに連続して記述してください。

background-image: url(http://blog-imgs-26-origin.fc2.com/g/o/s/goshusandy/P1000148_20090802105849.jpg); /* 画像URL */

[ 2009/08/03 22:26 ] [ 編集 ]

[ 5276 ] ▼豪州サンディさん

background-image: url●(http://～);
ここのスペースを詰めてみて下さい。

追記：
いたおさんへ
スタイルシートを見ていたら被ってしまいました
すみません(^^;)

[ 2009/08/03 22:30 ] [ 編集 ]

[ 5277 ] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2009/08/03 22:48 ] [ 編集 ]

[ 5280 ] > ちゃんさん

ありがとうございます。
同時に投稿してしまったみたいですね＾＾

[ 2009/08/04 00:13 ] [ 編集 ]

[ 5282 ] ＞いたおさん、ちゃんさん

写真が表示されましたーーー！！（号泣）
urlの後の空白が表示されなかった原因だったとは・・・
色々とご面倒をおかけしました。
本当に有難うございました。

[ 2009/08/04 05:54 ] [ 編集 ]

[ 5288 ] > 豪州サンディさん

表示されましたね。良かったです＾＾

[ 2009/08/04 20:38 ] [ 編集 ]

[ 6173 ]

この説明通りにやったつもりなのですが
画像が表示されません…
どこが間違っているのでしょうか？

[ 2009/09/23 11:12 ] [ 編集 ]

[ 6176 ] ▼ainaさん

現状が以下のようになっています。
画像をアップロードしてから()内に貼ります。

#header_body {
～
background-image : url(http://0b365bee.jpg);
);
height : 300px;
～
}

それから記事に掲載している画像が大き過ぎてテンプレートが崩れて見えますので、サムネイル表示・もしくはサイズを修正したほうが良さそうです。
standardシリーズだと内容物に合わせて記事幅が伸縮するので、そちらのテンプレートに変更するのも良いかもしれません。

[ 2009/09/23 16:12 ] [ 編集 ]

[ 6184 ] > ainaさん、ちゃんさん

> ainaさん
記事中の「～」は中略を表しているものなので、これをそのままスタイルシートの中には書かないでください。

あと画像URLが正しくないようです。そのURLをクリックしても画像が表示されません。正しいURLを確認してください。

そしてちゃんさんのおっしゃる通り記事中の画像を小さくするかテンプレートを変えたほうが良さそうです＾＾；

> ちゃんさん
いつもありがとうございます＾＾

[ 2009/09/23 21:25 ] [ 編集 ]

[ 6211 ] ちゃんさん・いたおさん

なんとか画像を表示させる事ができました。
丁寧なご説明ありがとうございました！！

[ 2009/09/25 22:50 ] [ 編集 ]

[ 6212 ] > ainaさん

解決おめでとうございます。
頑張りましたね＾＾

[ 2009/09/25 23:02 ] [ 編集 ]

[ 6230 ]

いつもお世話になっています。

タイトル画像の表示について質問です
ヘッダー部分に表示するのはタイトル画像で設定したものだけにできないのでしょうか？左右に余ってるテンプレートの水色の枠を削除できなくて困っています。もし左右の余白を削除する方法があればお願いします。

[ 2009/09/26 10:38 ] [ 編集 ]

[ 6231 ]

すいません＞＜

テンプレートを変えてみて不自然じゃなくなったので解決しました
無駄なコメント申し訳ございません

[ 2009/09/26 10:57 ] [ 編集 ]

[ 6246 ] > デコッパさん

このコメントの後に鍵コメしている不具合についてですが、貼付けてくれたソースの部分は問題ないようでした。

現在そちらがプライベートモードで見れないので、この記事を参考に原因を探してみてください。

表示が崩れる原因の調査手順
http://10plate.blog44.fc2.com/blog-entry-274.html

[ 2009/09/26 23:59 ] [ 編集 ]

[ 6375 ]

どうも。日々テンプレートを使わせていただいています。

この記事の表示+ヘッダ画像のランダム表示は可能でしょうか？

http://mp6kouki.blog90.fc2.com/

[ 2009/10/06 08:37 ] [ 編集 ]

[ 6376 ]

すみません言葉足らずでした。
他の記事にhtml側を編集してランダムでヘッダ画像を表示する方法は載っていましたが、
当記事のCSS側で表示する方法とその方法は併用可能なのでｙしょうか？
併用不可なのであれば、ほかに方法はありますでしょうか？

お手数ですがご教授お願いします。

[ 2009/10/06 08:39 ] [ 編集 ]

[ 6382 ] > EyePhyさん

大丈夫です。併用可能です。

[ 2009/10/07 00:20 ] [ 編集 ]

[ 6387 ]

ありがとうございました！

[ 2009/10/07 13:00 ] [ 編集 ]

[ 6393 ] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2009/10/07 23:48 ] [ 編集 ]

[ 6597 ]

どうしてもlightframeでタイトルを画像にしたいのですが、不可能なのでしょうか？

[ 2009/10/21 22:55 ] [ 編集 ]

[ 6601 ] > momoさん

可能なので是非挑戦してみてください＾＾

[ 2009/10/21 23:10 ] [ 編集 ]

[ 6602 ]

<h1><a href="<%url>" title="<%blog_name>" alt="<%blog_name>"><img src="画像URL" border="0" /></a></h1>
でしてもズレが生じます
CSSに設定したとしても、タイトル文字は消えませんし。。
お暇な時でいいので解決法を教えて下さい

[ 2009/10/21 23:35 ] [ 編集 ]

[ 6604 ] > momoさん

スタイルシートの末尾に追加してください。

h1 {
margin:0px;
padding:0px;
}

これでもうまくいかないようであればURLを教えてください。

[ 2009/10/21 23:45 ] [ 編集 ]

[ 6606 ] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2009/10/21 23:53 ] [ 編集 ]

[ 6835 ] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2009/11/08 09:36 ] [ 編集 ]

[ 7530 ] ダメです。

ヘッダー画像が自動的に、小さくなってしまい、白いスペースができてしまします！

[ 2009/12/26 00:54 ] [ 編集 ]

[ 7534 ] > ROXASさん

はっきりしたことは解らないのですが、上下にあるメニューバーに問題があるかもしれません。

テンプレートのバックアップを取った後、この上下のメニューバーを取り除いて表示してみてください。

[ 2009/12/26 01:36 ] [ 編集 ]

[ 7642 ]

高さとかではなく、ヘッダーサイズを指定するにはどうしたらいいでしょうか？

[ 2010/01/02 16:41 ] [ 編集 ]

[ 7652 ] > ROXASさん

ROXASさんのいうヘッダーサイズが何なのか解りませんが、背景画像の表示サイズを合わせるには高さを設定しなくてはなりません。ROXASさんのタイトル画像は高さが347pxのようなので、それを設定してください。

[ 2010/01/02 23:23 ] [ 編集 ]

[ 7662 ] PPP

ヘッダーに追加した画像をクリックしてリンクに移動するように設定したいのですがどうすればいいのでしょうか?

[ 2010/01/03 11:23 ] [ 編集 ]

[ 7663 ] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

[ 2010/01/03 11:24 ] [ 編集 ]

[ 7670 ] > PPPさん

このカスタマイズならばリンクできるので、この記事を参考にしてみてください。

SEOを考慮したランダムなタイトル画像
http://10plate.blog44.fc2.com/blog-entry-190.html

[ 2010/01/03 18:23 ] [ 編集 ]

[ 8606 ] 承認待ちコメント

このコメントは管理者の承認待ちです

[ 2010/03/08 19:19 ] [ 編集 ]

[ 8778 ] 承認待ちコメント

このコメントは管理者の承認待ちです

[ 2010/12/30 22:17 ] [ 編集 ]

[ 8790 ] 承認待ちコメント

このコメントは管理者の承認待ちです

[ 2011/01/21 03:42 ] [ 編集 ]

[ 8873 ]

これって画像URLて書いてるやつも書いた方がいいの？

[ 2011/11/19 13:49 ] [ 編集 ]

[ 8874 ] > 元気さん

コメントアウトは書いても書かなくてもどちらでも構いません。
ただ書き方によっては不具合を起こすので気をつけてください。

ＣＳＳのコメントアウト
http://www.seoteams.com/kihon/05.html

[ 2011/11/19 20:37 ] [ 編集 ]

[ 8904 ] ヘッダ上に隙間

初めまして。
いたおさんのテンプレを使用してブログ作成に取りかかっているのですが、ヘッダ上の白い隙間を完全になくしたいのですがどうすれば良いのでしょうか？あとヘッダの背景画像の横幅を区切らないでヘッダのみウィンドウ一杯に横幅を広げたいのですが、そういう事もできるのでしょうか？

[ 2011/12/17 06:59 ] [ 編集 ]

[ 8906 ] 参考

ヘッダとメニューバーとフッターを下記サイトみたいにウィンドウいっぱいに伸ばしたいんです。

http://getnews.jp/

[ 2011/12/17 11:17 ] [ 編集 ]

[ 8910 ] > 五勝さん

上のスペースを埋めるにはスタイルシートを次のように編集してください。
h1 {
font-size:16pt; /* 文字サイズ */
text-align:left; /* 左寄せ */
/*margin:10px 30px; */
padding:10px 30px;
margin:0;
}

ヘッダーとフッターを一杯に広げるにはHTMLを編集します

～

を<div id="outline">の上へ、


～

を</div>の下へ移動させてください。

[ 2011/12/17 15:20 ] [ 編集 ]

[ 8912 ]

素早い対応ありがとうございます。
とても勉強になり、助かります。
見事広げることは出来たのですが、今度はヘッダ画像の位置調整で苦戦してます＾＾；
メニューバーや記事の左に寄りと同じくらいの位置に合わせたいのですが、この仕様でできるのでしょうか？
あと、メニューバーの左の区切り線が表示されないのが仕様なのはわかったのですが、どうにか表示させる方法はないでしょうか。
よろしければアドバイスお願いします。

[ 2011/12/18 01:12 ] [ 編集 ]

[ 8913 ] イメージ

イメージとしてはこういう感じです。

http://blog-imgs-49.fc2.com/5/0/0/5000enkeiba/20111218045615e73.png

[ 2011/12/18 04:57 ] [ 編集 ]

[ 8916 ] > 五勝さん

スタイルシートにこれらを加えてみてください。

#header_outline {
background-image: url(http://blog-imgs-49.fc2.com/5/0/0/5000enkeiba/20111218033539e36.png); /* 画像URL */
}

#header_body {
width:900px;
margin:0 auto;
}

#menu_bar li a {
border-left:1px solid #333333; /* 区切り線 */
}

[ 2011/12/19 01:23 ] [ 編集 ]

[ 8918 ] ＞いたおさん

教えて頂いたものを貼り付けたら、綺麗に揃える事ができました。
それにしても、いたおさんの対応の速さは素晴らしい。本当にありがとうざいました。

[ 2011/12/19 08:13 ] [ 編集 ]

[ 8921 ] > 五勝さん

ご期待に添えて良かったです＾＾

[ 2011/12/19 23:47 ] [ 編集 ]

[ 8926 ]

何度も申し訳ないのですが、またお知恵をお貸しいただきたいです＾＾；
下記参考ブログのようにヘッダー部分に、リーダーやTwitterなどのアイコンを置きたいのですが、どのような編集をすれば良いのでしょうか？

参考
http://idita.blog11.fc2.com/

[ 2011/12/21 18:28 ] [ 編集 ]

[ 8929 ] > 五勝さん

HTMLの
<div id="header_body">
～
</div>
内に表示したいものを挿入し、それをfloatで右に流してみるとどうでしょうか。

もしかするとその際にh1のcssでwidthを設定してfloatで左に流す必要があるかも知れません。