美雑貨ソムリエ「prasm(プラズム、って読みます)」は週末だけが楽しいWeekenderではなく、1週間7日間、自分のしっくりを追い求め、日々をアップデートし続けるそんな“Weeker”に献げるブログです。2児の父でパパ6年生なデザイナー。詳しくプロフィールは「about」へ。/twitterfbはてブnoteを書くに選定していただきました。shintarowfresh覚えておいて損はないかも。自分のブログ内で、自分で用意する画像や映像に関してはCSSで割と簡単にレスポンシブ化させることが出来ますが、外部サービスが吐き出す埋め込みコードは知識がなければ、あるいは知識があってもレスポンシブ化させるのが困難なパターンもありますね。instagramなんかは結構厄介なんですよね。そこで、embedresponsively.com埋め込みコードをレスポンシブ化してくれるwebサービスなんてものがアリます。実際このブログではyoutubeやvimeoなんかはレスポンシブ化してありますが、この先埋め込みたいwebサービスごとに対応するのは面倒だし、CSSの知識のない方でもコイツを使えば簡単に対応させられるので、便利です。レスポンシブなブログを組んでいる方でビデオや写真がはみ出しているのを見受けますが、あれはね、ちょっとね。この映像のアドレスを変換してみます。allowfullscreen></iframe></div>こういうコードが吐出されました。埋め込むメディアに併せてCSSを書いてくれるようです。スマホで見ても、漏れることはないでしょう。instagramではどうでしょうか。instagramが埋め込み用に吐き出すコードは以下です。allowtransparency='true'></iframe></div>こういうCSS付きのコードを書いてくれます。?スマホで閲覧した時、漏れてますでしょうか?どうやらこのブログでは事前に自分で書いたコードをバッティングしてyoutubeだと上手く動かないですね。まとめるね!ある程度CSSの知識がアレば、画像やビデオのレスポンシブ化は難しくありません。WordPressで記事内に貼り付けたビデオの幅の調節に苦しんでいるなら取り入れるべきCSS技*prasm_じっさい上の記事はウェブサービスが書いてくれるCSSに近いことをテーマの大本のCSSに施す作業です。いえ、CSSを扱えなくても埋め込みを簡単にレスポンシブ化してくれるのは、知識がなくとも手軽に出来て、知っておいて損はないですね。いちいちウェブサービスにかけるのが面倒な方はCSSを少し勉強してもいいかもしれません。気が利くウェブサービスなので、同様なものがたくさん出てくてくれるといいなぁ。面白かったり役に立ったらシェアしてね。レベルじゃねぇ!これはもうキャンプという名の旅行だよ。小豆島で島キャンプ二本栗キャンプ村でしっぽりと森キャンプ運動会には600mmズームでこうすれば、音楽がもっと好きになるかもしれない。GW2480T【AD】ハードボイルドでなければ、生きていけない。Amazonでチェックなるほどデザイン〈目で見て楽しむ新しいデザインの本。prasm(プラズム).。