スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

PIEその後。

以前、角丸がキレイで惚れ込んだPIEですが…
乱用してるとページが少々重くなるだけならまだしも
IE6でレイアウトが崩れてしまう時がある…という悲しい状況に遭遇…_| ̄|○

ページ数の少ないサイトなら、
その都度検証して、最悪ハック記述して直してやるのもアリかもしれませんが、もうこの切羽つまった状況でPIEのために時間はとれん!!!というわけで、今回は使うのやめました…。

いつになったら、CSS3を遠慮なく使うことができるのか。
最低でも2014年のXPのサポート終了までは無理っぽい気がする…IE6が消えてくれないだろうから。
スポンサーサイト

PIE.htcが使えない時の対処法。

IE6/7/8でもCSS3に対応させてくれるCSS3 PIE(PIE.htc)

角丸をcssで記述したくて探してたら見つけました。
他にもIE-CSS3(ie-css3.htc)とかcurved-corner(border-radius.htc) とかあって試してみましたが、PIE.htcが一番綺麗に角丸が表示されました。(他のはアンチエイリアスがかかりすぎてるというか、関係ない直線部分までぼやけてるんですよね…)

…が、しかし。
クライアントのテストサーバーにアップするとまったく効かない(>_<)
あれこれ(PIE.htcファイルへのパスを絶対や相対に修正したり、position: relative;を足したり…)試しましたが全てダメで。
サーバーのせいかとも考えたのですが、先にアップしていたiepngfix.htcはうまく動作してたので、それはないかと。
結局悩みに悩んで、でも角丸が一番綺麗に表示されるPIE.htcをなんとか使いたい!と、CSS3 PIEをダウンロードした際同梱されてたPIE.jsに変えようと諦めかけたその時、PIE.phpが目についてファイルを開いてみた。

記述は短いけどすべて英語なので、私のつたない英語力では理解しきれてないのですが
php環境でPIE.htcファイルを認識させるためのファイルと理解し、ダメ元で設置してみた。

  1. cssファイルに記述していた.htcファイルの拡張子をすべて.phpに変更。
    behavior: url(PIE.htc); → behavior: url(PIE.php);

  2. PIE.htcと同列にPIE.phpを追加設置。


これだけ!!!!
効きました!!!!!!

その他の注意点は他のサイトでも紹介されているものもありますが、
css記述の際のPIEへのリンクは、表示されるhtmlファイルからの相対パスで。
position: relative;は、角丸処理したいボックスの下に背景画像がある場合、IEでは角丸処理したボックスが背景画像の下に隠れてしまうので、それを防ぐためには必要。

swfobject.js設置方法

昔はJavaスクリプト等でプルダウンメニューを作っても、プルダウンする箇所にFlashがあると、Flashの下にそのプルダウンが潜ってしまう…っていうのは当たり前のご法度だったように思う。
なので苦肉の策で、該当のページだけプルダウンメニューもFlashで…と考えていた私はもう浦島太郎状態。。。_| ̄|○
いつの間にか進化してるのです。
あぁ、ずっとこの世界に居るのに、何やってんだか(-_-;)

そして、Flashの設置はドリ(Dreamweaver)にお任せで自動既成される「swfobject_modified.js」や「expressInstall.swf」に目をつむってきた私でした。
(しつこいですが、Javaスクリプトとか苦手なもので、下手にカスタマイズして我流なものを設置するよりも、少々ソースが汚れてもドリのせいにした方が気が楽だったのです)

が、しかし。
今回、担当しているサイトのリニューアルを機に一念発起。
やはりせっかく一から作り直せるんですから、仕様をすべて見直したくなり、Flashの設置についてあれこれお勉強。
で、見つけました、swfobject.js

こんな良いものがあったのですね、感動。。。(T_T)
これなら簡単に設置できるし、更新時のFlashのバージョン操作もカンタン♪
しかも代替えの画像等やテキストも好きに設置できるし!!!
この代替え画像でFlashのインストールとJavaスクリプトの有効設定をお願いしとけば、それぞれの対策なんかもう必要ないじゃん♪♪♪(…って、こんなこと、他の方々はトーゼンなんでしょうね…すみません)
ただちょっと悩むのが、<noscript>の記述。
これがあれば、私的には<noscript>要らないと思うんですが…、偽善でも置いとくべきなんですかね…?

ただ、最初に述べたように、プルダウンを上に出す方法で、悩みまくったので覚書しときます。
いや、解説してあるサイトは多々見かけたのですが…SWFObject 2.2での記述方法を見つけるのに苦労したので。(ほとんどが1.5だったんですよね)

JavaScript(function.js)
  1. params = {};

  2. params.wmode = 'Opaque'; //Flashの背景を不透明化(透明化:Transparentでも良い)

  3. params.scale = 'noscale';

  4. swfobject.embedSWF(

  5. 'swf/myflash.swf', //swfファイルへのパス(必須)

  6. 'flashanim', //置き換えるID(必須)


  7. '600', //swfの横幅(必須)

  8. '300', //swfの高さ(必須)

  9. '10.0.0', //必要とするFlashPlayerのバージョン(必須)

  10. '', //expressInstall.swfのURI(任意)

  11. '', //flashvarsオブジェクト(任意)

  12. params //paramsオブジェクト(任意)

  13. );



HTML
  1. <head>
  2. <script type="text/javascript" src="js/swfobject.js"></script>
  3. <script type="text/javascript" src="js/function.js"></script>
  4. </head>
  5.  
  6. <body>
  7. <div id="flashanim">
  8. <img src="images/daigae.jpg" alt="" width="600" height="300" border="0" />
  9. </div>

IEのスクリプトエラー

前回のNivo Sliderをカスタマイズしてサイトに反映したら、全く関係ないページで突然IEでスクリプトエラーが…(-_-;)
FirefoxやGoogle Chromeでは何も表示されないのに…(>_<)
1.png

一体何がどうしたの?というわけで、IEのスクリプトエラー詳細を見るとこんな感じ。
2.png

わ、私にオブジェクト指定とか言うなー!!!意味わからんし!(T_T)
とりあえず、該当のJavaスクリプトファイルの該当行を見てみると、やはり今回追加した行でエラーが出ている。でも記述は間違ってない。だって、練習のときのコピペだから。(威張れません…)

で、ぐぐりまくってようやく問題が分かった。

私はJavaスクリプトをすべて同じ外部ファイル(js/function.js)にまとめていたので、今回Nivo Sliderのfunctionもそこに追記。
当然関係ないページもそのJavaスクリプトファイルを読みに行きますから、jQueryの記述($(function(){…)があるのに、jQuery本体を読み込んでなかったからエラーが出たのですね…。

というわけで、今回のjQueryを利用するfunctionだけ別ファイルにすることで無事エラーを回避することができました。めでたし、めでたし。
Profile

chiemi09

Author:chiemi09

JavaスクリプトもActionスクリプトも苦手なWebデザイナー。
せめてjQueryのカスタマイズができればと仕事の合間にお勉強中です。

Recent Entries
Archives
Theme
Search
RSS
Bookmarks
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。