Twitterタイムラインの埋め込みをしてレスポンシブにする方法

この記事では、WEBサイトにTwitterのタイムラインを埋め込んで画面幅によってサイズが可変するレスポンシブ対応にする方法を紹介します。またTweetの埋め込み方も同時に紹介します。

Twitterタイムラインの埋め込み方法
Tweetの埋め込み方法

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

Twitterの埋め込み方は、Twitterの埋め込みコードを取得して、それをHTMLファイルにコピペするだけです。

Twitterでの作業

まずは埋め込みたいTwitterタイムラインの埋め込みコードを取得します。

下記のURLへ行き、取得したいTwitterアカウントの@からのアカウント名を記入します。

Twitter Publish

ディスプレイオプションで「Embedded Timeline」を選択するとTwitterタイムラインが現れます。

その上にあるHTMLが埋め込みコードです。それをコピーしときましょう。

自サイトでの作業

サイトでの作業は、先程コピーした埋め込みコードを好きな場所にペーストするだけです。WordPressの場合はカスタムHTMLを使うと埋め込めます。

そこから必要に応じて、幅などを調整していきましょう。

カスタム

Twitter埋め込みは、ほとんど完成されたコードなので非常に簡単に画面幅に対して最適化できます。

レスポンシブにしたい（幅を画面幅に合わせたい）場合は下記のようにwidth（幅）を100%に指定すればOKです。height（高さ）は約400くらいでいいと思います。

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

実際に埋め込むと以下の様になります。（3カラムの中央に置いてます。）

Tweets by OgJOLPRYK4U7NgH

その他カスタム例は以下の様なものがあります。いずれも上記と同じ位置に記述すれば反映されます。

カスタマイズ	コード例	説明
幅	width=”〇〇px”	幅を指定。単位は「px」 100%にすると画面幅に対応
高さ	height=”〇〇px”	高さを指定。単位は「px」
表示ツイート数	data-tweet-limit=”1″	表示するツイート数を固定。ただしツイートの自動更新がオフに。
テーマ	data-theme=”light” data-theme=”dark”	テーマを明るく。テーマを暗く。
リンクカラー	data-link-color=”#〇〇〇〇″	リンクの色を指定。
ボーダーカラー	data-border-color=”#〇〇″	線の色を指定。
ヘッダー非表示	data-chrome=”noheader”	ヘッダーを非表示。
フッター非表示	data-chrome=”nofooter”	フッターを非表示。
ボーダー非表示	data-chrome=”noborders”	線を非表示。
スクロールバー非表示	data-chrome=”noscrollbar”	スクロールバーを非表示。
背景透明	data-chrome=”notransparent”	背景の色を透明。