Mirador 3をページ内の特定の領域に埋め込む方法 - デジタルアーカイブシステムの技術ブログ

先日、以下の記事で、Nuxt.jsを用いて、Miradorをページ内の特定の領域に埋め込む方法を紹介しました。

今回は、Vue.jsなどのフレームワークを使わずに、Miradorを埋め込む方法について紹介します。

具体的には、以下のページのソースコードをご確認ください。

上記は単純なHTMLファイルです。

Miradorを画面に埋め込む際、Miradorを表示する要素のID（例：mirador）を指定します。この時、以下のようなCSSを与えることで画面の一部に埋め込むことができます。

#mirador {
  height: 600px;
  position: relative;
  width: 100%;
}

ポイントは、「position: relative;」です。これを与えないと、heightなどを指定しても全画面で表示されてしまいます。

Mirador 3の利用において、本記事がお役に立つことがあれば幸いです。