きまぐれAWA's Life

アクセスカウンタ

zoom RSS CSS(トラブル編) 管理ページのタイトル画像設定で表示が変になる理由【解決済み】

<<   作成日時 : 2009/04/13 10:12   >>

ブログ気持玉 0 / トラックバック 1 / コメント 13

2010年5月23日のウェブリブログの仕様変更により、このトラブルは解消されています。
(ほし)ウェブリ事務局記事より 『(5/23)タイトル画像設定機能修正』

現在ではコンテナ領域の背景の抜け落ちはありませんが、備忘録としてこの記事は残しておきます。
なお、以下記事内容は2005年5月23日以降のウェブリブログの仕様には当てはまりません。




管理ページからブログのタイトル画像を設定すると表示がおかしくなります。
このことについては前にも書いたのですが、おかしくなる原因がわかりました。
問題になるのは『header_customize.css』というスタイルシートです。

管理ページからタイトル画像を設定すると読み込まれるスタイルシートですが、
ちょっとこのスタイルシートの記述をみてみましょう。


/* ------------------------------
トップ画像設定
------------------------------ */
#container{
background:url("http://webryblog.biglobe.ne.jp/images/spacer.gif")
no-repeat;
}

#banner{
background:url("タイトル画像のURL") no-repeat;
}
#subbanner{
background:url("タイトル画像のURL") no-repeat;
}

/* ------------------------------
タイトル位置設定
------------------------------ */
#banner h1{
padding:0;
position:absolute; top:auto; left:auto; right:10px; bottom:10px;
}

#subbanner h1{
padding:0;
position:absolute; top:auto; left:auto; right:10px; bottom:10px;
}



赤文字の部分の 『spacer.gif』 は 1px×1px の透過画像です。
この画像がテンプレートで設定されているコンテナ部分のデザイン指定と置き換えられます。
その結果、テンプレートの背景画像や背景色がキャンセルされてしまいます。


こちはら依然書いた記事にも載せた「プレーン>デフォルト」のテンプレートで
管理ページからタイトル画像を設定してものです。
※ ブログ >設定 >基本表示設定(ブログ紹介編集・デザイン)>タイトル位置/画像設定(任意)

画像



画像



タイトル画像を変更したところ、コンテナ部分部分の背景色が表示されなくなりました。
このテンプレートではコンテナ部分に次のようなデザイン指定がしてあります。

#container{
border:1px solid #9abee1;
background:#fff;
}


青文字部分に『background:url("http://webryblog.biglobe.ne.jp/images/spacer.gif")』の
デザイン指定が上書きされるので背景色が消されてしまいます。

管理ページからタイトル画像を指定すると必ずデザインがおかしくなりますので、
タイトル画像はCSS編集でおこなう事を強く推奨します。


タイトル画像の設定方法についてはこちらの記事を参考に(ん)

CSS(スタイル編) 第1回 タイトル画像を変更する♪



それでは、今回はこのくらいで(にこ)


|ω・)ノシ See you♪

|彡 サッ



■ ブログをいじっちゃおぅ♪ 〜 ブログのレシピ 〜 ■




(ほし)コチラの記事は2011年5月23日のウェブリの仕様変更に伴い手直し修正をしています。

テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ

トラックバック(1件)

タイトル (本文) ブログ名/日時
2年もかかってやっとタイトル画像設定機能の不具合修正入りました。
ずいぶんと長いことかかりましたが、やっと正常に役割を果たせる機能となりました(あせ) ...続きを見る
きまぐれAWA's Life
2011/05/23 13:11

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(13件)

内 容 ニックネーム/日時
こんにちわぁ〜(@にや)
今日、ブログ改造してみました(ん)
mairisさんの説明通りに変えてみたらできたし(拍手)
ホント助かりました〜ありがとうございます(ういんく)

またお邪魔するかと思いますが、
末永く仲良くしてくださいね〜(わら)
ユキ
2009/04/13 13:58
 すごいですね〜(拍手)
ブログ記事のカスタマイズで一冊の本が書けそう(わぁ)
NECから原稿料もらえそうww
 背景色が上書きされるのは、デフォルトのテンプレート背景色(bodyタグの背景?)を反映させたいため?(あれ)
 某HPの管理もあり、大変かとは思いますががんばってください(三角帽子)←○○あさんに聞きました(にや)
 
 
 
 

松下禅尼
URL
2009/04/13 18:37
ユキさん、いらっしゃいませ(にこ)
ブログ改造おつかれさまでしたー(ん)
拙い内容ですがお役に立ててよかったです♪
また何かありましたらご利用ください(にや)
いつでも歓迎です〜♪

>末永く
こちらこそ〜です(ぺこ)
mairis
2009/04/13 21:46
松下さん、いらっしゃいませ(ん)

>本
すぐ廃版になったりして?((ひょえ))
本に出来るほど濃い内容の記事もないですよ〜。
でも印税生活とかいいですね♪(うひょー)

