えす＃０５５のブログ一覧

またスタイルシートのネタだよ・・・・
現在のヘッダー画像ですが、１２０１×４００ｐｘのサイズを使ってます。

勿論、通常(簡易編集)のヘッダーではこのサイズは設定できないので少々工夫をしてます。
詳細編集を使わないと設定出来ないのが難点ですが、

ユーザー領域/div#MinkaraBody
background-color:transparent;
background-image:url('ヘッダー画像1200px*400px位を推奨');
background-position:50% 0%;
background-repeat:no-repeat;

で背景はこちらで指定してます。＜－背景固定仕様
ページBody/body
1枚絵の場合
background-image:url(背景画像);
background-attachment:fixed;
background-repeat:no-repeat;
background-position:50% 0%;

小パターンリピート表示の場合
background-image:url(背景パターン);
background-attachment:fixed;

追記/この他ワイド化に対応する為、詳細編集/タブ/タブ(ul#MainNav)に
padding:220px 0px 0px 5px;を入れてます。

元々IE6で閲覧した場合に背景が固定される様にする為に、ユーザー領域はbackgroundの設定をしていませんでした。で先日撮影してきた写真をヘッダーに使いたいなーと考えていた所、この方法を思いつきました。
ヘッダー領域を広げればもっと大きいサイズにも出来ますが、オイラ的にはコレくらいが丁度良いサイズなので。

それから上記の
background-position:50% 0%;
を
background-position:50% 100%;
に変更すればフッターの様な感じにはなりますが、コンテンツ部分かサイドメニュー部分とと重なる事が避けられないので、効果としてはイマイチかと思います。

あとはヘッダーとしてでは無く背景として使うと、スクロールする背景と固定した背景の二種類の背景をつかうとかも出来そうです。ページを開いたら「山」の画像でスクロールしていったら「海」の画像とか。

だいぶ放置していた箇所の修正が終了しました。カレンダーも少し幅広に出来たし、それにしてもなぜブログだけ700px幅表示可能でそれ以外は700px幅表示が出来ないんだろう？
5/9_20時頃追記/割と簡単に出来てしまいました。(*^-^*;;...なぜ今まで気付かなかったんだろう・・・・・

それはひとまず置いといて、
ＩＥ６とＦｉｒｅｆｏｘでは「width」「margin」「padding」等のタグでパラメーターを％で指定した場合、表示位置が異なる事が多かったので、気になるところはpxの指定に修正しました。おそらく１００％となるべき基準そのものが違うのではないかと思うのですが、それぞれのブラウザが何処を基準としているかは・・・┐(´ー)┌フッ
解っていません。また解ったとしても、どうにもならないので調べる気も無いんですが・・・・・・。

随分前のことですが、スタイルシートを書き出す事が出来るようになって、スタイルシートのバックアップが楽になりました。修正前に書き出しておけば、読み込むだけで元の状態に戻せるから色々冒険が出来ます。しかも何個でもバックアップが作れるので、季節や気分によって簡単に切り替える事も。
今のソースはここ、テキストファイルにコピペしてスタイルシートとして読み込めば使用(試用？)出来ます。後はお好みで料理して下さい。

みんカラの仕様変更に伴い、スタイルシートワイド化のバージョンアップがありました。それをベースにとりあえずは、

ブログ幅700px化、
サイドメニュー210px化、
タイトル領域高さ50px化、

ページボディにねこ壁紙貼り付け＆固定、
コンテンツ領域に白メッシュ(透過gif)の貼り付け、
背景白ベースに合わせてフォント色＆サイズ最適化等等・・・。

んー疲れた。自分で差分を抜き出して修正できればいいんだけど、内部構造が大分変わっていたから・・・・。でこちら

追記/ＩＥ６でもワイド(700px)表示が出来てました。

この記事は、公開したスタイルシートをお使いの皆様へ について書いています。

まあ、いつかはこーなると思ってはいましたが。写真はFirefox3で表示させてます。

コンテンツ領域＜div#BodyBlockMain＞に＜overflow:hidden＞が自動で設定されるようになりました。

今までも、「※display:block、overflow:hiddenが追加または設定されます。」とは書いてあったのですが、実際は「overflow:visible」でも保存出来ていて、その場合「overflow:hidden」は設定されていませんでした。

午前中に見たときは表示していたので、その後の変更だと思います。先ほどスタイルを変更し保存した後にこうなりました。
多分正常に動作するようになっただけなんでしょうが・・・・・

ＩＥ６では全部表示されています。っていうかＩＥ６はタグがどうあれ勝手にボックスを広げて表示する仕様みたいです。こちらはIEtabでの表示

この記事もＩＥ６のエンジンを使用したＩＥｔａｂの中で書いています。ＩＥ７/ＩＥ８の場合はどの様に表示されるのか非常に興味があります。
何方でも良いのでコメント頂きたいです。

現在幅を広げて表示されている方は、現在ご使用のスタイルの変更をし保存した時点で上記の状態になるかも知れないので気をつけて下さい。

はみ出すかもしれないので頻繁に「改行」してます。

追記/どうも解かりません。過去に書き出したＣＳＳファイルを幾つか読み込んで見ましたが、ＦｉｒｅｆｏｘとＩＥ６で、幅広で表示出来たり出来なかったりします。両方で表示を確認してから保存していたのに・・・・

更に追記/Firefoxではワイド表示出来ましたが、ＩＥ６まだ駄目です。ひとまず620px表示に切り替えます。

きりが無いのでそろそろ終りにしようかとおもいます。構造的には大体完成しました。
多分（＾へ＾；；
数値の調整だけで900pxまでは対応できるので十分かと、で後はデザイン的なもので部品を入れ替えるくらいかなー。

透過に関しては、現在各種バックグラウンドに透過ｇｉｆのメッシュを使っているだけですので、大抵のブラウザには対応すると思います。将来は透過ｐｎｇと入れ替えていただければ、更に綺麗になるかもしれません。

背景固定はＩＥ７/ＩＥ８ではどうなっているか判りません。固定方法が違うらしいので・・・・・

今後サイドメニューは左を基本にしようと思ってます。文頭がブラウザからはみ出す事がまず無いと思うので。

本当はみんカラの基本スタイルから幅広への変更の仕方を紹介しようと思い、色々調べ始めたのですが・・・・・










挫折しました。ｏｒｚ
今出来ている雛形に画像を張り替えていく方が早道かと・・・・・・・

公開するスタイルシート左右に関しては大体把握しているつもりなので、FireFox3とIE6に関しては出来る範囲でお答えします。
追記/みんカラ運営部より禁止プロパティが追加され、コレ以前に作ったＣＳＳでは幅広表示に対応出来なくなりました。また、この時に公開していたＣＳＳについては削除しました。
現在は別仕様(700px)のものを公開しています。