スタイルシートも不要でGoogle MapやYoutube動画の埋め込みHTMLをレスポンシブ対応したHTMLコードに一発変換してくれる便利なWebサイトembedresponsively.comを覚書。
スタイルシートを使用したレスポンシブ対応について
スタイルシートを使用してGoogle MapやYoutube動画などを記事に埋め込む際にレスポンシブ対応する方法は以下の記事を参照してください。
embedresponsively.comの概要
embedresponsively.comは、スタイルシートの設定など不要で埋め込みURLを貼り付けてボタンクリック一発でレスポンシブ対応化された埋め込みURLに変換してくれる便利なWebサイトです。
embedresponsively.com は、Youtube動画やGoogle Mapなどの埋め込みURLをサイトのテキストボックスに貼り付けてボタンをクリックすれば、貼り付けた埋め込みオブジェクトをレスポンシブ対応化させたコードを出力してくれます。
あとは出力されたコードを記事に貼り付ければスタイルシートなどの設定もする必要なく、埋め込んだオブジェクトがレスポンシブ対応化されて表示されるというとても便利なWebサイトです。
対応している埋め込みオブジェクト
対応している埋め込みオブジェクトは以下のとおりです。
- YouTube
- Vimeo
- Dailymotion
- Google Maps
- Vine
- Getty Images
- Generic iFrame
embedresponsively.com の使用方法
Google Mapを埋め込む場合を例にとって使用方法を説明します。
まずは埋め込みたいGoogle Mapの埋め込みURLをコピーします。
次にembedresponsively.com にアクセスします。
「Select a media source below:」の下に並んでいるボタンから[Google Map]をクリックします。
「Google Maps iFrame Embed:」と書かれた下のテキストボックスにコピーしたGoogle Mapの埋め込みURLを貼り付けて[Embed]ボタンをクリックします。
実際に埋め込まれる地図が表示され、その下の「Embed code:」と書かれたテキストボックスにレスポンシブ対応化された埋め込みURLが表示されるので、あとはそれをコピーして記事に貼り付けるだけです。
埋め込みオブジェクトを簡単にレスポンシブ対応コードに変換してくれる「embedresponsively.com」まとめ
スタイルシートやHTMLに関する知識がくても簡単にGoogle MapやYoutube動画をレスポンシブ対応にしてくれる素晴らしいサイトです。
操作も簡単、基本コピー&ペーストだけです。
Googleもレスポンシブ対応されているかどうかをサイトの評価の一つとすることを公式に発表しているので意識したいところです。
スタイルシートとかHTMLなんてよくわからないという方もこういった便利なWebサービスを使用することで十分対応できると思うので是非活用してみてください。
コメント