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

みみこみみこ
ぎゃー%F#!#pp!
おかぴーおかぴー
!!!
えっ!?みみこさん、どうしたんですか?
みみこみみこ
実は、ブログに埋め込んだTwitterのタイムラインが、、、
iPhoneで見た時に横からバビョーーん!とはみ出ているんです。。。

twitter タイムライン

 

ということで、今回は

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

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

 

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

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

twitter タイムライン

 

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

 

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

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

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

 

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

おかぴーおかぴー

こんにちは、WEBデザイナーのおかぴーです!(冒頭で紹介が遅れたので笑)

絵を描く仕事をしたかった僕が、WEBデザイナーになった理由はこちらのプロフィールへ。稼げるブログを作りたい人はこちらへ。

 

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

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

合わせて読みたい

おかぴー こんにちは、WEBデザイナーのおかぴーです! 絵を描く仕事をしたかった僕が、WEBデザイナーになった理由はこちらのプロフィールへ。稼げるブログを作りたい人はこちらへ。   今回は、[…]

 

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

 

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

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

『カスタマイズする前に』 カスタマイズをするときは、子テーマを使って、バックアップをとってから行ってください。functions.phpも必ず子テーマにインストールして、そちらを作業で使用してください。

 

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

@media screen and (max-width: 768px) and (min-width: 480px) {
iframe .twitter-timeline-rendered{
width: 490px!important;
}
}

@media screen and (max-width: 480px) {
iframe.twitter-timeline-rendered {
width: 450px !important;
margin:0 auto;}
}

.timeline-Widget {
max-width: 300px!important;
width:200px!important; }

 

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

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

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

 

おかぴーおかぴー

僕が現在使っている「THE THOR」や、以前使用していた「STORK」も、レスポンシブデザイン対応のテーマになっています。

 

まとめ

 

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

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

みみこみみこ
焦ったーーー。
そして直ってよかったーー( ̄▽ ̄;)もうあれ見た時には笑うしかできなかったので。
おかぴーおかぴー

こういう時でも焦らず、問題を解決できそうなキーワードで検索をして、解決記事を見つけましょうね。

もしそれでも見つからないとかがあれば、相談ください〜

 

ブログ収益化

>2020/4/5 テーマ「THE THOR」でリニューアル!

2020/4/5 テーマ「THE THOR」でリニューアル!

2年近く「STORK」を愛用してきた当ブログは、これから「THE THOR」でデザインも新たに生まれ変わりました。(STORK、今までありがとう!)

これからも当ブログではブログ作りに役立つ情報を発信していきます。よろしくお願いします(o^^o)

CTR IMG