【2020年】撮影した360度画像をWordPressブログに埋め込む方法【THETA、insta360】

360度画像をブログに埋め込む方法

どんどん普及しているRICOH THETA(リコー シータ)やinsta360(インスタ360)シリーズなどの360度カメラ。

そんな360度カメラで撮影した写真(全天球画像)をブログに埋め込む方法を紹介します。

他のサイト様で紹介されているプラグインも試してみましたが、
WordPressのバージョンがアップデートされており、使用できなくなっておりましたので、
2020年時点でのオススメプラグインをご紹介させて頂きます。

プラグイン「WP VR」をインストール

360度カメラで撮影した写真(全天球画像)をブログに掲載したい場合は、
WordPressのプラグインを使用するのが一番簡単です。

ワードプレスのプラグイン追加画面

プラグインの新規追加から検索窓に「WPVR」と入力。

360度画像を挿入するプラグイン「WPVR」を選択

インストールし有効化を選択します。

他のサイト様でよく紹介されているプラグイン「WP-VR-view」や「WP Photo Sphere」を試してみましたが、現在のWordPressバージョンとの互換性がなく、紹介されている埋め込み方法も仕様が変わってしまっているため、実装できませんでした。
2020年4月現在では上記の「WR VR」が簡単でおすすめです。

撮影した360度画像を用意

360度カメラからパソコンに撮影した写真データを取り込みます。

パソコンと360度カメラ「Insta360 one」をつなぎます。

私(daruma108)はInsta360 oneを使用しております。
カメラをPCにただ繋いだだけでは、PC側に反応がありませんので、
カメラの電源を付けて、緑のランプが点灯しているか確認してください。

カメラのフォルダから写真データを取り出します。

前記事にも書きましたが、
Insta360シリーズだと取り込んだファイル拡張子が
デフォルトでは「.insp」「.insv」となっていますので「.jpg」「.mp4」に変換を行います。

JPGに変換した360度写真(全天球画像)をWordpressのメディアに追加します。

ワードプレスへ360度写真(全天球画像)をアップロードします。
ワードプレスへ360度写真(全天球画像)をアップロードします。

360度画像がメディアにアップロードされました。
この画像をプラグインにて全天球画像として表示させます。

プラグイン「WP VR」にてショートコードの作成

ここまでくればあと一息です。

サイドナビの「Wpvr」から「Tours」を選択します。

サイドナビの「Wpvr」から「Tours」を選択します。

新規作成画面に移動しますので、Add New Tourの下のタイトル欄にタイトルを入力します。

タイトルと埋め込みたいメディアを選択します。

Setupの項目で各入力欄を埋めていきます。
まず、今回は360度画像を表示させたいので「SCENES」を選択します。
動画を埋め込みたい場合は「VIDEO」を選んでください。

IDを入力し、メディアにアップロードした360度画像を選択します。

IDの欄に何でも良いので英数字を入力します。
UPLOADをクリックし、先ほどWordpressのメディアに追加した360度画像を選択します。

Wordpressのメディアに追加した360度画像を選択します。

Previewをクリックすると下に、選択した画像が360度見渡せる状態で表示されます。
表示に問題がないか確認しましょう。

360度画像のプレビューを確認

プレビューに問題がなければ、Setupの右側になる公開ボタンをクリック。
そしてその下にの[カッコ]で書かれたショートコードをコピーします。

公開してショートコードをコピーします。

ショートコードをコピーすれば、あとは記事内に貼り付けるだけです。
360度画像を埋め込みたい記事の投稿画面に移動します。

記事内にショートコードを貼り付け

投稿画面に移動し、記事内にペーストすると、
下の画像のように自動でショートコードとして認識されます。

コピーしたショートコードを記事

こちらで360度画像の埋め込みが完了です。
↓↓コチラのようにグルグルと360度を見渡せる状態で表示されました。

ちなみにショートコードのIDの後に、通常のCSSの要領でワイド(width)設定を追加すると幅一杯に表示する事も可能です。↓

ワイドの設定を追加

まとめ

ワードプレスプラグインを使っての、ブログ内への360度画像の埋め込み方法をご紹介いたしました。

記事内にも書きましたが、他のサイト様でよく紹介されているプラグイン「WP-VR-view」や「WP Photo Sphere」が問題なく使用できる場合は良いのですが、そちらを試してみて、もし使用できなかった場合は「WP VR」での実装をオススメします。


今回埋め込んだ360度画像はポルトガルで撮影したもので、
「消える自撮り棒」バレットタイムハンドルを使用しました。
この自撮り棒があると、写真のクオリティが全然違ってきます。
まるで自分を別の誰かが撮影してくれているような写真に仕上がります。
insta360 one、one Xを使用していて、お持ちでない方にはオススメです。

不明点がございましたらお気軽にコメントください。

4 Comments

  1. […]  ひゃくやっつ【2019年】撮影した360度画像をWordPressブログに埋め込む方… […]

    返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Scroll to top