エンジニア足立のコーディング日記

エンジニア足立のコーディング日記

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

公開日:2017年11月06日
この記事を読むのに掛る所要時間: 214

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

 

まずは「iPanorama 360」のをインストールを行います。

管理画面左メニューから「iPanorama 360」を選択します。プラグイン:WP iPanorama 360

プラグイン:WP iPanorama 360 新規追加
「Add New」をクリックします。

プラグイン:WP iPanorama 360 シーンの追加
「+」をクリックして、Scene(シーン)を追加します。

プラグイン:WP iPanorama 360 写真をアップロード
写真をアップロードします。

プラグイン:WP iPanorama 360 ショートタグをコピー
画面右上からショートタグ([ ipanorama id=”6800″]または[ ipanorama slug=”xxxx”])をコピーして、投稿画面に移動します。

プラグイン:WP iPanorama 360 ショートタグを貼り付け
公開します。

プラグイン:WP iPanorama 360 再生01
公開ページに移動すると上記の様なページが表示されるので、

「CLICK TO LOAD PANORAMA」をクリックすると、以下の様に再生が始まります。↓
プラグイン:WP iPanorama 360 再生02
基本的な設定はここまでなんですが、

このままだとユーザーの使い勝手はあまり良くないので、

もう少し使い勝手を良くしていきます。

 

まずは、もう一度「iPanorama 360」の設定画面に移動して、

「General」タブの「Actions」メニューを開きます。
20171107_WP_iPanorama360_09
「Auto load」と「Auto rotate」を「ON]に変更します。

すると、下記のように、ページへアクセスした時点で自動でパノラマの再生が始まります。
プラグイン:WP iPanorama 360 再生03

次は、複数のパノラマ写真を設定する方法について説明します。プラグイン:WP iPanorama 360 シーン2を追加
まず、「+」をクリックして、2つ目のScene(シーン)を追加して、更新を行います。

公開ページに移動すると、以下の様に、

パノラマの左側に「◀」「▶」が表示されるので、これでパノラマ写真を切り替えられます。プラグイン:WP iPanorama 360 再生04

 

さらに、ここからサムネイル写真を表示させて、もう少し見た目を改良します。 プラグイン:WP iPanorama 360 Controls
「Controls」メニューの「Thumbnails slider control」を「ON」にします。

プラグイン:WP iPanorama 360 サムネイルを追加
「Scene thumb image」を「ON]にして、サムネイル用のパノラマ写真をアップロードします。

公開側ページには、サムネイルが表示されていると思います。
プラグイン:WP iPanorama 360 再生05

 

あと、最後にデザイン(テーマ)を変更してみます。

プラグイン:WP iPanorama 360 テーマの変更
「Theme」メニューの設定を「DEFAULT」から「MODERN」に変更します。

こんな感じになります。
プラグイン:WP iPanorama 360 再生06

このページのTOPへ戻る

著者情報

足立 拓也(あだち たくや)
1980年生まれ。
出身:兵庫県丹波市。
趣味:ボクシングジム通い。
特技:歴史の話しをすること。
一言:頑張って面白いブログを書きます。

カテゴリー

月別アーカイブ

  •  

    • [—]2017 (85)
    • [+]2016 (49)
    • [+]2015 (86)
    • [+]2014 (86)
    • [+]2013 (104)
    • [+]2012 (78)