ワードプレスのサイドバーにTwitterを埋め込むと文字がはみ出る問題を解決するCSSコピペ修正法

こんにちは。YOSHITAKA（@YOSHITA19704216）です。

初心者

TwitterをWordPressに連携させたいのですがスマホだと文字がはみ出てしまいます

よしたか

CSSを追加しましょう。

WordPressにTwitterを追加する際にCSSのコードを追加しておくと

ユーザーが使いやすくなります。

Twitterの文字がはみ出る問題を解消

スマホなどで見るとTwitterがはみ出る問題を解消

パソコンやスマホの横幅は

デバイスによって異なるので

数値で指定しない方が良いです。

スマホで見てちょうど良いと思っても

パソコンで見たら「細い」となってしまったり

パソコンに合わせるとスマホで見た時に

はみ出してしまうこともあります。

その問題を解消する（レスポンシブにする）には

下記のコードをCSSに追加します。

/*サイドバーウィジェットTwetter埋め込み時レスポンシブ*/

@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; }
/*サイドバーウィジェットTwetter埋め込み時レスポンシブおわり*/

WordPressダッシュボード
↓
外観
↓
カスタマイズ
↓
追加CSS

のところにコピペして「公開」をクリックすればOKです。

「追加CSS」のところに既にコードが入っている場合は

1番下の行にペーストすれば大丈夫です。

まとめ

ワードプレスのサイドバーにTwitterを表示させるさいの

ちょっとした文字のはみ出しですが整理されているのは最低限必要です。

ユーザーが余計なところで

意識を持っていかれないようにすると良いですね((^^)

メルマガをやっているので

SNSを含めた集客導線を知りたい方は

登録して下さいね(｡･ω･｡)