2010年5月18日火曜日

Bloggerのサイドバーに、ミク時計(Flashファイル)を置く方法

Bloggerブログのガジェットとサイドバー
ブラウザーを初音ミク
ミク時計のような Flashファイルを置きたい時は、「HTML/JavaScript」ガジェットを使います。
o Flashファイルの置き場所を、別途用意する必要があります。
o ミク時計は、▽猫牧場カンパニーが配布しているブログパーツです。

**** 手順
o ▽ミク時計の配布ページを開きます。
o ミク時計をダウンロードして、インターネット上のどこかに置きます。
   + 「設置方法」欄の記載通りです。
   + ダウンロードは、「設置方法」欄の右横にある初音ミク画像を右クリックして、「名前を付けてリンク先を保存」します。
   + 念の為、ダウンロードしたファイルやアップロードするファイルは、ウイルスチェックをします。
o Bloggerにログインします。
o 「レイアウト」画面を開きます。
   + ブログの右上にあるリンク「デザイン」を押します。
   + そして、切り替わった画面の左側のメニューから「レイアウト」。
      + ダッシュボードの時は、変更したいブログの「▼」をクリックして、「レイアウト」

o レイアウト画面に切り替わりますので、画面右。サイドバーの位置にある「ガジェットを追加」をクリックします。
o 「HTML/JavaScript」を探して、右上にある「+」をクリックします。
o 入力画面が出てきますので、入力して「保存」ボタンを押します。
   + タイトルは好きなものを選びます。例えば「ミクさん」など。
   + 下の入力欄は、設置方法の説明に合わせて入力します。書き方はお好みで。


**** メモ
o ブログのソースを見た所、Bloggerは「XHTML 1.0 Strict規格に従っています。」と宣言していました。
o そこで、XHTML規格に合わせた書き方について調べてみました。


** ご参考その1。XHTML規格としては正しい書き方(+ 最近のブラウザなら動くでしょう的な書き方です。)
o 複数ブラウザに対応させる為には、ファイルのアドレス指定を 2箇所に入れる必要があるみたいです。
----------------
<object data="http://(置いた場所を入れます)/mikuclock.swf" width="150" height="180" type="application/x-shockwave-flash">
<param name="movie" value="http://(置いた場所を入れます)/mikuclock.swf" />
<param name="quality" value="high" />
</object>
----------------

** ご参考その2。古いブラウザーでも正しく動く書き方(= XHTML規格としては間違っています。)
o pluginspageを書くと、ブラウザーに Flashが入っていない時に誘導してくれるみたいです。
----------------
<embed src="http://(置いた場所を入れます)/mikuclock.swf" width="150" height="180" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></embed>
----------------

** 参考にした資料
o ▽「FlashをXHTMLで表示させるには(embedタグを使わずに表示させるには)」(cyano)
o ▽「マルチメディアファイルを XHTML 文書に埋め込む」(ぽかぽかWeb研究室)
o ▽「<EMBED>」(HTMLタグリファレンス)


==
関連ページ:
    ▼Bloggerブログのガジェットとサイドバー
    ▼ブラウザーを初音ミク
    ▼Blogger
    ▼制作メモ
    > HTML/JavaScriptガジェットで、手書きのリンクが上手く貼れない時の確認点
    > ねんどろいど初音ミクの首関節が折れた時の治療手順
    HTMLの編集やHTMLモードで入力する時に、変換が必要になる記号
    ツール。MikuTime = 誕生日からの経過日数と経過秒数を調べます
(2012年5月7日変更。新デザイン対応、念の為ウイルスチェック推奨)
(2010年6月11日変更。Bloggerの仕様変更対応)