【超簡単】Twitterのウィジェットを埋め込む方法【カスタマイズ方法付き】

今回はブログやサイトにTwitterのウィジェット（タイムライン）を埋め込む方法を紹介します。

※引くほど簡単です。

Twitterのウィジェットを埋め込む方法
カスタマイズ方法
さらにカスタマイズする
1. CSSでもカスタマイズ可能
WordPressのサイトバーに埋め込む
ウィジェットが意図した通りに表示されない場合は…
まとめ

Twitterのウィジェットを埋め込む方法

まずは以下のサイトに飛んでください。このサイトから埋め込みコードを取得します。

＞＞https://publish.twitter.com/#

埋め込みたいTwitterのURLをそのまま貼り付けます。

タイムラインの表示方法を選択します。

よく見かけるウィジェットは左側なので、とりあえず左を選んでおくといいと思います。

埋め込みコードが表示されるので「Copy Code」をクリックします。

あとはコードをそのままサイトに貼り付ければウィジェットが表示されるようになります。

埋め込みはこれで終わりです。簡単でしたね。

しかし、このままだとめちゃめちゃ縦に長く表示されてしまうので、少しいじっていきましょう。

カスタマイズ方法

カスタマイズは埋め込みコードの上にある「set customization options」をクリックします。

高さ：ウィジェットの高さをpxで指定
幅：ウィジェットの幅をpxで指定
テーマ色：ウィジェットのテーマ色を指定。ライト（白）とダーク（黒）がある。
リンク色：ウィジェット内のリンク色を指定（基本いじらなくていいと思います）
言語：「Automatic」を選択

カスタマイズを指定したら「Update」をクリックし、「Copy Code」をクリックしてカスタマイズ済みのコードを取得できます。

さらにカスタマイズする

さらに細かいカスタマイズをしたい場合は直接コードを追加します。とは言ってもコピペで終わるので簡単です。

複数追加する場合は半角スペースで区切ります。

ウィジェットの高さ（px指定）	data-width=”**”
ウィジェットの幅（px指定）	data-height=”**”
テーマ色を「ダーク」にする	data-theme=”dark”
リンク色	data-link-color=”#****”
境界線の色	data-border-color=”#****”
ヘッダーを非表示にする	data-chrome=”noheader”
フッターを非表示にする	data-chrome=”nofooter”
境界線を消す	data-chrome=”noborders”
スクロールバーを非表示にする	data-chrome=”noscrollbar”
背景を透過させる	data-chrome=”transparent”

ちなみにTwitterウィジェットのヘッダーとフッターはここです↓

また、data-chrome属性は同時に複数指定することができます。その際は半角スペースで区切りましょう。

例えば以下のコードは幅を300px、ヘッダーをフッターを非表示にした場合です。

<a class="twitter-timeline" width="300px" data-chrome="noheader nofooter" href="https://twitter.com/wagashi14248535?ref_src=twsrc%5Etfw">Tweets by wagashi14248535</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

width="300px" data-chrome="noheader nofooter"を追加することで幅を300px、ヘッダーとフッターを非表示にしています。