360°パノラマ

WPのプラグイン「iPanorama 360」で360°パノラマ写真を公開

360°パノラマ写真(全天球画像)の埋め込みを行えるWordPressプラグインの「iPanorama 360」を試してみました。

 

まずは、プラグインのインストール画面に移動して、「iPanorama 360」をインストールします。

プラグイン「iPanorama 360 」をインストール

インストール後、管理画面に「iPanorama 360」メニューが追加されるので、そちらからプラグインの専用画面に移動します。
iPanorama 360 プラグインの画面
画面上部の「Add New」のリンクをクリックします。

Sceneを追加
「+」をクリックして、Scene(シーン)を追加します。

「Scenes」タブ→「Scene Settings」メニューを開きます。写真を追加写真をアップロードして、「公開」して下さい。

ショートコードをコピー
画面右上にショートコード([ ipanorama id="6800"]または[ ipanorama slug="xxxx"])が表示されるので、それをコピーして、記事の投稿画面に移動します。

ショートコードを貼り付ける
ショートコードを貼り付けて記事を保存したら、実際にユーザー側の公開ページでどのように表示されているか確認します。

まずは、保存した記事のURLへアクセスしてみて下さい。

iPanorama360 ユーザー公開画面
ユーザー側にこのように表示されているはずなので、「CLICK TO LOAD PANORAMA」をクリックして下さい。
パノラマの再生が始まります。

iPanorama360 ユーザー公開画面

 

基本的な設定はここまでなんですが、

このままだとユーザーの使い勝手はあまり良くないので、もう少し使い勝手を良くしていきます。

 

もう一度「iPanorama 360」の設定画面に移動して、「General」タブ → 「Actions」メニューを開いて下さい。
Generalタブ→Action
Auto load」と「Auto rotate」を「ON]に変更して下さい。
自動再生の設定になるので、「CLICK TO LOAD PANORAMA」が表示されず、アクセスと同時に再生が開始されます。

自動再生
※こちらは画面のキャプチャ(静止画)なので、実際の動きを確認できません。

 

次は、複数のパノラマ写真を設定する方法について説明します。

まず、「+」をクリックして、2つ目のScene(シーン)を追加して下さい。
複数写真の再生設定

ユーザー側の公開ページ移動してみて下さい。
パノラマの左側に「◀」「▶」が表示されるので、これでパノラマ写真を切り替えられます。
パンラマ写真の切り替え

 

次は、パノラマ写真のサムネイルを表示できるように設定します。

「General」タブ→「Controls」メニューの画面を開いて、「Thumbnails slider control」を「ON」にします。
「Thumbnails slider control」を「ON」

「Scenes」タブ→「Scene Settings」メニューを開きます。
「Scene thumb image」をOnにする
Scene thumb image」を「ON]にして、サムネイル用の写真を追加します。
※「Scene 1」「Scene 2」の両方とも設定して下さい。
これで、再度ユーザー側の公開ページを確認します。

このようにサムネイルが表示されるようになっていると思います。サムネイル写真の表示

これでかなり見た目を改良できたと思います。

 

それでは、最後にパノラマの再生プレイヤーのデザイン(テーマ)を変更してみます。

「General」タブ → 「Theme」メニューを開いて、ここでテーマを変更します。
iPanorama360 テーマ「DARK」に変更

テーマは、「DEFAULT」以外に「DARK」と「MODERN」が用意されているので、
どちらかのテーマに変更できます。

「DARK」だとこんな見た目になります。
テーマ「DARK」に変更

「MODERN」はこんな感じになります。
テーマ「MODERN」

デフォルトで設定されているテーマよりも見た目がカッコよくなりましたね!

説明が少し長くなりましたが、慣れればチャチャっと設定できるようになると思います。

360°パノラマの再生プレイヤーをお探しの方は、
こちらのプラグインを一度試してみてはいかがでしょうか?

この記事を書いている人
株式会社ディープ
名前足立拓也

メールアドレスadachi@deep-deep.jp

関連記事

最近の記事

  1. ドメインについて
  2. WP:WordPress(ワードプレス)
  3. URL設計(URLデザイン)
  4. URL「ディレクトリ名」と文字アンダースコア(_)とハイフン(-)
  5. SEO対策(外部ファイルの読み込み)
  6. URL リダイレクト
  7. インデックスされない
  8. 内部対策は必要?
  9. CMS(シーエムエス)
  10. SEO業者は必要?

Twitter

  • 個人で借りているサーバのIPアドレスが、なぜか「FortiGuard」のブラックリストに登録されてしまった。まっとうにサイト運用してたから、なんで登録されたかは不明。取り敢えず、「データベースから削除して」って依頼したから、すぐに… twitter.com/i/web/status/1…
    about 12時間 ago via Twitter Web App

アーカイブ

PAGE TOP