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

Preziをレスポンシブで埋め込み

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

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

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

Prezi埋め込み方法

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

Prezi埋め込みクリップボードにコードをコピー

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

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

でもちょっとまって!

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

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

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

スポンサーリンク
記事下段広告

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

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

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

ほんとにめっちゃ簡単!

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

Prezi埋め込み横幅変更

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

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

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

Prezi埋め込み幅100%のスマホ画面

ヮ(゚д゚)ォ!

な、ながい…。

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

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

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

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

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

htmlとCSSとか難しそう!と思いますか?

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

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

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

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

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

Prezi埋め込み幅レスポンシブ対応のスマホ画面

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

まとめ

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

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

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

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

スマホでPreziページを開くと勝手にスクロールされる時の対処法
2015年6月14日現在――。 Prezi(プレジ)が埋め込まれたブログやホームページをスマホで開くと、画面が勝手にPrezi...

で紹介しています。

スポンサーリンク
記事下段広告
記事下段広告

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です