［WordPress］全天球画像埋め込みプラグイン「Cardboard」でコード化されない場合の対処と縮小画像利用方法
- ハウツー・紹介・レポート
- ※ 当メディアのリンクにはアフィリエイト広告が含まれています
どうも、ガルマックスの猶木（なおき）です。
Twitterでもご報告した通り、360°の全天球撮影可能なXiaomi mijia 3.5K Panorama Action Cameraのレビュー中です。
WordPressを利用したブログに全天球画像を掲載する場合、全天球画像埋め込み用のプラグイン「Cardboard」を導入する事で簡単にシェア可能なのですが、「Cardboard」で自動コード化されないという問題にぶち当たりました。
アレコレしていたら手動でコード追加出来たことに加え、通常では正常に自動コード化されない「リサイズ画像」でも表示が可能となりました。
目次をクリックすると各項目へ移動します
全天球画像をWordPressで表示するために「Cardboard」を導入する。
「Cardboard」はプラグイン導入後に有効化するだけで利用可能。通常であればプラグイン導入後にWordPressの「メディアを追加」から全天球画像をアップロードしてコンテンツ内に設置すると自動的にコード化される仕様みたいです。
プラグインはWordPressのプラグイン管理ページからCardboardと入力して検索して導入又は以下から直接ファイルをダウンロードして導入出来ます。
【公式】Cardboard
なぜだか専用コードに置き換わらない。
というわけで、プラグインの説明通りに全天球画像をアップロードしてコンテンツ内に設置してみました。
▼全天球画像が平面展開されてしまい、通常の画像として表示されています。↓
▼この時のコードは通常の画像挿入コードで、「Cardboard」の専用コードに自動的に置き換わっていません。↓
通常であれば全天球画像を挿入すると[[cardboard id=”IDが自動挿入”]]というタグになるのですが、僕の場合は上手く自動変換されませんでした。
手動でコードを追加。IDは通常画像挿入コードに表示されている
これは困ったなぁということで、IDを直接叩いて画像データを引っ張ることにしました。
通常画像挿入コードにwp-image-18338という文字列がありますが、この18338という文字がIDです。このIDは画像毎に異なるのでご自身で通常画像挿入コードからID部分をコピペしましょう。
▼ID部分を手動入力して[[cardboard id=”18338″]]へ書き換えたコードを貼り付けたのが以下。皆さんが自由に写真を動かせる360°全天球画像の埋め込み成功です。写真画像の右下に表示されているボタンを押すと全画面表示出来ます。↓
[cardboard id=”18338″]
画像を縮小してファイルサイズを小さくする。
「Cardboard」プラグインはフルサイズ表示でないと自動コード化されない仕様となっており、「Cardboard」プラグインを利用する多くのコンテンツはファイル容量の大きな画像を使っているようです。
これが今までは当たり前だったのですが、コードを手動入力することでリサイズされ容量の小さくなった全天球画像を利用することが可能です。
ちなみに前項目で使用している全天球画像の解像度は6912×3456でファイルサイズは7.45 MBと超大容量。これを毎回使うわけにはいかないので、ファイルサイズを縮小してアップロード、IDぶっこ抜きでコードを手動入力することでファイル容量の小さな全天球画像を表示出来ます。
▼以下はオリジナルのハーフサイズ。解像度は3456×1728で容量は1.36MB。これでもかなりシェイプアップしました。↓
[cardboard id=”18347″]
▼以下は横幅が1980pxサイズでリサイズしたもの。解像度は1980×960で492KBと非常に容量が小さくなりました。↓
[cardboard id=”18348″]
▼以下はガルマックスのコンテンツ横幅サイズと同じ横680pxサイズ。解像度は680×340で容量は69.5KB。このサイズになると画質劣化が目立ちます。↓
[cardboard id=”18349″]
「Cardboard」プラグインまとめ。
「Cardboard」プラグインは非常に扱いやすく、正常動作していれば全天球画像をアップして貼り付けるだけでコードが自動挿入されますが、上手くコードが自動挿入されない場合は手動で画像のID入力することで全天球画像を埋め込めます。
また、「Cardboard」プラグインの仕様上、ファイルサイズが大きくなってしまいアップするのを躊躇していた方も多いと思いますが、ID手動入力ならファイルサイズを自由に決めれます。
勿論、リサイズして画像を縮小すると画質も低下するので、妥協できる範囲でリサイズしましょう。
▼オススメの合わせ読み記事▼
