\ プロフィール更新しました /

ブログにTwitterを埋め込み「iPhoneやiPad」ではみ出した場合の対策

ブログにTwitterを埋め込み「iPhoneやiPad」ではみ出した場合の対策Blog
この記事は約4分で読めます。

こんにちは、ぱのん(@panonbox)です。

Twitterで自分のつぶやいたタイムラインをブログに埋め込みたいと考えることがあります。そんな時の為に、ブログのウィジェット機能を使って簡単に埋め込めるように、Twitterの公式サイトでは埋め込み用URL作成ページがあり、誰でも埋め込み用URLを作ることができます。

このように誰でも簡単にTwitterのタイムラインを自分のブログに埋め込むことが出来るのですが、「iPhoneやiPad」などモバイル端末で見た場合に表示画面が崩れてしまう場合があります。

私の場合もappleの製品で見た場合、レスポンシブ設定なのに大きく崩れてしまいました。

自分なりの簡単な解決策を見つけたのでその方法を紹介したいと思います。

Twitterを埋め込むとIOSでなぜ?はみ出すのか?

Twitterを埋め込むとIOSでなぜ?はみ出すのか?

Twitterを埋め込むと「iPhoneやiPad」のようなappleの製品で画面が崩れてはみ出してしまうのでしょう?

Twitter公式サイトから作られる埋め込み用のURLでは「幅のサイズ100%」の設定なので、レスポンシブに対応してるブログに埋め込んだ場合は、親サイズに自動で調整されて綺麗に表示されるはずです。

もちろんパソコンでは画面サイズに関係なく、設定の通り自動調節され綺麗に表示されています。

ところが「iPhoneやiPad」のようなapple製品で表示すると、「親要素」を飛び越えてとんでもないサイズの幅で表示されてしまいます。

appleの製品で画面が崩れて表示される。親要素を飛び越えてすごい幅で表示される

このような感じでスライドメニューのサイズを大きく飛び越えて表示されます。

これは「iframe」を使ったときに起きる「IOS」のバグのようです。試しにいくつかのブラウザで表示させてみましたが、結果は同じでsafariが悪いわけではないようです。

iframeに「width: 100%」の設定を行うと機能しなくなるという「IOS」のバグのようです

ぱのん
ぱのん

アップル製品で表示が崩れてしまうのは、iOSのバグによるものなんです。

iPhoneやiPadではみ出した時の対策方法

対策方法は「jQueryやらCSS」などいろいろな方法が紹介されていますが、問題はシンプルなんです。

なぜ?はみ出すのか?で解説したとおり問題は・・・

iframeにwidth: 100%の設定すると機能しないバグ

というシンプルな問題なんです。

結論をいうと

バグの出る設定の逆『iframeにwidth: 100%』以外の設定にしてあげれば解決します。

「jQueryやらCSS」などを使って対策する方法もWebでたくさん解説されていますが、基本的にはスタイルシートやJSを使って幅を指定したり、幅を指定した箱(div)の中に入れる方法です。

たとえばCSSで

iframe { width: 740px !important; }

強制的に740pxに上書きします。表示される場所が740px以下であればレスポンシブ対応により小さく調整され表示されます。

ですがこのままでは「iframe」要素すべてのサイズが740pxになってしまいます。

iframeのソース(id指定)

「ID」や「Class」を指定してスタイルの調整をすれば良いのです、この方法で綺麗に表示することが出来ました。

ですが、よく考えると「iframeにwidth: 100%」の設定がダメで、後から強制的に上書きを行っていますが、最初から幅を大きめに指定してあげれば良いのではないでしょうか?

Twitter公式埋め込み用URL作成サイト

埋め込み用source作成オプションで幅を少し大きめに設定する

このように、埋め込み用URLを発行するときにオプションで幅を少し大きめに指定してあげれば「width: 100%」ではなくなってIOSのバグが起きなくなります。

め込み用URLを発行するときにオプションで幅を少し大きめに指定してあげれば「width: 100%」ではなくなってIOSのバグが起きなくなります

難しいことを考えないで埋め込み用URL発行時に幅の指定をしてあげれば綺麗に表示するようになりました。

iPhoneでも画面が崩れることなくきれいにTwitterのタイムラインが表示されました
ぱのん
ぱのん

普段からPCで記事を書いてる人は、あまりモバイルでのチェックを行わでしょう。端末の問題で崩れている場合があるので一度チェックしてみて下さい。

まとめ

Twitterのタイムラインをブログに埋め込んだ際は少し大きめの幅を指定しましょう。

一行で済む話を長々解説してきました(笑)

さて今回はいかがだったでしょうか?

最後まで読んでいただいてありがとうございました。

この記事を書いた人
ぱのん

複数の会社を経営しています。
だけど、すべての労働所得を合わせても同年代のサラリーマン以下の年収です(笑)
株式投資や不動産投資を行い資産形成に力を入れつつ、一方で文章力強化のためにライティングの修行を行っています。
このような私の経験を元に、見て頂いてる方に役立つ情報を提供できれば良いなと思っています。

PANONをフォローする
Blog
PANONをフォローする
PANONBOX-ぱのんボックス-

コメント