【CSS編集】CSSカスタマイズ中：とりあえず解決

「プレーンブルー」と「空」テンプレートを融合させたようなテンプレートを作成中です。

しばらく見づらい状態が続くかもしれませんがご了承くださいませ。

---

とりあえず、終了。

ベースにしたのは「クリアブルーの左メニュー」
メニューの配色がイマイチだなぁ。
メニューバーとメニュー背景のバランスがどうもしっくりきてませんよ。
まあ、とりあえずこのまま行きます。

本当にデザインと言う物は難しい…。

そして、全体の背景は「無し」にしたのでデスクトップデザインに依存。「白」か「薄い水色」にしようか迷った挙句…。見る人任せに（爆）

基本的にはフォントサイズと色、背景画像と背景色と各メニューの囲み（border）ぐらいしかいじってないです。

背景画像は「空」テンプレート同様にしました。

画像は、綺麗な空の素材をデジカメから拾ってきてトリミング。
それから、背景色と重ね合わせて、継ぎ目をMicrosoft PhotoEditorでぼかしました。これにより背景色と画像の継ぎ目をなくしています。


それから、画像ですが、ページ全体の下に貼り付けてしまうと、折角の「空」画像が見えなくなってしまうので、「空」テンプレートのスタイルシートを参考にブラウザのウィンドウの下に画像が貼り付く設定にしました。

参考までにCSSの一部を掲載しておきますね。

/* ページ全体囲み　*/ #content{ margin: 0px auto; border-right: 1px solid #B6CEE7; border-left: 1px solid #B6CEE7; background-color: #C8D5FF; background-image: url(http://blogimg.goo.ne.jp/user_image/4c/cf/8123e0eba9f47e1402260a07d86269da.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: center bottom; text-align: left; width: 760px; }

青字の部分が背景色と背景画像。赤字の部分が貼り付ける設定。

これが出来たので非常に満足。
これにより各記事に「空」画像を貼りこむ必要がなくなりましたです（嬉

「見づらい」とか「配色が変」とか「こうした方がいい」など、ご意見をいただけると非常に嬉しいです。

---

んがぁ!!!

私はOperaを使っているんですがIEとFireFoxでチェックしたら、それぞれに問題が…。

IEの方
背景画像が、ページの下端に貼り付いている。
FireFoxやOperaだとちゃんとウィンドウの下にに張り付いていて、ウィンドウサイズを変えてもちゃんと追従するんだけど…。

FireFox
この記事の表が記事枠からはみ出す。
（おそらくurlが長すぎるからだとはおもうのだが、表サイズを固定しても変化しない）

えぇっと、対応策がわかりませんので、わかる方教えてください。

NN4.7はもともと表示が崩れているのでパス。
NN7.1をお使いの方は不具合があれば教えてください。

それと

記事を編集していると
編集画面に
{$entry} {/$entry} タグが入力されていません
って表示されるんですが、これはどういう意味なんでしょう？

「更新」を繰り返し押すと、でてきたりでてこなかったりです。

こちらも情報をお待ちしています。

---

とりあえず、IEで画像がウィンドウに張り付かない件は解決しました。

どうやら、この「background-attachment: fixed;」は「#content（/* ページ全体囲み */）」内では無視される様子。「空」同様に「body（/* ページ全体の背景と余白 */）」に設定すればIEでもちゃんとウィンドウ下に画像が張り付くことがわかりました。

残念ながら両サイドの色を指定することが出来なくなってしまいました。
これの対応策としては、画像を縦長にしてしまえばOKなんですが、まあこの配色でも悪くはないから放置します（笑）

/* ページ全体の背景と余白 */ body { width:; margin:0px; padding:0px ; background-color: #C8D5FF; background-image: url(http://blogimg.goo.ne.jp/user_image/4c/cf/8123e0eba9f47e1402260a07d86269da.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: center bottom; }

---

上記の修正をしたら、FireFoxでのテーブルが崩れる件も直ってしまいました。

---

とりあえず、この方の意見を聞いてみたいのでトラックバック（笑）

見づらい箇所とか修正箇所があったら何なりと…。
ちょっとドキドキ。