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(22)

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

こんばんは

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

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

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

> ちゃんさん

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

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

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

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

> YUJIさん

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

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

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

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

> YUJIさん

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

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

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

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

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

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

> YUJIさん

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

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

はじめまして

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

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

失礼しました

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

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

＞☆★ちい★☆さん

画像のURLが問題のようです。
といっても☆★ちい★☆さんのやり方は合ってます。
FC2側の障害・不具合で画像のURLが変わってしまっています。

参考リンク
⇒最新障害情報・メンテナンス情報ブログ 2/27 ブログの画像表示不具合について
http://fc2support.blog85.fc2.com/blog-entry-31.html
⇒ちゃんさんのブログでも参考になる記事があります
http://tanpoko.blog70.fc2.com/blog-entry-397.html

･･････････････････････････････････････････・

今、画像の指定のところが
background-image:url(http://blogimgs10.fc2.com/c/h/i/chiiroom/20070618075859.jpg);

となってますが、その画像のURLを下記のように置き換えてみてください。

background-image:url(http://blog80.fc2.com/c/chiiroom/file/20070618075859.jpg);

としてみるともしかしたら大丈夫かもしれません。

[ 2007/06/19 09:51 ] [ 編集 ]

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

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

＞☆★ちい★☆さん

スタイルシートの#header_body以下を下記のようにしてみて下さい。
（背景色・内枠の色に続けて画像の指定タグを入れて下さい）
当方で動作確認したところ、プレビューで表示されたので
多分大丈夫ではないかと思います。

#header_body {
background-color:#FFC0CB; /* 背景色 */
border:1px solid #FFF0F5; /* 内枠の色 */
background-image: url(http://blog80.fc2.com/c/chiiroom/file/20070618075859.jpg); /* 画像URL */
height: 300px; /* 画像の高さ */
background-repeat: no-repeat; /* 画像の並べ方 */
background-position: left; /* 表示位置 */
}
/********************************************* ▲ ヘッダー ▲ */

#header_body { 　}の中に画像指定が入れ込んでなかったのと
「～」の記述が入っていたのも原因だったかと思います。

二度手間を取らせてしまって申し訳御座いません。

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

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

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

> ☆★ちぃ★☆さん、かどりんさん

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

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

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

サブタイトル

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

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

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

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

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

いたおさんの
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 ] [ 編集 ]

> sitetakeuchiさん

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

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

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

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

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

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

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

> ちゃんさん

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

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

ケアレスミスでした

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

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

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

コメントの投稿