WordPress短期学習プログラム
360°パノラマ

WP(WordPress)

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

弊社では、以下の方に向けて、WordPressの短期学習プログラムを
格安(15,000円~)で提供しております。

  • 個人でWordPressを使ったサイト(個人ブログやアフィリエイトサイトなど)構築をお考えの方
  • WordPressを使って副業で稼ぎたい方
  • フリーランスでWordPressを使ったお仕事をお考えの方
  • 自社でホームページの構築・運用をお考えの方
  • 企業のWEB担当者の方

内容

基本的には、初心者の方を対象にした学習プログラムです。

※ WordPress制作の上級者の方の場合、弊社の学習プログラムはあまり役に立たないと考えています。

  • ・ WordPressのインストールからセッティングの方法
  • ・ WordPressのテーマ選びについて
  • ・ WordPressのプラグイン選びと設定方法について
  • ・ サーバの準備方法
  • ・ ドメインの取得・管理の方法
  • ・ FTPの設定方法
  • など

ご用意頂くもの

  • ・ ノートPC
    ※ 弊社はWindowsを業務で利用しておりますので、できればWindowsのPCをおすすめしています。
  • WordPressでサイトの制作を考えているが、何から始めればいいのか分からない。
  • ドメインやサーバはどうやって準備すればいいの?
  • そもそもホームページの公開には何が必要なの?

などなど、

どのような内容でも構いませんので、お気軽にお問い合わせ下さい。

お客様の目的をお聞きした上で、最適の学習プランを提案致します。

ご興味のある方は、以下の内容を記載の上、一度お問い合わせ下さい。
こちらより、折り返しメールを致します。

  • ① お名前
  • ② 折り返し先のメールアドレス
  • ③ 希望の学習内容

関連記事

  1. BLOG(ブログ)

    WP(WordPress)

    賢威(けんい)で組んだサイトが遅い。。。

    弊社のサイトに賢威を導入WordPressを利用されて…

  2. WordPress(ワードプレス)

    WP(WordPress)

    add_image_size()と「WP Image Size Selection」はセットで

    add_image_size()で画像サイズを追加した場合、地味に…

  3. WP(WordPress)

    WP-PageNaviがインストールできない!?

    最近、立て続けにWordPressの案件が入ってきて、対応する案件…

  4. WP(WordPress)

    「Counterize」でWordPressのアクセス解析用

    WordPressに「Counterize」をインストールしてみました…

  5. テキストエディタ

    WP(WordPress)

    WordPress テキストエディタにオリジナルのクイックタグを追加

    テキストエディタにオリジナルのクイックタグを追加テキス…

最近の記事

  1. SEO(エスイーオー)
  2. WordPressプラグイン「Anti-spam」
  3. システムエラー
  4. PHP(ピー・エイチ・ピー)
  5. SONY 広角レンズ「SEL1018」
  6. PHP(ピー・エイチ・ピー)
  7. 俺流塩ラーメン
  8. SEO(エスイーオー)
  9. Linux(リナックス)
  10. Linux(リナックス)
PAGE TOP