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;”>
</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>