twitter 埋め込みツイートの横幅width(px)をcssで調整する方法

web制作

ブログやウェブサイト(webページ)では、SNS・twitterのツイート記事を埋め込むことができます。この時、埋め込んだツイート記事の横幅は、cssで調整できるので、固定pxにもできますし、レスポンシブ対応にもできます。

先に結果を示すと、こんな感じです。

twitter ツイッター 埋め込みツイート 横幅

埋め込みツイートの例

こちらが埋め込みツイートです。

css調整の方法

じつは、classやidでなく、importantを使うことで、twitter-widgetのセレクタ名を直接指定しても編集できます。



twitter-widget{
  width: 300px !important;
}

レスポンシブにするなら、%指定で。



twitter-widget{
  width: 300px !important;
}

ちょっと強引なやり方ですが、twitterの埋め込みツイートの横幅調整がうまくできない時は参考にしてみてください。

最後に一言

たぶん他のやり方もあります。参考の一つになれば幸いです。

この記事をSNSでシェアする?

twitter 埋め込みツイートの横幅width(px)をcssで調整する方法


  • 0
    このエントリーをはてなブックマークに追加
  • Pocket

PROFILE

yoshi

KIYOTATSU(キヨタツ)を運営しているウェブ制作者のYoshiです。得意な分野はディレクションとコーディングです。デザインはシンプルなものだけ可能です。他、色々と随時習得中です。