プラグインなら簡単!360度画像をWordPressのサイトに埋め込む方法

Sponsored Link


360度画像をWordPressのサイトに埋め込んでみたい!

どうも、Linです。日光を呼び寄せてます。

 

勢いで、360度動画・画像を簡単に撮影できる、

Gear360

を購入。

さっそく、アイアンマンの像を撮影しに行ってみました。

撮れた写真は次のものです。

 

360度画像 WordPress

 

「あれ、これが360度画像なの!?」

「詐欺にあったんじゃね?」

という声がちらほら聞こえた来そうですが、これは360度画像の元データ。

360度画像として閲覧するためには、スティッチングという作業が必要です。

縫い合わせて360度画像を作らないといけないのですね。

 

今日は、このスティッチングという作業をWordPressのサイト上で行い、

綺麗に360度画像を表示できるプラグインを発見してしまったので、使い方を忘れないうちにメモしておきます。

 

 

WordPressのサイトに360度画像を表示できるプラグインの使い方

360度画像をWordPressのサイトに埋め込んでいきましょう。

 

Step1. 「WP-VR-view」というプラグインをダウンロード

まずは、360度画像をWordPressのサイトに埋め込めるプラグインをダウンロードしていきます。

プラグインの新規追加画面から、

「wp vr」

と検索してみましょう。

一番上に、

「WP-VR-view」

というプラグインが見当たりませんか??

 

360度画像 WordPress

 

おそらく、たぶん、安全なプラグインですのでダウンロード。

そのまま有効化してしまってください。

 

360度画像 WordPress

 

 

Step2. 360度画像をアップロード

次に、撮影した360度画像をワードプレスのメディアにアップロードします。
https://gyazo.com/338214174d437aab8f8160ddf51cb6f2

よっこらせ。

 

 

Step3. VR Imageマークを選択

いざ、WordPressの投稿画面へ。

編集ツールの中に、新しく、次の2つのアイコンが追加されていることでしょう。

 

360度画像 WordPress

 

今回は360度画像を追加したいので左の「VR Image」をクリック。

360度画像 WordPress

 

 

 Step4. ソース追加

すると、次のような設定画面が表示されます。

 

360度画像 WordPress

 

先ほどアップロードした360度画像のソース先のURLを「PhotoSphere image URL」という欄に追加していきましょう。

 

360度画像 WordPress

 

ここでいうURLはメディアを追加する際に出現する「URL」のことですよ。

 

 

URL追加が終わったら下の「INSERT」でいざ、360度画像を挿入です。

 

360度画像 WordPress

 

すると、次のようなコードが現れることでしょう。

 

このコードの部分に360度画像が表示されることになります。

うまく行くとこんな感じですね↓↓

 

 

ジャイロ付きのスマホなら、スマホを動かして画像を楽しむことができます。

ぜひ、アイアンマンを探してみてください。

 

ちょっと境界部分がスティッチングしきれてない部分が散見されますが、一旦最低限埋め込めた気がします笑

360度画像をWordPressのサイトに埋め込みたい方はよかったら試してみてくださいね。

 

 

追記

やっとステッチングをマスターしました!

原因は、先ほどまでSDカードから直接360度画像のローデータを取り出していたことでした。

一旦、アプリの方で保存してこのような長方形の画像に変換してやると、うまく切れ目なく表示できるみたいです。

 

これで好きなだけ360度画像をワードプレスのサイトに埋め込めますね!

こんな感じでGear360で撮影した360度画像は簡単にWordPressの記事内に埋め込めますので、よかったらGear360を試してみてくださいね。

 

それでは!

Lin

飯橋凛(Ihashi Lin)

インターネット広告代理店を1年半で退職。
その後、副業として活動していたウェブメディア運営のフリーランスへ。
現在はプログラミングの勉強に励み、0からフリーエンジニアの道を目指す。最近はキムチをまとめ買いにはまっている。


Sponsored Link

コメントはこちらからお願いします!



もう1本読んでみる