Fyuseの写真データをブログ内(WordPress)に埋め込み表示する方法。

どうも。

ブログ始めて早2年ほど、途中休んでいましたが、今は元気なCHASUEKでございます!!

前回、当ブログ内で空間撮影アプリFyuse(フューズ)を紹介させていただきました。

→[参考]3D空間撮影が可能な『Fyuse』の写真なら現場の雰囲気が一瞬で伝わる！！

上の記事中で、Fyuseの写真データをブログ内に埋め込み表示させるため、色々と苦労したので備忘録を残しておきます。同じ悩みを抱えた人に参考になれば幸いです。

Fyuse – 3D写真

開発元:Fyusion

無料

posted with アプリーチ

1 公開していないデータは表示されない。
2 写真を画面いっぱいに表示する方法
3 まとめ。

公開していないデータは表示されない。

アプリ内からブログ内に貼り付けたいFyuseデータの埋込みコードを生成して貼り付けるだけでいいはずと思ったのですが、その前に公開する必要がありました。

試しに、未公開の写真をブログ内に貼ってみます。

▼公開してないデータの埋め込みコードを生成する。

▼生成されたコードはこちら。

<div id="fyu_zvouq3f52m" class="fyu_container fyu_horizontal"></div>
<script src="https://fyu.se/embed?v=2.0"></script><script>FYU.add("zvouq3f52m", "fyu_zvouq3f52m");</script>

▼上記コードを、そのままブログ内に貼り付ける。

表示されたのは、灰色の四角のみ。

この通り、未公開の写真は表示できません。公開してなければ、自分のスマホ内にしかデータがないので当然といえば当然か(- -;)。

▼公開して再度、実験してみます。

▼公開設定にしたら、無事に表示されました。

できた！！

けど、なんか小さい。

写真を画面いっぱいに表示する方法

いろいろ試して、下記のコードの【Fyuse管理ID】の箇所に自分が貼り付けたいデータのものに変更してやれば、うまいこと表示されました!!

<div style="position: relative; height: 0; width: 100%; padding-bottom: 72%;">
<iframe width="【画像サイズ】%" height="【画像サイズ】%" style="position: absolute; width:【画像サイズ】%; height:【画像サイズ】%; left: 0; top: 0;" src="https://fyu.se/v/embed/【Fyuse管理ID】" frameborder="0" scrolling="no" allowfullscreen="allowfullscreen"></iframe>
</div>

▼ここのFyuse管理IDはココをチェック。

▼完成した埋め込みコードがこちら。

<div style="position: relative; height: 0; width: 100%; padding-bottom: 72%;">
<iframe width="85%" height="85%" style="position: absolute; width: 85%; height: 85%; left: 0; top: 0;" src="https://fyu.se/v/embed/zvouq3f52m" frameborder="0" scrolling="no" allowfullscreen="allowfullscreen"></iframe>
</div>

上記をブログ内に貼り付けることで、この通り、部分いっぱいに写真が表示してくれました！！

縦サイズのFyuseでも試したが、こちらも同じ方法で縦いっぱいに表示してくれましたよ◎