Twitterウィジェットのデザインをカスタマイズしたので、やり方をまとめました

Twitterウィジェット(埋め込みタイムライン)の設置が完了したら、次はコード側でデザインをカスタマイズしてみましょう。
Twitterウィジェットの設置についてはこちら

今回は公式に提示されている方法の中で、デザイン(見た目)に関するものだけをご紹介します。
全てのカスタマイズについて知りたい方は、Twitter公式の情報をご確認下さい。
突然ですが新サービスのおしらせです ちびキャラ おまちしてます!

公式情報はこちら
埋め込みタイムライン | Twitter Developers(日本語)

カスタマイズのやり方

ウィジェットを作成した際に、発行されるコードに以下のようなaタグがあります。
<a class="twitter-timeline" href="https://twitter.com/twitter_name" data-widget-id="********">

ここに赤字の部分のように、カスタマイズしたい属性を書き加えていきます。
<a class=”twitter-timeline” width=”180px” data-chrome=”noheader” href=”https://twitter.com/twitter_name” data-widget-id=”********”>

記述する順番に決まりはありません。
他の部分を間違えて変更してしまったりしないように、気をつけましょう。

一番最後にデザインに関するカスタマイズ項目の一覧があります。
とりあえずどんなものがあるのか確認したい場合はそちらをご覧ください。

幅と高さを指定する

幅はwidth、高さはheightで指定します。単位はpxです。
幅180px、高さ200pxにするには以下のように書きます。
width="180px" height="200px"

するとこんな感じの、ちまっとしたウィジェットになります。
これが最小サイズで、これより小さくすることはできません。
また幅は520pxが最大で、これより大きくすることはできません。高さには特に制限はないようです。

指定しなかった場合、幅は親要素に対して100%(最大520px)、高さは600pxになります。

表示する件数を指定する

1~20件の間で、表示する件数を固定することができます。
2件だけ表示したい場合は以下のように書きます。
data-tweet-limit="2"


この指定をすると、ウィジェットの高さが件数に応じて固定され、heightの指定が無効になります。
また「さらに読み込む」のリンクが表示されなくなり、自動更新も行われません。
最新のツイートを数件だけ、スクロールせずに見えるようにしておきたい時に使えそうです。

テーマを指定する

data-themで、暗いテーマと明るいテーマのどちらかを指定できます。
※比べやすくするために、サイズを調整していますが、その記述は省略します。

暗いテーマにする場合は以下のように書きます。黒系の背景色に、白系の文字色になります。
data-theme="dark"


明るいテーマにする場合は以下のように書きます。白い背景色に、黒系の文字色になります。
data-theme="light"

リンクの色を指定する

data-link-colorで、ツイートの中にあるリンクの色を指定します。

リンクの色を赤くする場合は、以下のように書きます。
data-link-color="#FF0000"

ボーダーの色を指定する

data-border-colorで、ウィジェットの周りとツイートを区切るボーダーの色を指定します 今のところ別々に指定することはできないので、全て同じ色になります。

赤くする場合は以下のように書きます。
data-border-color="#FF0000" 

インターフェイスをカスタマイズする

data-chromeで、ヘッダー、フッター、ボーダー、スクロールバーの非表示と、背景色を透明にする指定ができます。
tetblo_130904_01
全部指定するとこんな感じ。
data-chrome="noheader nofooter noborders noscrollbar transparent"

背景色が透明なのをわかりやすくするために、親要素の背景にパターンを指定してあります。
現時点では背景色を指定することはできないので、色をつけたい場合はこのようにtransparentをうまく使うのが良さそうです。

スクロールバーは非表示にすると使いにくくなってしまうので、表示しておくことをオススメします。

カスタマイズできるところ一覧(デザイン関係のみ)

項目 記入例 説明
width="240px" ウィジェットの幅を指定します。単位はpx。最小180px、最大520pxです。
高さ height="300px" ウィジェットの高さを指定します。単位はpx。最小200pxです。
ツイート数の固定 data-tweet-limit="5" 表示するツイート数を1~20件の間で固定します。この要素を指定すると、ツイートが自動更新されなくなります。
テーマ data-theme="dark"
暗いテーマにします。
data-theme="light"
明るいテーマにします。
リンクの色 data-link-color="#43DBDB" ツイート内のリンクの色を指定します。
ボーダーの色 data-border-color="#cc0000" ウィジェットを囲むボーダーと、ツイートを区切るボーダーの色を指定します。
インターフェース data-chrome="noheader" タイムラインのヘッダーをなくします。
data-chrome="nofooter" タイムラインのフッターやツイートボックスをなくします。
data-chrome="noborders" ウィジェットの周りやツイートの間のボーダーをなくします。
data-chrome="noscrollbar" タイムラインのスクロールバーが表示されないようにします。
data-chrome="transparent" タイムラインの背景を透明にします。
data-chrome="noheader nofooter" 複数指定する場合は、スペースで区切ります。例はヘッダーとフッターを表示する場合です。
ウィジェットのカスタマイズと聞くと、難しそうと思ってしまうかもしれませんが、実際はちょっと書き加えるだけです。ぜひ挑戦してみて下さい!