Prezi/プレジShareCLIP!0今回はPrezi(プレジ)をブログやホームページに埋め込む時、サイズを適切な大きさに調整する方法(レスポンシブ)を紹介します。みなさんPrezi(プレジ)をウェブサイトへ埋め込む方法はご存じですか?ただ埋め込むだけなら非常に簡単です。Prezi(プレジ)の「埋め込む」ボタンをクリック。「クリップボードにコードをコピー」をクリック。[V])で埋め込み完了です。まって!それって横幅のサイズあってる?スマホで見たら横に飛び出てなんか変な感じになってない?ここではそんな問題を解決するための方法を紹介します。まとめPreziの埋め込みコードをちょっと修正(非推奨だけど簡単)メチャメチャ簡単な方法を紹介します。Prezi(プレジ)から埋め込みコードを取得(上記参照)コードをとりあえずペースト。ペーストしたら「width=”550“」の部分を「width=”100%“」に変更するだけ。ほんとにめっちゃ簡単!ちなみにPrezi(プレジ)から「クリップボードにコードをコピー」する際の設定画面では、横幅サイズを「100%」に変更することができません。「%」を入力したらこのような画面が表示されて「数字だけ使ってね!」と言われます。これでブログにPrezi(プレジ)を埋め込んだ時、PCでみたら横幅のサイズが枠いっぱい(レスポンシブ対応)になります。この設定だとスマホで見た場合ヮ(゚д゚)ォ!な、ながい...。埋め込みコードの縦幅を設定していないため縦長になってますね。「width=”100%“」にするだけでPC表示は簡単に設定できますが、スマホ表示の場合レスポンシブ対応できないためこの方法は非推奨としました。縦長が気になるという人は、次の項目で別の方法を紹介します。htmlとCSSを追加してスマホにも対応(推奨)こちらの方法はPCやスマホ、タブレットでもPrezi(プレジ)が画面サイズに最適化(レスポンシブ対応)されるため推奨です。htmlとCSSとか難しそう!と思いますか?いえいえ、これも簡単です。試しにやってみてください。class="prezi">〜ここにPreziの埋め込みコード〜</div>このようにPrezi(プレジ)の埋め込みコード前後にhtmlを追加。!important;}上記のコードをcssにコピペして追加。あら簡単(*゚∀゚)これを追加することで「width=”100%“」と記入しなくてもPCとスマホで最適サイズが表示されます。Prezi(プレジ)だけでなく、YouTubeの埋め込みにも適用できるので、ぜひ使ってみてください。まとめPrezi(プレジ)埋め込みでレスポンシブ対応することはできましたか?ホームページやブログでPrezi(プレジ)を埋め込むとき、コードをそのままで埋め込むよりもちょっとした手間でPCやスマホ、タブレットに最適化(レスポンシブ対応)することができるので、どんどん使っていきましょう。埋め込まれたPrezi(プレジ)をスマホで見ると、ページ途中にPrezi(プレジ)があった場合、勝手にそこまでスクロール移動してしまうことがあります。これの修正方法についてはスマホでPreziページを開くと勝手にスクロールされる時の対処法2015年6月14日現在――。Prezi(プレジ)が埋め込まれたブログやホームページをスマホで開くと、画面が勝手にPrezi...prodeza.netで紹介しています。関連記事Prezi/プレジ公認エキスパートになる方法を公式に聞いてみた今回はオンラインプレゼンテーションツールPrezi(プレジ)の公認エキスパートになる方法をご紹介します。現在(2015/06...記事を読むPrezi新機能で背景カラーやフォント変更が簡単になった?!2015年10月29日、Preziから以下の様なメールが利用者に送られてきました。3...記事を読む【期間限定】Prezi制作代行資料を公開しますPrezi制作代行の参考資料を作りました。関西圏...記事を読む新しいプレゼンテーションツールPrezi/プレジとは革新的なプレゼンテーションツールと言われているPrezi(プレジ)。Overview」をグーグル先生にフレームごと翻訳してもらいました。日本語が...記事を読むPreziで使用可能なファイルの種類・形式一覧ここではPreziで使用できるファイル形式についてまとめています。Preziでプレゼン作成の際にご活用ください。画像ファイルはb...記事を読むスマホでPreziページを開くと勝手にスクロールされる時の対処法2015年6月14日現在――。Formをグーグル先生に翻訳してもらったPrezi(プレジ)公認エキスパートプログラムに登録するための申請ページが英語のため、またもやグーグル先生に頼ってしまいました。...記事を読む【超便利】作業が10倍捗るPreziのショートカットキーまとめスマホでPreziページを開くと勝手にスクロールされる時の対処法スポンサーリンク管理人:you大阪でWebデザイン制作をしてます。『プロモーションするデザイン。』をコンセプトに、デザインやプロモーション方法を幅広く紹介。