![見出し画像](https://assets.st-note.com/production/uploads/images/130202949/rectangle_large_type_2_4f19e94b3218e5d2f5dd958815d461a9.png?width=1200)
X(旧Twitter)のタイムラインを埋め込む方法
自分のポートフォリオやブログにXのタイムラインを埋め込みたい!
そんな時に読む記事です↓
タイムラインの埋め込み方
1. 公式サイトで埋め込みたいページのURLを貼り付ける
こちらのURLがXをシェア公開するための公式サイトです。
ここに貼り付けたいページのURLを入れてください。
自分のアカウントならこんな感じ
https://twitter.com/自分のアカウント名
![](https://assets.st-note.com/img/1707371497457-fu1lYYNWFJ.png?width=1200)
2. どのスタイルで表示するかを選択する
表示スタイルを選べるので左のタイムラインを選択。
![](https://assets.st-note.com/img/1707371595067-EUegZeBJ83.png?width=1200)
3. コードをコピーしてHTMLに貼り付ける
この画面が出てきたら完成です。
コードをHTMLの<body>タグの中にペーストしてください。
![](https://assets.st-note.com/img/1707371778693-0LnQclZNIr.png?width=1200)
番外編(レスポンシブ対応)
貼り付けたはいいけど大きすぎたよって場合
画面いっぱいになってしまってお困りですか?
その場合はレスポンシブ対応させることもできます。
高さと幅を変更する
set customization options をクリック!
高さ(height)と幅(width)を指定できます。
また、ライトモードダークモードの選択も可能。
表示する言語も変えることができます。
(Automaticだとユーザー側の環境設定に合わせてくれるのでこれが基本)
![](https://assets.st-note.com/img/1707372053575-96P3PexBQ6.png?width=1200)
入力と選択が完了したらUpdateをクリック!
これで完成です。
![](https://assets.st-note.com/img/1707372199792-jAviiInVZU.png?width=1200)
.