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

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

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

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

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

関連insta360シリーズで撮影した360度写真の埋め込み
関連リコー「THETA SC2」で撮影した360度画像の埋め込み
オススメ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を使用していて、お持ちでない方にはオススメです。

「APEXレンタル」の評判やクーポンは?まとめて紹介

イイモノ

2024/5/5

カメラや機材が借りられる「APEXレンタル」の評判やク...

SONYのα(アルファ)シリーズが安く借りれるサブスク・レンタルサービスは?【デジタル一眼カメラ】

イイモノ カメラ

2024/4/5

SONYのα(アルファ)シリーズが安く借りれるサブスク...

イイモノ

2024/1/31

デザイン抜群のホームプロジェクター「Emotn N1」...

[Mac]デフォルトで開くアプリを変更する方法【ファイルごとに設定】

イイモノ

2024/1/7

[Mac]デフォルトで開くアプリを変更する方法【ファイ...

壊れた写真・動画・ファイルの修復ツール「EaseUS Fixo」

イイモノ デザイン

2023/12/29

壊れた写真/動画/PDFなどのファイルの修復ツール「E...

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