ツイッターの新タイムラインウィジェットをカスタマイズの仕方！

前回は、新しいタイムラインウィジェットの作り方について説明しましたので、今回は、ウィジェットのカスタマイズについて説明します。

1.横幅を変更しよう

横幅は生成されるタグに、「width=”270″」の表記を追加しましょう。これは横幅に270pxを指定した表記です。
例)
<a class=”twitter-timeline” width=”270″ href=”https://twitter.com/yusuketoda” data-widget-id=”243537745123885058″>

2.縦幅を変更しよう

縦幅は生成されるタグに、「height=”150″」の表記を追加しましょう。これは縦幅に150pxを指定した表記です。
例)
<a class=”twitter-timeline” width=”270″ height=”150″ href=”https://twitter.com/yusuketoda” data-widget-id=”243537745123885058″>

3.リンク色を変更しよう

リンク色は生成されるタグに、「data-link-color=”#cc0000″」の表記を追加しましょう。これは赤色を１６進数にした場合の表記です。
色と１６進数の関係については、原色大辞典が参考になるでしょう。
例)
<a class=”twitter-timeline” width=”270″ height=”150″ data-link-color=”#cc0000″ href=”https://twitter.com/yusuketoda” data-widget-id=”243537745123885058″>

4.全体テーマを変更しよう

全体テーマは生成されるタグに、「data-theme=”dark”」の表記を追加しましょう。これはテーマに「暗い」を選択した場合の表記です。
現在テーマには、「暗い(dark)」と「明るい(light)」の２パターンのみ選択することができます。
例)
<a class=”twitter-timeline” width=”270″ height=”150″ data-link-color=”#cc0000″ data-theme=”dark” href=”https://twitter.com/yusuketoda” data-widget-id=”243537745123885058″>

▼変更後のウィジェットは、このようになりました。短っ！
@yusuketoda からのツイート

詳しくは、開発ドキュメントをご覧下さい。

5.好みの色に変更しよう

現時点の公式ウィジェットでは、全体色を変更はできません。
ですが実は、JavaScriptとCSSを利用することで色を変更することができます。

説明は、こちらを参照してくださいな。

それでは、good luck!