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

スタイルシートワイド化に伴いデザインを弄っていたところ、気が付いた事があったのでお知らせします。と言っても何人の方がご覧になるのか・・・・・

スタイルシートのバックに貼り付ける画像は小さすぎない方が良いようです。
少し前から、４×４ｐｘの透過ＧＩＦを使用していましたが、コレを３２×３２ｐｘのファイルに差し替えたところ、表示速度が三倍当方の旧型ＰＣでの体感速度ほど早くなりました。
いや、今までが異常に遅かっただけだとは思いますが・・・・

透過当初は４×４ｐｘの透過ＧＩＦを使用していました。その時はＩＥだと遅いなーとか思いつつ、同等のイメージが伝わればいいかなと。
で、ほぼ全て張り終わった後にコンテンツ共通部分をカーボン柄のファイル２４×２４ｐｘに差し替え昨日まで使用していました。その時は気づかなかったんですが・・・・・。
本日コレを４×４ｐｘのファイルの差し替えた直後から急に動作が遅くなったと感じたので、急遽３２×３２ｐｘのファイルを作り試してみたら・・・

大きければ大きいほど良いのかは試していないのでわかりませんが、一番効率の良いサイズが有るかもしれません。

元々みんカラ標準スタイルに使用されているの透過ＰＮＧ形式のファイルが１×１ｐｘだったので、小さい方が良いのだろうと勝手に解釈していたのが間違いだったと思います。

ＧＩＦ形式のファイルだけに限った事でなければ、ＰＮＧ形式のファイルも３２×３２ｐｘ位若しくはそれ以上のほうが良いかもしれません。

先日こんなブログを書いてから舌の根も乾かないうちに・・・・・でもやってみたかったので。

ＩＥ６でも背景固定が出来るようになったので、今一度スタイルシートの透過に挑戦してみました。透過ＧＩＦで出来るのではと考えていたので、ファイルを作成し現在「コンテンツ共通」部分はフォトギャラリーの２番、「プロフィール本文」は１番です。参考資料/使用ソフト

とりあえず５パターンのメッシュをＵＰしてあります。暫くは削除しないので気に入ったらダウンロードしてお使い下さい。使い方は先日のブログをご覧下さい。で　url=「画像のアドレス」に読み替えて頂ければＯＫです。
まあ試すだけなら、オイラのフォトギャラリーのアドレスを直接指定して頂いても構いませんが、将来削除ｏｒ移動をするかもしれません。

小さいフォントだと読み難いかもしれません。一応の対策として、コンテンツ共通/コンテンツ領域に「font-weight:bold;」を追加しました。

ＦｉｒｅＦｏｘの場合判らないかもしれませんが、ＩＥ６では画面の表示が元々遅いのに大分遅くなりました。

別の言い方では「ＩＥ６対応は諦めました」となります。

スタイルシートを弄り終わってから、久し振りにＩＥ６を起動してマイページを見てみると、結構見難かった醜かったので改めてスタイルシートを修正しはじめたのですが、背景の固定方法がどうしても判らなかったので、今更ながらＩＥ７にアップデートしました。

ＦｉｒｅＦｏｘでは見た目が変わっていない筈ですが、ＩＥ７をではがらりと変わっています。主な修正点は

background:#000000 url(body背景orタイトル他.jpg);
を
background:#000000;
background-image:url(body背景orタイトル.jpg);

background:#000000 url(contents他.PNG)repeat;
を
background:#000000;
background-image:url(contents他.PNG);
background-repeat:repeat;

background:#068;
を
background:#006688;

です。上記の箇所はＦireＦoxだと同様に見えるので、文字数節約の為に修正前の記述を使っていました。それとこの場合「filter:alpha(opacity=不透明度(0-100))」「opacity:不透明度(0-1);」のタグは使用していません。
「スタイルシート　透過」でサーチした時に見つけて試してみたのですが、文字も透けてきます。同色系で輝度の変化が少ないbody背景だと判り難いですが、風景写真などをそのまま貼り付けてあるとスクロールする毎に文字の明るさが変化します。勿論その効果を狙って使用するならＯＫですが、オイラのページには不向きだと思いました。それと
filter:alpha(opacty=***);はＦｉｒｅＦｏｘが未対応
opaccity:0.**;はＩＥ７が未対応でした。
両方書いてあれば同等に見えるのですが。（＝＿＝；；

でも、どうしても同じにならなかったのがカレンダーです。ＦｉｒｅＦｏｘでは全ての行が画像内に納まっていますがＩＥ７では二行目以降が間延びしてみえます。おそらく「padding」の解釈の違いだと思いますが・・・ＩＥ７では一文字毎に「padding」を設定しているのに対しＦｉｒｅＦｏｘでは文字全体に対して「paddding」を設定している。(ように見える)

もし、この症状(の改善)について詳しい方がいらっしゃいましたら、ご教授お願いします。

最近スタイルシート関係で連投してますが、疲れてきたのでそろそろやめようかと思っています。今日は少々早い気もしますが、花見にでもいってたこ焼きでも食べて充電してこようかと。

さて、現在の仕様半透過ですが、まず要点だけ説明しますと

以前のブログでスケスケ完全透過にする方法を紹介してますが、あれとは逆で、 background:;とした箇所を background-image:url(https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/032/bg.png); background-repeat:repeat; にすればＯＫです。 追記/background-repeatは省略値がrepeatなので指定しなくても良い

画像はみんカラ標準スタイルの「ねこ」（若しくは「いぬ」）に使用されている物でそれのＵＲＬです。また「イルカ」に使用されているほうは
>https://cdn.snsimg.carview.co.jp/cvmaterials/minkara/user/css/028/bg.png
です。みんカラ標準テーマの部品なので、削除される事は無いと思います。
追記/'09年6月現在一部の部品について移動されているようです。将来この部品も移動するかもしれません。使用される場合はご注意下さい。

良く見比べないと判りませんが、若干透過率が違うようです。両方とも1px×1pxの極小の画像をなので、ブラウザ上では画像単体としての確認は困難かと思われます。

ただこの方法では背景がどうしても暗くなるので、白あるいは淡色ベースに黒系のフォントを使っている方には向きません。

私はＦｉｒｅＦｏｘ3.0.6を使用しているので正しく表示されますが、ＩＥ６には対応しておらず指定した箇所が真っ黒になるので注意して下さい。詳細はこちらにお任せするとして、これはＰＮＧ形式のファイルに完全には対応していないからだそうです。他にもサポートしていないブラウザがあるかもしれません。