Twitterの埋め込みでレスポンシブで表示させる方法

当ページのリンクには広告が含まれています。
Twitter レスポンシブ 埋め込み

サイトを作成している方やブロガーの方でTwitterのタイムラインを埋め込みたいと考える方もいるかもしれません。WordPressなどでエディターがグーテンベルクならURLをそのまま添付するだけでタイムラインを表示させることができます。

しかし中にはWordPressではない人もいると思います。そこでここではTwitterのタイムラインをレスポンシブ対応で埋め込みたい!そんな人に向けての記事になります。

実はある無料ツールを使うことで簡単にそのコードを取得することができます。

目次

Twitterのタイムラインを埋め込む方法

Twitterのタイムラインを埋め込む場合、まず始めにタイムラインを埋め込みたいアカウントのURLもしくはアカウント名を取得します。

以下は最近気になっている化粧品のアカウントです^^

ボタニクデイズ

ブラウザに表示されているURLをコピーします。

その後、→こちらのツールにアクセスして先ほどコピーしたURLを貼り付けて「→」をクリックします。

すると以下のようにタイムラインの表示を選択できますので、どちらかをクリックして選択します。

Twitter 埋め込み

次に以下の青字で表示されている「set customization options.」をクリックすると表示に関するカスタマイズを行う事ができます。

Twitter 埋め込み

とりあえず今回は「Height(px)」と「Width(px)」を「400」としました。

Twitter 埋め込み

そして「Update」をクリックすると埋め込み用のタグが生成されますので「Copy Code」と書かれている青いボタンをクリックしますとコピーできます。

Twitter 埋め込み

そしてコピーしたコードをWordPressの投稿や固定ページ、ウィジェットならカスタムHTML内にペーストします。

またWordPressで表示させたい場合、グーテンベルクの場合は左上のブロックパターンを選択し「カスタムHTML」をクリックすると以下のように貼り付ける事ができるようになります。

Twitter 埋め込み

貼り付けると以下のように表示されます。

またタイムラインをレスポンシブにしたい場合は以下のように数値を変えてあげます。

Twitterのタイムラインをレスポンシブデザインにする場合

先ほど埋め込んだコードの中に「data-width=”400″」と書かれてある部分があると思いますので、こちらを「100%」に変更します。

Twitter 埋め込み

これは横幅をデバイスの幅に合わせて可変してくれる設定となります。(厳密に言うとサイト幅なのかな?)

100%に指定すると以下の様に幅いっぱいに広がります。

試しに貼り付けた後にスマホやタブレット等でレスポンシブになっているかを確認してみましょう!

以上がTwitterのタイムラインをレスポンシブにする手順です。簡単でしたね。

まとめ

今回はTwitterの埋め込みでタイムラインをレスポンシブに設定する方法を紹介しました。まとめると、以下にアクセスして、

https://publish.twitter.com/

その後数値を「data-width=”400″」→「data-width=”100%”」に変更してサイトに貼り付けるだけになります。

ぜひお試しくださいませ。

シェアはこちらから
目次