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

こんにちは。YOSHITAKA(@YOSHITA19704216)です。

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

よしたか
CSSを追加しましょう。

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

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

 

この記事を読むことで
  • WordPressにTwitterを追加する際に追加CSSのコピペ内容がわかります。
  • Twitterの文字がスマホでもはみ出なくなります。

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を含めた集客導線を知りたい方は

登録して下さいね(。・ω・。)

あなたは「Web集客」に限界を感じていませんか?

サイトをただ作るだけで満足ですか?

あなたのサービスやコンテンツはとっても有益なものがたくさんあります。

良いコンテンツも埋もれてしまっては全く意味がありません。

正しい知識と実践で、SEO対策はもちろん、ユーザビリティーを考えたサイトを作りませんか?

私と歩めばWebマーケティング知識とWordPressスキルが定着し、サイト回遊率、再訪問がアップします。

しかも、これだけでは終わりません!!

その先の「攻めのメディア」と組み合わせ、あなたのサービスを広めて売上を伸ばしていきます。

サイトを育てて、長い間愛されることのできるWordPressサイトからの集客導線(ゴールデンルート)を一緒に作りませんか?

↓ ↓ ↓ ↓ ↓ ↓ 

おすすめの記事