FC2 ブログカスタマイズ iframeで埋め込んだ動画ファイルなどの画面をスマホサイズに変更する

FC2ブログで動画などの埋め込みオブジェクト(iframe)サイズを最適化する方法

スマホでブログを見た時に、はみ出さないように、画面サイズに合わせて最適化する(レスポンシブ)方法です。

FC2のオフィシャルデザインのBasic Whiteで検証しましたが、その他のデザインでも適用できるはずです。
youtubeなどの動画だけでなく、GoogleMapなどでも応用できます。

本文のiframe 要素をdiv要素で囲う

まず本文のiframe要素をdiv要素で囲います。

動画を任意サイズではみ出さないようにすることは、iframe要素だけではできません。

ここでは divタグにYoutubeというクラス名をつけています。
サイズは適当に1280pxにしました。

CSSに追記する

次にCSSに追記する内容です。

クラス名のところはサンプルではyoutubeにしています。

FC2の設定ではPC用とスマホ用それぞれのCSS追記をします。

微生物による自己修復材料とインフラの長寿命化

自己修復材料コンクリートの研究が進んでいる。コンクリートは強度や施工性という長所とひび割れやすいという短所がある。コンクリートを自己治癒できれば、長寿命化に貢献するほか、維持管理コストを下げることができる。
続きを読む 微生物による自己修復材料とインフラの長寿命化