完全なフルFlashのサイトではなくて、一部だけHTMLを組み込むということがあります。今回はフルFlashのサイトに固定したHTMLのフッターを付け加える方法を紹介します。
1．HTMLにswfファイルを簡単に埋め込むことができるSWFObjectとウィンドウを指定したサイズよりも小さくした場合にスクロールバーを表示するようにするためにSWFForceSizeを使います。<head>内に下記を追加します。
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/swfforcesize.js"></script>
2．<body>内に下記を追加します。
<div id="flashcontent"></div>
<script type="text/javascript">var so = new SWFObject("xxx.swf", "xxx", "100%", "100%", "8", "#ffcccc");
so.addParam("wmode", "transparent");
so.addParam("menu", "false");
so.addParam("scale", "noscale");
if(so.write("flashcontent")){
var forcesize = new SWFForceSize(so, 900, 700);
}
</script>
<div id="footer_wrap">
<div id="footer"></div>
</div>
今回はSWFObject1.5を使っているので、上記のような書き方になっています。「var forcesize = new SWFForceSize(so, 900, 700);」の部分は幅900pxで高さ700pxの領域は最低限表示するという指定をしていて、もしこの指定したサイズよりもウィンドウを小さくした場合はスクロールバーが表示されるようになっています。
3．下記のようにCSSを記述します。
html, body, #flashcontent {
height: 100%;
}
body > #flashcontent {
min-width: 900px;
width: 100%;
min-height: 700px;
height: 100%;
background: #ffcccc;
}#footer_wrap {
width: 100%;
height: 105px;
margin: -105px 0 0;
position: absolute;
left: 0;
background: #ccffcc;
}#footer {
width: 900px;
height: 105px;
margin: 0 auto;
background: #ccffcc;
}
幅100%で高さ100%のフルFlashなので、#footer_wrapにmargin:-105pxを指定してHTMLのフッターを持ち上げるというのがポイントです。
何かと問題となるIE（Internet Explorer）に対して、<head>内に条件付きコメントを記述して、対策をします。
例えば、下記のようなものです。
<!--[if IE]>
<script type="text/javascript" src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
これは全てのバージョンのIEに対してscript要素を読み込むという記述で、読み込んでいるのはHTML5の新要素を使えるようにする「html5.js」です。
IEだけに対する記述なので、FirefoxやSafari、Google Chromeといった他のブラウザには適用されません。
他にも下記のような記述の方法があります。
＜IE以外のブラウザ＞
<!--[if !IE]> ~ <![endif]-->
＜IE 8＞
<!--[if IE 8]> ~ <![endif]-->
＜IE 8 未満のバージョン → IE 7 , IE 6 など＞
<!--[if lt IE 8]> ~ <![endif]-->
＜IE 8 以下のバージョン → IE 8, IE 7 , IE 6 など＞
<!--[if lte IE 8]> ~ <![endif]-->
＜IE 8 より上のバージョン → IE 9＞
<!--[if gt IE 8]> ~ <![endif]-->
＜IE 8 以上のバージョン → IE 8, IE 9＞
<!--[if gte IE 8]> ~ <![endif]-->
IE 8でなくてもIE 7、IE 6を指定することも可能です。
IE 6だと下記のようなものを見かけます。
<!--[if IE 6]>
<script type="text/javascript" src="js/DD_belatedPNG.js"></script>
<![endif]-->
これはIE 6で透明pngを表示させるための「DD_belatedPNG.js」を読み込むという記述です。
このように何かと問題となるIEに対して、<head>内に条件付きコメントを記述して、対策をすることができます。
javascriptではなくcssを読み込むことも可能です。
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie.css" media="all" />
<![endif]-->
新規ウインドウ target=”_blank” で開くリンクにアイコンを追加する方法です。他にも方法があるみたいなので、僕がこのブログで使ってるものを紹介します。
1．jQueryのaddClassメソッドを使って、target=”_blank”のついているaタグに「new_window」というクラスを追加する。クラス名は任意です。
javascript
jQuery(function() {
jQuery('a[target=_blank]').addClass('new_window');
});
これをcommon.jsという名前で作成する。ファイル名は任意です。
2．cssでa.new_windowにスタイルを追加する。今回はリンクの前にアイコンを追加するので、下記のようにしています。
css
a.new_window {
padding: 0 0 0 16px;
background: url(img/new_window.png) no-repeat left center;
}
※paddingの値は各自で調整してください。
3．<head>内に下記を追加する。
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/common.js"></script>
※jquery.jsというファイルはjQueryからダウンロードしたファイルのことです。
以上で新規ウインドウ target=”_blank” で開くリンクにアイコンが追加されます。