【Twitter】タイムラインをサイトに埋め込む方法

➡Twitter Publishから入ります。

タイムラインを表示したいTwitterのURLを入力して、エンターキーを押します。

「Embedded Timeline」をクリック。

表示されたコードをサイトに貼り付けても良いのですが、このままだと大きく表示されてしまいますので、「set customization options.」をクリックして設定します。

幅、高さ、明るさを指定したら「update」をクリック。

明るさをDarkにしたら、こんな感じになりました。

Tweets by zbnr_hp

補足

幅と高さを指定

幅500px、高さ600pxにしたい場合は <data-width="500" data-height="600"> を “twitter-timeline” の後に入れます。必ず半角のスペースも入れるようにします。

<a class="twitter-timeline" data-width="500" data-height="600" 
href="https://twitter.com/zbnr_hp">Tweets by zbnr_hp</a> 
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

Tweets by zbnr_hp

テーマの色を指定

暗くしたい場合は data-theme=”dark” を追記します。

<a class="twitter-timeline" data-width="500" data-height="600" data-theme="dark" 
href="https://twitter.com/zbnr_hp">Tweets by zbnr_hp</a> 
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

Tweets by zbnr_hp

中央揃えにする

<div style="text-align:center;"></div>でコードで囲むと、タイムラインを中央に寄せることができます。

<div style="text-align:center;">
<a class="twitter-timeline" data-width="500" data-height="600" 
href="https://twitter.com/zbnr_hp">Tweets by zbnr_hp</a> 
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

リンクの色を変更する「data-link-color="色コード"」などは使用できなくなったようなので削除しました