ちょっと技術よりの話になりますが、iframeコード、便利ですよね。
特にブログを書く場合には、Youtubeの動画やGoogle Map、instagramの写真など、コードを貼り付けるだけで記事内に埋め込むことが出来るので非常に重宝します。
しかしiframeの難点はレスポンシブ対応が難しいこと。
このブログも6〜7割はスマホによる閲覧ですので、レスポンシブ対応は避けて通れません。
しかしそこが扱いにくいのがiframeの難点なんです。
もちろんcssなどで頑張れば対応可能ですが、仕事であればまだしも、ブログを書くのにそこで頑張りたくはないですよね。
記事の中身の方を頑張りたいです。
そこでボタン一発でiframeのコードをレスポンシブ対応のコードに変換してくれるサイトをご紹介します。
それがこちらのEmbed Responsively。
使い方は非常に簡単。
▼例えばYoutubeの場合は、埋め込みたい動画のURLを入力し、embedボタンを押すだけです。
▼すると下に動画のプレビューが表示され…
▼さらにその下に変換されたコードが表示されます。
あとはこのコードをコピペするだけでOK。
非常に簡単です！
様々なサービスに対応しているのもうれしい所。
▼Youtubeをそのまま埋め込むと…
▼変換して埋め込むと…
▼Google Mapをそのまま埋め込むと…
▼Google Mapを変換して埋め込むと…
という感じ。
PCでご覧の方にはより大きく、スマホでご覧の方には余計な余白などが無く良い感じに見えていると思います。
(instagramも試したのですが、表示が微妙でした。ちょっと調整が必要かもしれません。)
というわけで非常に便利なEmbed Resposively。
ぜひ使ってみて下さい！
というわけで今回は以上！
photo credit: jus10h Karmin 09/22/2016 #1 via photopin (license)
▼CSSは非常に奥が深い…。
