当ページのリンクには広告が含まれています。サイトを作成している方やブロガーの方でTwitterのタイムラインを埋め込みたいと考える方もいるかもしれません。WordPressなどでエディターがグーテンベルクならURLをそのまま添付するだけでタイムラインを表示させることができます。中にはWordPressではない人もいると思います。そこでここではTwitterのタイムラインをレスポンシブ対応で埋め込みたい!そんな人に向けての記事になります。実はある無料ツールを使うことで簡単にそのコードを取得することができます。目次Twitterのタイムラインを埋め込む方法Twitterのタイムラインを埋め込む場合、まず始めにタイムラインを埋め込みたいアカウントのURLもしくはアカウント名を取得します。以下は最近気になっている化粧品のアカウントです^^ブラウザに表示されているURLをコピーします。その後、→こちらのツールにアクセスして先ほどコピーしたURLを貼り付けて「→」をクリックします。すると以下のようにタイムラインの表示を選択できますので、どちらかをクリックして選択します。options.」をクリックすると表示に関するカスタマイズを行う事ができます。今回は「Height(px)」と「Width(px)」を「400」としました。Code」と書かれている青いボタンをクリックしますとコピーできます。コピーしたコードをWordPressの投稿や固定ページ、ウィジェットならカスタムHTML内にペーストします。WordPressで表示させたい場合、グーテンベルクの場合は左上のブロックパターンを選択し「カスタムHTML」をクリックすると以下のように貼り付ける事ができるようになります。貼り付けると以下のように表示されます。botanic_daysまたタイムラインをレスポンシブにしたい場合は以下のように数値を変えてあげます。先ほど埋め込んだコードの中に「data-width=”400′′」と書かれてある部分があると思いますので、こちらを「100%」に変更します。これは横幅をデバイスの幅に合わせて可変してくれる設定となります。(厳密に言うとサイト幅なのかな?)100%に指定すると以下の様に幅いっぱいに広がります。botanic_days試しに貼り付けた後にスマホやタブレット等でレスポンシブになっているかを確認してみましょう!以上がTwitterのタイムラインをレスポンシブにする手順です。まとめ今回はTwitterの埋め込みでタイムラインをレスポンシブに設定する方法を紹介しました。まとめると、以下にアクセスして、https://publish.twitter.com/その後数値を「data-width=”400′′」→「data-width=”100%”」に変更してサイトに貼り付けるだけになります。X(旧Twitter)シェアはこちらからサイト内検索アズサソシャゲが好きでいつもスマホばかり触ってます。役に立つ情報発信を心がけてます。閉じるテキストのコピーはできません。