WEB カメラ 作りたい 撮りたい

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

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

どんどん普及しているRICOH THETA(リコー シータ)やinsta360(インスタ360)シリーズなどの360度カメラで撮影した写真(全天球画像)を、プラグインを使用してWordPressブログに埋め込む方法をご紹介します。
↓こんな感じでドラッグすると360度全方角が見渡せる写真を埋め込むことができます。

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

insta360シリーズの写真をプラグインなしで埋め込める方法は↓コチラからご覧いただけます。

あわせて読みたい!
insta360シリーズの360度写真を簡単にブログやサイトに貼る方法
insta360シリーズの360度写真を簡単にブログやサイトに貼る方法【プラグインなし】

続きを見る

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

360度カメラで撮影した写真(全天球画像)をブログに掲載したい場合は、Wordpressのプラグインを使用すると簡単に埋め込むことができます。

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

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

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

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

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

撮影した360度画像を用意

360度カメラからパソコンに撮影した写真データを取り込みます。
私(daruma108)はInsta360 oneを使用しており、360度カメラをPCに繋いだだけでは反応がなく、カメラの電源を付けてあげるとPC側からアクセスできるようになります。

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

カメラと接続が出来たら、フォルダから360度写真のデータを取り出します。

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

変換の方法は↓コチラの記事をご覧ください。

あわせて読みたい!
Insta360で撮影した独自拡張子を一般的な拡張子に変換しよう
【360度カメラ】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度カメラで撮影した写真を動画を独自の拡張子ファイルから一般的な拡張子ファイルに変換し、ブログやホームページ・Youtubeへ公開する方法を紹介しています。よければ合わせてご覧ください。

あわせて読みたい!
360度画像をホームページで埋め込み公開する方法まとめ【insta360】
撮影した360度画像をブログ・ホームページに公開する方法まとめ

続きを見る

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

安くてオシャレ!家具のサブスク「CLAS(クラス)」のメリットやおすすめ商品は?

イイモノ

2023/1/10

家具・家電のサブスク「CLAS(クラス)」へ登録・申し...

Macでファイル名を一括で変更する方法!連番や置き換えも【カメラマン・デザイナー必見】

イイモノ

2023/1/6

Macでファイル名を一括で変更する方法!連番や置き換え...

ライブ・フェスにおすすめの防振双眼鏡が安いレンタルサービスは?店舗で即日受取りは可能⁈

イイモノ

2022/12/19

ライブ・フェスにおすすめの防振双眼鏡が安いレンタルサー...

ネガフィルム用スキャンアプリ「FilmBox」で自宅で写真データ化

イイモノ カメラ フィルムカメラ

2022/12/11

ネガフィルム用スキャンアプリ「FilmBox」で自宅で...

最高頭脳と評される「ルンバ j7 +」を1ヶ月レンタル!レビュー

イイモノ

2023/1/10

歴代最高頭脳「ルンバ j7+」をレビュー!価格や大きさ...

-WEB, カメラ, 作りたい, 撮りたい
-, , ,