insta360シリーズの360度写真を簡単にブログやサイトに貼る方法【プラグインなし】

以前の記事でWordPress（ワードプレス）のプラグインを使って
360度画像をブログに埋め込む方法を紹介しました。

あわせて読みたい！

WordPressブログに360度画像を埋め込む方法【プラグイン利用】

続きを見る

プラグインはWordPress（ワードプレス）でサイトを管理している場合でしか使えませんので、
今回はプラグインを使わずに、360度画像を簡単にホームページやブログに掲載する方法をご紹介いたします。

insta360アプリで埋め込みたい写真を開く

insta360シリーズ製品で撮影する時に必要な、それぞれのデバイスのアプリを起動します。

insta360シリーズアプリを起動し、アルバムからWEBページに埋め込みたい写真を選択します。

共有ボタンからinsta360のサーバーにアップロード

アルバムからWEBページに埋め込みたい写真を開いたら、右上の「共有マーク」を選択。

下から共有・シェアしたいアプリのアイコンが出てきますので「リンク」を選択します。

そのまま右上のチェックマークを選択します。
初めてのときは「ユーザーサービス契約書」への同意を求められますので「承認します」を選択します。

アップロードが始まり、完了するとQRコードとURLが生成されます。
出てきたURLをコピーします。

URLをPCで開き、埋め込みコードをコピー

出てきたURLへアクセスすると、下のようにWEBページが表示されます。
真ん中に選択した360度画像、左右にinsta360の広告が表示されてます。
真ん中の画像の右上にシェアアイコンが並べられてます。

一番右のボタンをクリックすると、ポップアップでソースコードが表示されます。
上段の「Copy（コピー）」ボタンをクリックし、コードをコピーします。

任意のhtmlにペースト

コピーしたコードはこちら。

<iframe class="embed_iframe" src="https://s.insta360.com/p/90d64fa09f20eae38080b0edf445c1a3?e=true&locale=en-us" frameborder="0" width="666" height="413"></iframe>

コピーしたコードを、埋め込みたいhtmlへペーストすると
下のように埋め込み表示されます。

コード内のwidth、heightの値を編集するとリサイズも可能です。
「width="666"」となっているところを、
「width="100%"」に変更すると、下のように表示可能な横幅の目一杯まで表示することが可能です。

まとめ

いかがでしたでしょうか。
insta360側が用意してくれているサービスを利用すると、専門知識がなくても誰でも簡単にWEBページに360度画像を埋め込むことができます。

insta360のサーバにアップロードする事で下のようなメリットがあります。

他にも360度カメラで撮影した写真を動画を独自の拡張子ファイルから一般的な拡張子ファイルに変換し、ブログやホームページ・Youtubeへ公開する方法を紹介しています。よければ合わせてご覧ください。

あわせて読みたい！

撮影した360度画像をブログ・ホームページに公開する方法まとめ

続きを見る