ウェブページでの活用法

今回はサイト運営者さん向けのお話になります。

前回までの内容でMNGの制作までは行えるようになりました。 しかし、いくらMNGを制作できてもそれをアニメーションGIFの代わりとしてウェブページ上に表示できなければ意味がありません。 そこで、今回は制作したMNGをウェブページ上に表示するためのHTMLでの記述法を説明します。

img要素は使えません

普通、画像を表示する場合は以下のようにimg要素を使用します。

<img src="image.png">

MNGも画像なのだからimg要素を使いたいところですが、残念ながら今のところimg要素を使用することはできません。 ブラウザの正式対応により、近い将来、img要素でも表示できるようになるとは思いますが、今のところは他の方法で表示するしかありません。

現在、MNGはプラグインにより表示可能な状態なので、プラグインデータを表示するための要素を使用する必要があります。 しかしながら、要素の名前が変わるだけで基本的な使い方はimg要素と大差ありません。 MNGは以下のようなコードで表示することができます。

<embed src="image.mng" type="video/x-mng" width="64" height="64">

“type="～"”という見なれない記述がありますが、これは読み込もうとしているファイルの種類をブラウザに知らせるための指定です。 重要ですので忘れずに記述してください。 また、img要素では省略可能だった“width”と“height”はこの要素では必須ですので、こちらも忘れずに記述してください。

リンクを貼る

画像にリンクを貼る場合、普通はimg要素をa要素で囲います。

<a href="index.htm"><img src="image.png"></a>

ところが、先に述べたMNGを表示する要素(以下、MNG要素)を普通の画像と同じようにa要素で囲んでも上手くいきません。 実は、MNG要素にリンクを貼る場合は特殊な記述をする必要があります。 とは言っても別に難しいことは何もありません。 むしろa要素で囲むよりも簡単かもしれません。 以下にMNGにリンクを貼るコードを示します。

<embed src="image.mng" type="video/x-mng" width="64" height="64" href="index.htm">

“href”をa要素で指定する代わりにMNG要素で指定するだけです。 こうすることで、MNGにもリンクを貼ることが可能です。

次回予告

今回で一応予定の項目をすべて終了しました。 なんか大雑把な内容となってしまいましたが、次回をもって最終回とさせていただきます。 次回はこれまでの内容のまとめを行います。