Twitter。タイムラインをブログに埋め込む方法

ここから入ります。

Twitter Publish

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

「Embedded Timeline」をクリック。

表示されたコードをブログに貼りつけます。

しかし、このままだととても大きく表示されますのでカスタマイズします。

カスタマイズ

幅と高さを指定

幅はwidth
高さはheight
単位はpx

幅500px、高さ600pxにしたい場合は次のように入力します。

width=”500px”
height=”600px”

これを “twitter-timeline” の後に入れていきます。

必ず半角のスペースも入れてください。

<a class="twitter-timeline" width="500" 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>

リンクの色を指定

data-link-color=”色コード” を追記します。

<a class="twitter-timeline" data-link-color="色コード" href="https://twitter.com/zbnr_hp">Tweets by zbnr_hp</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

WEB色見本原色大辞典

テーマの色を指定

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

<a class="twitter-timeline" 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>

なかなか渋い感じになりました。

中央揃えにする

<div>コードで囲むとタイムラインを中央に寄せることができます。

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