ヘッダにFlashを追加する

ヘッダにFlashを追加する方法を紹介します。

 

先日Jimdoもスマホに正式対応しましたね!

iPhoneとHTML5の時代になり、Flash自体については正直今更感はあります。

しかし、この方法であればFlash以外にも応用できそうなので、記事として残しておくことにしました。

 

Jimdoでは、本文中であればGUIで簡単にFlashを追加することができますが、ヘッダには簡単に追加することはできません。ヘッダにFlashを追加する為には、独自レイアウトを使用することになります。

 

 

まず、「設定」→「追加モジュール」のFlashのチェックボックスをオンにしておきます。

 

 

 

次に、画像倉庫の方法と同様に「ナビゲータ」でFlash倉庫を作ります。

 

 

Flash倉庫のページで、「新項目を追加」→「Flash」を選択します。

 

swfファイルを選択してアップロードします。

詳細の欄も入れておきましょう。

この後ソースコードを検索するときにも楽になります。

 

今回のサンプル素材はZEBRA-CRAFTさんからお借りしました。

http://zebra-craft.com/web-design/sample-b-4.html

 

 

 

 

ここで一旦プレビュー表示を行い、本文中に正常にswfファイルが表示されることを確認します。

 

正常に表示されたら、ブラウザでソースコードを表示します。

 

そして、以下の部分を切り取ります。

 

 

<div class="n j-flash">

    <div id="cc-m-flash-4020199167" align="left">

        WelcomeFlash

    </div>

<script type="text/javascript">/* <![CDATA[ */                jimdoGen002.regModule("module_flash", {"variant":"default","selector":"#cc-m-flash-4020199167","options":{"swf":"http:xxx.jimdo.com\/xxx/flash.swf","params":{"version":"6.0.0","bgcolor":"#fff"},"attr":{"width":"300","height":"300"}}});                /* ]]> */  </script>

</div>


 

切り取ったソースコードを「レイアウト」→「独自レイアウト」→「HTML」にコピペします。

今回は 

<h1>

    Headline

</h1>


<img src="header.jpg" alt="" />

の間にペーストしました。

 

 

 

 

完成です。

 

Flash倉庫は「ナビゲーションの編集」で非表示にしておきましょう。

コメントをお書きください

コメント: 3
  • #1

    fairy-town (月曜日, 14 5月 2012 09:28)

    いつも活用させていただいてます。。。
    とても分かりやすかったです!!ありがとうございます。

    そこで…教えていただきたいのですが
    ホーム画面ではFLASHのヘッダーでサブページでは画像のヘッダーにしたい場合
    CSSを
    #header {
    height: 100px;
    background-image:url(○○○.jpg)
    }
    .cc-indexpage #header {
    height: 448px;
    background-image:url(○○○.swf)
    で可能でしょうか?

    またSWFをアップロードする際
    サイズオーバーになった場合の対処方法はありますか?

    よろしくお願いします。

  • #2

    amatorstylecompany (月曜日, 17 12月 2012 22:46)

    現在のjimdoWEBのレイアウトを変えずにヘッダーだけFlashにしたいのですが、教えていただけませんでしょうか。

  • #3

    liyuan (火曜日, 18 12月 2012 00:25)

    上記の方法でヘッダ画像のimgタグの位置にFlashを置き、imgタグを削除するだけでよいのではないでしょうか?