WordPress

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

更新日:

どうも。

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

 

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

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

 

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

 

Fyuse - 3D写真

Fyuse - 3D写真
開発元:Fyusion
無料
posted with アプリーチ

 

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

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

 

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

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

IMG_8622

 

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

<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>

 

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

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

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

 

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

IMG_8623

 

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

できた!!

けど、なんか小さい。

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

いろいろ試して、下記のコードの【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はココをチェック。

IMG_8624

 

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

<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でも試したが、こちらも同じ方法で縦いっぱいに表示してくれましたよ◎

まとめ。

  1. Fyuseでブログに貼り付けたい場合は、公開すること。
  2. 埋込コードはFyuseIDを上記コードにコピペすること。

これで満足です〜♪

では、おやすみなさい☆

Amazonキャンペーン中

Amazonお得に買い物

Amazon.co.jpで買い物するならギフト券を現金チャージするのがお得です。チャージごとに最大2.5%分のAmazonポイントがもらえます。また、5000円チャージで1000円分ポイント還元キャンペーンも実施中!!

詳しくはコチラ

  • この記事を書いた人
CHASUKE

CHASUKE

某IT企業でエンジニアをしているCHASUKEです。 当ブログでは生活を便利にするガジェットやサービスなどライフスタイルに関わる様々な情報をお届けします。レビュー依頼も受け付けています。「お問い合わせ」より気軽にご相談ください。

Copyright© CHASUKE.com , 2019 All Rights Reserved Powered by AFFINGER5.