360度回転画像をサイトに掲載する

対象製品： 3D PhotoBenchInfinityStudioPhotoCapture

360度回転画像をサイトに掲載する手順です。掲載には、HTMLの知識があるとスムーズです。

FFFTPを詳しく知りたい方はこちら

FFFTPの使い方 | TechAcademyマガジン（外部サイト）

ファイルアップロード

  1. Ortery Captureで、360度回転画像を撮影し、ファイルをHTMLで保存します

    2. 例では「vase」という名前でファイルを保存しています

  2. 保存されたフォルダごと、FTPソフトを使ってサイト（サーバー）の任意の場所にアップロードします

    3. 例では「vase」というフォルダを、https://store.ortery.co.jp/360という場所にフォルダをアップロードします

  3. アップロードしたフォルダ内のhtmlファイルのURLに、Google chromeやMicrosoft Edge等のブラウザでアクセスし、画像が表示されるか確認します

    4. 例ではhttps://store.ortery.co.jp/360/vase/vase.htmlが該当のURLとなります

リンクを作成

HTMLのaタグを使用します。

  1. htmlファイルまでのURLをコピーします

    2. 例ではhttps://store.ortery.co.jp/360/vase/vase.htmlがHTMLファイルのURLです。

  2. コピーしたアドレスをaタグに貼り付けます
    3. <a href="コピーしたリンク">任意のテキストや画像</a>
  3. 作成した上記のコードをサイトの任意の場所へ貼り付けます
  4. 360度回転画像のページへのリンクが作成されます

テキストでのリンク例

<a href="https://store.ortery.co.jp/360/vase/vase.html">360度アニメーションを見る</a>

■ 出力結果

360度アニメーションを見る

画像のリンク例

<a href="https://store.ortery.co.jp/360/vase/vase.html"><img src="画像（アイコン）のリンク"></a>

■ 出力結果

サイトに埋め込み

HTMLのiframe（インラインフレーム）タグを使用します。

  1. htmlファイルまでのアドレスをコピーします
  2. コピーしたアドレスや、表示サイズを指定して、iframeタグに埋め込みたい場所に貼り付けます
    3. <iframe src="コピーしたリンク" width="横幅" height="高さ"></iframe>
  3. サイトに画像が埋め込まれます

埋め込み例

<iframe src="https://store.ortery.co.jp/360/vase/vase.html" width="600" height="600"></iframe>

■ 埋め込み結果

関連記事