Youtube動画やGoogle Mapなどのiframeでブログの記事に埋め込んだ地図や画像、動画をスマホやタブレットなど様々な画面サイズに合わせてレスポンシブ対応にする方法についての覚書です。
記事の概要
以前記事にしたレスポンシブ対応の改訂版です。
iframeで埋め込んだ画像や動画をレスポンシブ対応にする方法概要
iframeで埋め込んだGoogle Mapの画像やYoutube動画をレスポンシブ対応にするためには、まず自分の使用しているFC2のブログテンプレートのCSSにレスポンシブ対応するためのコードを追加します。
後はGoogle MapやYoutube動画の埋め込みコードを追加したスタイルシートを使用する<div>タグで囲むだけです。
以下テンプレートの変更方法と実際にGoogle MapとYoutube動画を埋め込む方法を紹介します。
FC2ブログテンプレートのスタイルシート(CSS)にレスポンシブ対応コードを追加する方法
以下に自分が使用しているFC2ブログテンプレートのスタイルシートにiframeオブジェクトをレスポンシブ対応させるためのコードを追加する方法を紹介します。
FC2ブログの管理画面にログインし、左サイドバーのメニューから[テンプレートの設定]をクリックします。
画面に表示されている「XXXX(自分が使っているテンプレート名)のスタイルシート編集」に表示されているスタイルシートに以下のコードを追加します。
どこに追加したらよいかわからない場合は、最後の行に追加してください。
※テンプレートを編集する前に必ずテンプレートの複製をしてバックアップをしておきましょう。
.iframeObj{
position:relative;
width:100%;
}
.iframeObj iframe{
position:absolute;
top:0;
left:0;
width:100% !important;
height:100% !important
}
スタイルシートに追加したら[更新]ボタンをクリックしてスタイルシートへの追加を適用します。
以上でテンプレートへのレスポンシブ対応スタイルシートコードの追加は終了です。
Google Map、Youtube動画のレスポンシブ対応させる方法
以下に実際にGoogle MapとYoutube動画をレスポンシブ対応させるために追加したスタイルシートのスタイルを適用して記事に埋め込む方法を紹介します。
Google Mapをレスポンシブ対応で埋め込む方法
Google Mapで埋め込みたい地図を表示し、埋め込み用のコードをコピーして記事に貼り付けます。
以下はGoogle Mapの実際の埋め込みコードの例です。
※ブログの画面の幅により改行されていますが、実際は改行されていません。
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3716.919828147062!2d-157.66137999999998!3d21.314183999999997!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x7c001163458f8a91%3A0xd480e2d97ccab186!2z44Oe44Kr44OX44Km44O744OT44O844OB44O744OR44O844Kv!5e0!3m2!1sja!2sjp!4v1425951002976" width="600" height="450" frameborder="0" style="border:0">
埋め込んだコードの"widht="の値と"height="の値から、heightの値 ÷ widthの値 を求めます。
上記の例では、width="600"、height="450"なので、450 ÷ 600 = 0.75 となります。
記事に貼り付けた埋め込みコード<iframe>～</iframe>を以下の<div>～</div>タグで囲みます。
その際、計算で求めた値、この例では0.75を%(パーセント)に変換した値の"75%"を"padding-top:"に指定します。
つまり、埋め込みコード<iframe>～</iframe>を囲む<div>タグの指定は以下のようになります。
<div class="iframeObj" style="padding-top: 75%;">以下は上記の手順を基にGoogle Mapを記事に埋め込む際の記述方法です。
<div class="iframeObj" style="padding-top: 75%;">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3716.919828147062!2d-157.66137999999998!3d21.314183999999997!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x7c001163458f8a91%3A0xd480e2d97ccab186!2z44Oe44Kr44OX44Km44O744OT44O844OB44O744OR44O844Kv!5e0!3m2!1sja!2sjp!4v1425951002976" width="600" height="450" frameborder="0" style="border:0"></iframe>
</div>Google Mapをレスポンシブ対応させて記事に埋め込む方法は以上です。
実際にレスポンシブ対応させていないGoogle Mapとレスポンシブ対応させて埋め込んだGoogle Mapとの例を記述します。
レスポンシブ対応させずに記事にそのまま埋め込んだGoogle Map
レスポンシブ対応させて記事に埋め込んだGoogle Map
埋め込む際に元々の地図の大きさが 600 X 450 だったため、"padding-top: 75%;"としています。
比べてみれば分かる通り、レスポンシブ対応させて埋め込んだGoogle Mapの大きさが画面いっぱいに広がっていることがわかります。
スマホの画面で見てみたりするとさらに違いがわかるかと思います。
次にYoutube動画の場合の例を紹介します。
Youtube動画をレスポンシブ対応させずにそのまま埋め込んだ場合
埋め込んだYoutube動画は、width="854" height="510"のため、そのまま貼り付けるとブログの幅を超えているため、はみ出て表示され、ブログのサイドバーなどにかぶってしまいます。
Youtube動画をレスポンシブ対応させて埋め込んだ場合
元の大きさのままだとブログの幅を超えてはみ出てしまいますが、ブログの幅に綺麗に収まっています。
埋め込んだ動画は、width="854" height="510" だったので 510 ÷ 854 = 59.71% となるので、Youtube動画を囲む<div>タグ内の指定は、 style="padding-top: 59.71%;" としています。
Google MapやYoutube動画などのiframeオブジェクトのレスポンシブ対応まとめ
多少めんどくさいですが、レスポンシブ対応させることで元の動画の大きさを意識することなく、また縦横比をそのままにブログの横幅に合わせながらスマホやタブレットの画面サイズに合わせて拡大、縮小して表示させることができます。
Googleのページランクの評価にもレスポンシブ対応しているかどうかを評価対象にするという公式発表もあったようなので、ブログそのものも合わせてレスポンシブ対応に変えていったほうが良いと思います。
特に今はPCよりもスマホやタブレットがユーザー(ブログの閲覧者)の主たるデバイスとなってきていますので、それを踏まえてもレスポンシブ対応は重要です。
スマホやタブレットで見た時にはみ出てたりすると大事な情報が見えなかったりする場合もありますし、何よりカッコ悪いので...
コメント