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

最近こんなのばっかりですが、

タブのデザインをカーボン風にしました。またhide_3569さんからのＩＥ６対応のブログが有ったので、その点を修正しました。

タブのデザインはです。一応小さいタブの大きさには合わせて作ってますが、repeat表示でも綺麗に繋がるようにしてあるので背景としても使用可能です。

コレにを重ねています。これだとメッシュの色を変えるだけで、将来青や緑などにも簡単に出来ます。ＩＥ６では無理ですが、透過ＰＮＧを使えば更にデザインの幅が広がると思います。

この記事は、横拡張750pxスタイルシートをIE6に対応させました！ について書いています。

見ての通りです。ＩＥ６でも数日前の本家様に追いつきました。＜昨日のブログ写真と見比べてください。

コレが出来るとブラウザの幅を殆ど変えずに６５０ｐｘの幅を表示できます。

一応コンテンツ共通・サイドメニュー共にセンターに表示させているので、左右の入れ替えが簡単に出来ます。＜div#BodyBlock＞で右寄せの設定＜float:right;＞をしているので、左右の入れ替えをする場合は、ここを左寄せの設定＜float:leftt;＞にすればＯＫです。設定した物はこちら。

サイドメニューを外寄せにすれば、いまのＣＲＴの解像度でも７００ｐｘまでは対応出来そうです。

追記/サイドメニュー位置を変更しました。

元ネタはこちらですが、表示幅を変えて６２０ｐｘと６６０ｐｘを二種類作って見ました。なぜこんな中途半端な数値なのかというと、自分の環境に合わせたからなんですね。写真は６６０ｐｘです。


最大９００ｐｘまで確認してますが、ディスプレイの関係上そこまでは広くなくても良いかなと思ってます。ＩＥ６の場合は広告側にコンテンツ領域部分がはみ出ると、サイドメニュー全体が下部に廻り込んでしまいます。ＩＥ７は広告の下にコンテンツ領域がはみ出ても、サイドメニュー領域に重ならなければ大丈夫なようです。

それを逆手にとって広告をトップには出さないスタイルも作れるのですが、表示が崩れているとは思われたくないので頑張ってみました。
一部気になるところもありますが、宜しければ使ってみてください。
７００ｐｘ対応や８００ｐｘ対応は希望があればアップしますが、スタイルシートをある程度読む事が出来れば、修正箇所はすぐ解かると思います。

使い方は、
テキストエディタメモ帳などのを起動して、
リンク先のテキストをマウスで範囲指定してコピーした後
メモ帳に貼り付けして名前を付けて保存します。
保存したファイルの名前は「(任意の名前).css」にリネームして下さい。

後はこのファイルを読み込めば、ＯＫです。多分
読込方はこちらが参考になるかと思います。

この記事は、写真サイズ640px, 700px, 800px対応スタイルシート(700pxはIE6対応) について書いています。

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

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

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

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

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

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

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

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

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

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

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