Javascriptレクタングル大TweetPocketFacebookのタイムラインはWebサイトに埋め込むと横幅が読み込み時に固定されます。そのためレスポンシブ対応させるには、ウィンドウリサイズ後にリロードして可変に対応させる必要があります。Webサイトに埋め込む時、PC上では画面の半分幅くらいで他のブロックと横に並べて表示させて、スマートフォンでは他のブロックと上下に並べて、横幅100%で表示させる場合が多いと思います。今回はその場合を想定したサンプルを作成しました。サンプルページPC上では画面の半分幅くらいで他のブロックと横に並べて表示させるイメージです。スマートフォンでは他のブロックと上下に並べて、横幅100%で表示させます。HTMLはこちらです。表示させたいfacebookページのURLに入れ替えてください。あとでCSSとjavascriptで調整しますが、ここは500にしています。'facebook-jssdk'));次にレスポンシブに対応させるために、ウィンドウリサイズ時再度横幅を調整するスクリプトを入力します。iframeリロードの[ON/OFF]を切り替えるウィンドウサイズ。iframeリロードの[ON/OFF]を切り替えるウィンドウサイズ。CSSPCでは横幅960pxのコンテナ内の左側に580pxのお知らせ、右側に340px幅のFacebookを表示させます。スマートフォン(デバイス表示幅768px以下)では横幅100%のコンテナ内に縦にお知らせ、Facebookと共に横幅100%で表示させます。サンプルページFacebookはYouTubeと同じように、枠に100%とCSSで指定しただけでは画像のように可変してくれません。Javascriptでウィンドウリサイズ後に再度表示させるひと手間が必要です。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。検索:プロフィールこのサイトを運営しているユリです。WordPressのコードを書いています。詳しくはこちら他にコスメなどの情報をまとめた「ユリブログ2」も始めました。ご感想やご意見は、お気軽にお問い合わせフォームまでどうぞ。