>上書き
ん〜、おなじ記述しちゃうと後に書いたものが有効で、
前に書いたものは無効になってしまいますよねー(あれ)
「background」使った時点でアウトだと思うのですよ。
思い違いか、うっかりなのか…
と言うか、この現象を確認してるのかさえ疑問です(あせ)

>某HP
一応「お手伝い」という形なんですけどね(気まずい)
一時的に管理させていただいてます。
部外者なのでクラブカラーが見えてなかったのですが、
今回のデザインが受け入れてもらえたのでよかったです♪

○○あさんがHTMLを覚えたらうちはお払い箱です(ひょえ)
mairis
2009/04/13 22:07
>後に書いたものが有効
たしかにそうですね・・・(@あれ)
今見ましたら、#containerの背景って、結構凝ってますねぇ〜
てっきりボックス背景ででやってると思ったら・・・縁を彩った高さ10ピクセルの画像での繰り返し表示とは・・・やられました(わら)w
 
 
松下禅尼
URL
2009/04/13 23:05
>松下さん

コンテナのデザイン指定は百害あってなんとやらなので、
削除したら解決かな〜って思うのですが(まじ)
でも気がつかない何かの理由があるのかしら?

この件についてはウェブリにメールはしてみたり(ん)
問題解消してもらえるといいのですけどね〜(こなた)

>背景
思いついたデザインを実験チャレンジしてみました(にや)
メイン部分とサイドバーにメリハリ付けたかったのが、
このデザインになった一番の理由です。
罫線だけじゃちょっとものたりなかったので(ひょえ)
HTMLに手を加えれるともう少しやりようもあったんですけど、出来ないのでかなり強引なデザイン指定がしてあったりします(^◇^;)

なかなか面白いデザインになりましたけど、オール画像のせいでページの読み込みが遅くなるのが欠点でしょうか(ノ∀`)タハー
mairis
2009/04/14 08:16
はじめまして(@にこ)

素晴らしいブログ拝見させていただきました

下のって絵文字のかわりにもなるのでしょうか??
CSSの編集やいろいろ知ってあるみたいですね。
良かったらいろいろ教えていただけませんか??
まだまだ勉強中なので参考にさせていただきたいです。

(@^^)/~~~
pinku
2009/10/02 14:29
pinkuさん、はじめまして(にこ)
いらっしゃいませ、こんにちは♪

お褒めのお言葉恐縮です(ぺこ)
ちょっと恥ずかしいです(*ノェノ)

>絵文字
ウェブリで用意されている絵文字と同じようなものになります。
文中のある文字列を画像に置き換えるって仕組みです。
この絵文字変換スクリプトの設置の仕方については、絵文字が並んでる下のほうのリンク(ぞんさんのところ)からスクリプトを公開しているサイトに飛べますので、興味があったら見てみて下さい。

>CSS
まだまだうちも勉強中だったりです(にこ)
お役に立てるコトがあればなんなりと(ん)
一緒にお勉強していけたらいいですね〜♪
mairis
2009/10/02 16:00
mairisさん

b(⌒o⌒)d おっ \(*^▽^*)/ はぁー!!

わぁ〜〜い
ありがとうございます

そうさせていただきます。

(*^ー^)ノ☆。・:*:.・★,。・:*:.・☆マタネー


pinku
2009/10/05 09:07
mairisさん

mairisさんのところに聞くことではないのですが
またまたすみません・・・
ぞんさんのところに行って
コメを残そうとしたのですが何か制限がかかって
できませんでしたどうしたらできるのでしょうか

pinku
2009/10/05 09:22
pinkuさん、いらっしゃいませ(にこ)

>絵文字
これ使えると記事にアクセントがつけれるので良いですよ〜(わら)
設置大変かもですが頑張って下さ〜い(ん)

>コメント制限
あらら〜、そうなんですか(うる)
何で制限かかってるのかな(あれ)
コメントを受け付けない設定にしてある場合は仕方ないと思います。
スパム制限とかだったらチェックすれば管理ページで見れるので気持ちは伝わると思います。

ウェブリの不具合で書き込めないってことなら、時間をおいて、または日を改めて挨拶すればOKですね(ん)

いずれにしてもスクリプトを利用するだけなら特に問題ないと思いますので感謝しながら使わせていただきましょう(にこ)
mairis
2009/10/05 13:51
mairisさん

(o´ノωノ`o)こんにち・・ヽ(o´・∀・`o)ノわぁ♪

お陰さまでかわいい絵文字ができました(@にこ)

(*^ー^)ノ☆。・:*:.・★,。・:*:.・☆マタネー

pinku
2009/10/08 15:14
>pinkuさん
絵文字設置お疲れ様でした(ん)
うまくいったようで何よりです(にこ)
ではでは〜楽しいブログライフを(わら)
mairis
2009/10/08 20:20

コメントする help

ニックネーム
URL(任意)
本 文
  現在の閲覧者数:

* ぱにゃステ *

『ぱにゃステ』 customized by mairis
 
 
ふぉろーみー

CSS(トラブル編) 管理ページのタイトル画像設定で表示が変になる理由【解決済み】 きまぐれAWA's Life/BIGLOBEウェブリブログ
文字サイズ:       閉じる