2011年02月15日

Seesaaブログのトップバナーをフラッシュに


 トップバナーをフラッシュ(swf)にするのに通常のフラッシュの埋め込み方法は使えません。embedタグやobjectタグでswfを埋め込もうとするとブラウザによって表示できないなど様々なトラブルが発生します。

 今回は、本サイトで使っているような、Seesaaブログのトップバナーをフラッシュにする方法をご紹介します。決して難しくはないのですが、説明するのが大変です。

 説明はSeesaaブログで行いますが、他のブログでも同じようにできるのではないかと思います。やったことはありませんが。

1.フラッシュを作る

 フラッシュの作り方は、過去記事『フラッシュ(SWF)動画の作り方』に詳しく書いています。そちらをご覧下さい。

① まず、ブログの幅を調べます。ブログの幅はスタイルシートによって異なるので、お使いのスタイルシートの幅を調べます。
 Seesaaブログの管理画面で、[デザイン]⇒[デザイン一覧]と進み、使用しているスタイルシートをクリックして、スタイルシートを表示します。
② スタイルシートの上部の「#container{」の下にある数値をメモします。下の例では[846px]です。これがトップバナーの幅になります。この幅でフラッシュを作ります。

ブログの幅を調べる


 フラッシュはできるだけ小さく作ります。このサイトのフラッシュで、踊り子の画像が荒れているのは、できるだけ小さく作ろうとしたため、低解像の画像をクローズアップして使ったためです。つまりは失敗作です(涙)。気づいた時にはもう遅く、フラッシュを作り直す気にもなれないので、そのままアップしています。フラッシュが大きいとページの読み込みに時間がかかることになり、嫌われます。コツは、フラッシュの高さを小さくすることだと思います。このサイトの半分くらいのサイズが良いかも。フラッシュをトップバナーに使っている優良サイトは、皆、高さの低いフラッシュを使っています。うちのサイトのように大きなフラッシュは邪道のようです(とほほ)。

2.「swfobject.js」をダウンロードする

 以下のサイトから、「Download SWFObject 1.4」をダウンロードします。ダウンロードした中の「swfobject.js」というファイルを使います。

http://blog.deconcept.com/swfobject/#download

3.「swfobject.js」とフラッシュをアップロード

 ダウンロードした「swfobject.js」とフラッシュをブログにアップロードします。フォルダを作って、そこにアップロードした方が管理面で良いかも知れません。
 また、フラッシュ非表示時に表示する画像もアップします。フラッシュを作った時の画像を活用します(幅と高さがフラッシュと同じなので)。これらのurlをメモしておきます。

4.「HTML」の変更

① Seesaaブログの管理画面で、[デザイン]⇒[HTML]と進み、使用しているHTMLを開きます
② 念のため、オリジナルをコピーしておきましょう。
 [CTRL]+[A]で全体を選択し、[CTRL]+[C]でコピーし、WORDかメモ帳に[CTRL]+[V]で貼り付けます。
③ [HTML]の画面で、<head>の直ぐ下に以下のタグを貼り付けます。
 4行目のjpg画像は、フラッシュが何らかの理由で表示されない場合に表示される代替の画像です。下のタグはこのサイトのものなので、url、フラッシュのサイズ、altの説明文(赤字と青字の部分)を変更してお使い下さい。

<div id="headerFlash">
<script type="text/javascript" src=" http://hokanko2008.up.seesaa.net/image/swfobject.js "></script>
<img src="hokanko2008.up.seesaa.net /image/Virgen_Canon236.jpg " alt="なんでも保管庫トップバナー" />
<script type="text/javascript">
var so = new SWFObject("http://hokanko2008.up.seesaa.net/image/NandemoTop.swf ", " Virgen_Canon236", "900", "287", "6", "#ffffff");
so.write("headerFlash");
</script>
</div>

③ [HTML]を保存します。

5.スタイルシートの変更

 ここでも念のため、オリジナルをコピーしておきましょう。
① スタイルシートのh1で設定しているフォントのサイズを小さくする。
② スタイルシート でトップ画像を読み込んでいる部分のurlを削除する。(gifかjpgを読み込んでいる部分です。スタイルシートで画像を読み込んでいるのは1箇所だけなので直ぐ分かると思います)

 スタイルシートの設定は好みがあると思いますが、上の設定では、h1で設定されるブログタイトルの表示をすごく小さくしています。好みがあるというのは、検索エンジンの好みも含みます。ここら辺を変にいじると問題が生ずるかも知れません。間違っても非表示にしたり、表示範囲外に設定したりしてはいけません。ペナルティを食らいます。

 この設定で、高さの関係でトップバナーと記事との間に空白が開く可能性があります。その場合はスタイルシートで調整して下さい。その方法は書きたくても忘れてしまったので、ご勘弁を。

 h1の設定は、いろいろな面でデリケートなようです。管理人は怖くて別の設定はできません。勇気のある方はいろいろ試してみて下さい。
posted by ネコ師 at 10:52| Comment(0) | 役立つ知識(web編) | 更新情報をチェックする
この記事へのコメント
コメントを書く
コチラをクリックしてください