【超簡単】Twitteの埋め込みをレスポンシブに対応する方法

最終更新日

Comments: 0

Twitterのタイムラインの埋め込みコードを取得する

まずはここにアクセス
https://publish.twitter.com/

ここに埋め込みたいTwitterのURLを入力します。
表示させたいタイプを選びます。今回は最も一般的なタイムライン(真ん中)を選びました。

このままでは高さや横幅などが決められた通りの設定となってしまうので、「set customization options」をクリックします。
高さと幅を変更します。高さは適当に600(これはお好みで)としました。幅はいずれ変更するのですが、220以上である必要があるので220としました。数値を入れたら「Update」をクリックします。
「Copy Code」をクリックすると、埋め込み用のコードがコピーされます。

コピーしたコードを一部改変する

<a class="twitter-timeline" data-width="220" data-height="600" href="https://twitter.com/Twitter?ref_src=twsrc%5Etfw">Tweets by Twitter</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

「data-width=”220“」の「220」は先ほど設定した横幅の指定ですが、これを「100%」に変更します。

<a class="twitter-timeline" data-width="100%" data-height="600" href="https://twitter.com/Twitter?ref_src=twsrc%5Etfw">Tweets by Twitter</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

これがレスポンシブ対応の埋め込みコードです。

aNote

シェアする

コメントを残す

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

CAPTCHA


コメントする