Preziをブログに埋め込んで表示サイズを自動調整（レスポンシブ対応）する方法

今回はPrezi（プレジ）をブログやホームページに埋め込む時、サイズを適切な大きさに調整する方法（レスポンシブ）を紹介します。

みなさんPrezi（プレジ）をウェブサイトへ埋め込む方法はご存じですか？

ただ埋め込むだけなら非常に簡単です。

Prezi（プレジ）の「埋め込む」ボタンをクリック。

そして「クリップボードにコードをコピー」をクリック。

このようなコードがコピーされるので、埋め込みたいブログやウェブサイトにペースト（[Ctrl] + [V]）で埋め込み完了です。非常に簡単ですね。

でもちょっとまって！

それって横幅のサイズあってる？

スマホで見たら横に飛び出てなんか変な感じになってない？

ここではそんな問題を解決するための方法を紹介します。

Preziの埋め込みコードをちょっと修正（非推奨だけど簡単）

メチャメチャ簡単な方法を紹介します。

1. Prezi（プレジ）から埋め込みコードを取得（上記参照）
2. コードをとりあえずペースト。
3. ペーストしたら「width=”550“」の部分を「width=”100％“」に変更するだけ。

ほんとにめっちゃ簡単！

ちなみにPrezi（プレジ）から「クリップボードにコードをコピー」する際の設定画面では、横幅サイズを「100％」に変更することができません。

「％」を入力したらこのような画面が表示されて「数字だけ使ってね！」と言われます。

これでブログにPrezi（プレジ）を埋め込んだ時、PCでみたら横幅のサイズが枠いっぱい（レスポンシブ対応）になります。

しかしこの設定だとスマホで見た場合

ヮ(ﾟдﾟ)ォ!

な、ながい…。

埋め込みコードの縦幅を設定していないため縦長になってますね。

「width=”100％“」にするだけでPC表示は簡単に設定できますが、スマホ表示の場合レスポンシブ対応できないためこの方法は非推奨としました。

縦長が気になるという人は、次の項目で別の方法を紹介します。

htmlとCSSを追加してスマホにも対応（推奨）

こちらの方法はPCやスマホ、タブレットでもPrezi（プレジ）が画面サイズに最適化（レスポンシブ対応）されるため推奨です。

htmlとCSSとか難しそう！と思いますか？

いえいえ、これも簡単です。試しにやってみてください。

このようにPrezi（プレジ）の埋め込みコード前後にhtmlを追加。

上記のコードをcssにコピペして追加。

これだけです。あら簡単(*ﾟ∀ﾟ)

これを追加することで「width=”100％“」と記入しなくてもPCとスマホで最適サイズが表示されます。

Prezi（プレジ）だけでなく、YouTubeの埋め込みにも適用できるので、ぜひ使ってみてください。

まとめ

Prezi（プレジ）埋め込みでレスポンシブ対応することはできましたか？

ホームページやブログでPrezi（プレジ）を埋め込むとき、コードをそのままで埋め込むよりもちょっとした手間でPCやスマホ、タブレットに最適化（レスポンシブ対応）することができるので、どんどん使っていきましょう。

また、埋め込まれたPrezi（プレジ）をスマホで見ると、ページ途中にPrezi（プレジ）があった場合、勝手にそこまでスクロール移動してしまうことがあります。

これの修正方法については

で紹介しています。