Twitterのタイムラインを埋め込むと、横幅がはみ出てしまう時の対処法

ということで、今回は

「おぉぉぉーーーい！！iPhoneでブログのTwitterタイムラインを見たら、横にはみ出てしまっているやんけー！」

・・・って人のための記事です^^

他のブラウザ（Chrome）や、パソコンで見たときは平気なんだけど、なぜかiPhoneで見たときだけはみ出る結果に。。

本当はiPhoneで見たときもこうしたい↓

うん、スッキリ枠内に収まっていますね！

実は、これはiPhoneのiOS自体に原因があるみたいです。

同じように思っている人がいたら、こちらの記事を参考にしてください。

それでは、さっそく解説していきます！

タイムラインを埋め込む方法

ちなみに、ブログにtwitterのタイムラインを埋め込む方法は別の記事で解説しているので、

これから埋め込んで表示させたい人は、こちらの記事を参考にして設定してください↓

あわせて読みたい

ブログでtwitterのタイムラインウィジェットをカスタマイズする方法 今回はワードプレスを利用したブログにTwitterのタイムラインの投稿を埋め込む方法をご紹介します。普段僕らが使っている「Google・Yahoo」などの代わりに、Twitterを検索ツールとして利用する人もいるくらいなので、Twitterとブログを連携させれば、相互集客につながる可能性も高まります。

最優先させるコード「!important」で幅を指定する

さて、見出しに書いた通りなのですが、

twitterのタイムラインの幅を「!important」という一番優先されるコードをCSSに追記してあげることで解決します。

今回追記するコードはこちら↓

このコードは、レスポンシブデザインのテーマに使うコードです。

レスポンシブデザインとは、ブログを見るデバイス（スマホ or パソコン）で表示の仕方を変えるデザインで、Googleが今最も推奨している方式です。

基本的に今出ているのは、ほとんどがレスポンシブデザイン対応のテーマだと思います。

まとめ

今回は、iPhoneに搭載されているiOSというシステムに原因がある事象でした。

なので、短いですが簡単に対応方法をまとめましたので、ぜひ参考にしてくださいね^^