スポンサーサイト

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

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だけ別ファイルにすることで無事エラーを回避することができました。めでたし、めでたし。

スライドショー(Nivo Slider)カスタマイズ#1

使用サンプル:Nivo Slider

effectをデフォルトのrandomにしておくと、IE6で画像の切替が挙動不審。boxRainにしておくと、安定します…なんでだろ。ちなみにNivo SliderはIE6非対応らしいです…。
このスライドショーは画像からリンクをはることができるので、バナーの切替アニメとしても使えそうです。

JavaScript(function.js)
  1. $(window).load(function(){
  2. $('#slider').nivoSlider({
  3. //アニメーションの種類(random、fade、sliceUp、sliceUpDownなど)
  4. effect:'boxRain',
  5. //アニメーションのスピード
  6. animSpeed:500,
  7. //静止時間
  8. pauseTime:2000
  9. });
  10. });


CSS(style.css)


HTML
  1. <head>
  2. <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
  3. <script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
  4. <script type="text/javascript" src="js/function.js"></script>
  5. <link href="css/style.css" rel="stylesheet" type="text/css" />
  6. </head>
  7.  
  8. <body>
  9. <div class="slider-wrapper theme-default">
  10. <div id="slider" class="nivoSlider">
  11. <a href="#" target="_self"><img src="001.jpg" width="600" height="300" alt="" /></a>
  12. <a href="#" target="_self"><img src="002.jpg" width="600" height="300" alt=""
      title="#htmlcaption" /></a>
  13. <a href="#" target="_self"><img src="003.jpg" width="600" height="300" alt="" /></a>
  14. <a href="#" target="_self"><img src="004.jpg" width="600" height="300" alt="" /></a>
  15. </div>
  16. <div id="htmlcaption" class="nivo-html-caption">htmlを入れることもできます</div>
  17. </div>
  18. </body>

文字の中で背景画像が浮遊するアニメ。

使用サンプル:Text with Moving Backgrounds with jQuery

今回は分かりやすくするために、文字は太め、背景画像も色がたくさんあるものを使用しましたが、背景画像をシンプルなものにすると、文字が光っているように見せることも可能かな。
しかし、これはIE6非対応なので、まだ実用性は低いかも…。

JavaScript(function.js)
  1. $(function(){
  2. moveBgAround();
  3. });
  4.  
  5. function moveBgAround(){
  6. //x、y軸に0~400までの数値をランダムに振る
  7. var x = Math.floor(Math.random()*401);
  8. var y = Math.floor(Math.random()*401);
  9.  
  10. //背景をランダムに動かす時間(数値を下げると早く動く)
  11. var time = Math.floor(Math.random()*1001) + 2000;
  12.  
  13. //背景を動かす
  14. $('.scrollBg').animate({
  15. backgroundPosition: '(' + (x * -1) + 'px ' + (y * -1) + 'px)'
  16. }, time, "swing", function(){
  17. moveBgAround();
  18. });
  19. }


CSS(style.css)
  1. .scrollBg {
  2. background-color: #FFF;
  3. background-image: url(***.jpg); /* 背景で動かす画像 */
  4. height: 300px;
  5. width: 600px;
  6. }


HTML
  1. <head>
  2. <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
  3. <script type="text/javascript" src="js/jquery.backgroundPosition.js"></script>
  4. <script type="text/javascript" src="js/function.js"></script>
  5. <link href="css/style.css" rel="stylesheet" type="text/css" />
  6. </head>
  7.  
  8. <body>
  9. <div class="scrollBg">
  10. <img src="overlay.png" alt="" /></div> <!-- 文字部分を透過したマスクとなるpng画像 -->
  11. </body>
Profile

chiemi09

Author:chiemi09

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

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