新しくなったTwitterウィジェットをカスタマイズしよう

これまで私は、ブログへのTwitterタイムラインの埋め込みにデザインの自由度が高いblogger.jsを使用していたのですが、Twitter API ver1.1への変更をきっかけにTwitterの公式ウィジェットを使うように変更しました。新Twitter公式ウィジェットは、設定できるオプションが少ないと思われるかも知れませんが、HTMLを直接編集することでデザインをカスタマイズできるオプションが用意されています。

新しくなったTwitterウィジェット

まず、Twitterにログインして「設定」 > 「ウィジェット」の新規作成から、Twitterウィジェットを作成しましょう。左側でオプションを設定したら、「ウィジェットを作成」をクリックしてHTMLコードを生成します。後は、このコードをHTMLのTwitterタイムラインを表示したい場所にペーストするだけです。Wordpressの場合はテンプレートにペーストします。

Twitterウィジェットの作成画面

テーマを変更する

新Twitterウィジェットでは、生成されたコードのa要素に属性を追加することで、デザインをカスタマイズすることができます。テーマを変更するには、a要素にdata-theme属性を追加します。現時点では、"dark"と"light"の2つのテーマが用意されています。なお、テーマは「ウィジェットの設定」でも変更することができますが、a要素の属性で指定したテーマが優先されます。

HTML

<a class="twitter-timeline" data-theme="dark" href="https://twitter.com/ユーザ名" data-widget-id="xxxx">

リンクの色をカスタマイズする

リンクの色をカスタマイズするには、a要素にdata-link-color属性を追加し、カラー値を16進数で指定します。

HTML

<a class="twitter-timeline" data-link-color="#0000ff" href="https://twitter.com/ユーザ名" data-widget-id="xxxx">

幅と高さを指定する

幅と高さを指定するには、a要素にwidth, height属性をピクセル単位で指定します。widthの最小値は180px、最大値は520pxとなります。新Twitterウィジェットはレスポンシブレイアウトに対応しており、ボックスの幅に応じて自動的に幅を調整してくれるため、widthに関しては最大値の520pxを指定しておくと良いと思います。

HTML

<a class="twitter-timeline" width="520" height="300" href="https://twitter.com/ユーザ名" data-widget-id="xxxx">

インターフェイスを変更する

タイムラインのインターフェイスを変更するには、a要素にdata-chrome属性を指定します。data-chrome属性の値として、下記4つのオプションが用意されており、複数を同時に指定する場合は半角スペースで区切ります。

noheader
タイムラインのヘッダーを非表示にします。ヘッダーは、上部のフォローボタンが表示されている箇所です。
nofooter
タイムラインのフッターを非表示にします。フッターは、下部のユーザー宛ツイートボックスの箇所です。
noborders
ボーダーを非表示にします。各ツイートを区切る境界線とウィジェットの周りの境界線が非表示になります。
transparent
ウィジェットの背景を透明にします。背景を透明にするとウィジェット内部のpaddingが0になるようです。

HTML

<a class="twitter-timeline" data-chrome="noheader nofooter noborders transparent" href="https://twitter.com/ユーザ名" data-widget-id="xxxx">

ボーダーの色をカスタマイズする

ボーダーの色をカスタマイズするには、a要素にdata-border-color属性を追加し、カラー値を16進数で指定します。各ツイートを区切る境界線とウィジェットの周りの境界線の色が変更されます。ただ、現時点で私が確認した限り、data-link-color属性と同時に指定しないと反映されませんでした。

HTML

<a class="twitter-timeline" data-border-color="#ff0000" data-link-color="#0000ff" href="https://twitter.com/ユーザ名" data-widget-id="xxxx">

終わりに

以上、新しくなったTwitterウィジェットのカスタマイズ方法を紹介してきましたが、新Twitterウィジェットの最大の利点はTwitter APIの制限を受けないことです。旧TwitterウィジェットはAPI ver1.0のサポート終了と共に使用できなくなるので、まだ旧Twitterウィジェットを使用している方は早めに移行作業をしておきましょう。