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

twitter タイムライン
おかぴー

こんにちは!WEBデザイナーのおかぴー(@blueokap)です。

当ブログは、挫折しないブログ作りと収益化を応援するブログです!

 

twitter タイムライン

 

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

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

 

他のブラウザ(Chrome)や、パソコンで見たときは平気なんだけど、

なぜかiPhoneで見たときだけはみ出る結果に。。

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

twitter タイムライン

 

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

 

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

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

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

 


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

 

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

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

ブログでtwitterのタイムラインウィジェットをカスタマイズする方法

2018.05.07

 

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

 

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

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

カスタマイズする前に
カスタマイズをするときは、子テーマを使って、バックアップをとってから行ってください。CSSを貼り付ける場所はこちらから。

 

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

ソースコード

@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が今最も推奨している方式です。

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

 

おかぴー

僕がこのブログで使っているテーマの「STORK」も、レスポンシブデザイン対応のテーマになっています。

 

まとめ

 

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

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

 

ブログ作り、何から始めたらいいか迷っている人へ

WordPressの設定、記事作り、収益化も・・・ブログと一言で言ってもやることいっぱい、どれから手をつけたらいいか分からない・・・

実は、デザインを整えるのも、ブログの方向性が決まってから進めるのがおすすめ!

一度自分のブログを俯瞰して(全体を上から見る)どんな方向性にすればいいかを見直す機会を作ることの重要性を解説。

同時に、あなたのブログ作りを加速させる「リサーチ」「ターゲット理解」「考える力」を鍛えよう!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください