Twitterのタイムラインを自分好みにカスタマイズする方法

Twitterのタイムラインを自分好みにカスタマイズする方法

色んなサイトで見かけるTwitterのタイムライン。ときたま小洒落たデザインにカスタマイズされたものを目にします。どうすればかっこよくなるのかと疑問に思っておりましたところ、自分好みにカスタマイズする方法を発見いたしましたのでご紹介:)

タイムラインの表示方法が分からない方はこちらをどうぞ。

以前の記事:ブログにTwitterガジェット(タイムライン)を表示する方法

SPONSORED LINK

タイムラインをカスタマイズする

カスタマイズ方法

ウィジェットを作ったとき生成されたコード(aタグ)に属性を追加することで、タイムラインのデザインをカスタマイズできます。追加する順番に決まりはないので、記述さえ間違えなければOKです:)

<a class="twitter-timeline" width="330" data-theme="dark" href="https://twitter.com/xxxx" data-widget-id="xxxx">@xxx からのツイート</a>

テーマを変更する

テーマを変更するにはdata-theme属性を追加します。明るいテーマ"light"と暗いテーマ"dark"から選びましょう。

<a 
data-theme="dark" 
class="twitter-timeline" 
href="https://twitter.com/xxxx" 
data-widget-id="xxxx">@xxx からのツイート</a>

リンクの色を変更する

リンクの色を変更するにはdata-link-color属性を追加します。値は16進数のWEBカラーコードで指定します。

<a 
data-link-color="#cc0000"
class="twitter-timeline" 
href="https://twitter.com/xxxx" 
data-widget-id="xxxx">@xxx からのツイート</a>

幅を変更する

幅を変更するにはwidth属性を追加します。指定できるサイズは180px〜520pxです。

<a 
width="300"
class="twitter-timeline" 
href="https://twitter.com/xxxx" 
data-widget-id="xxxx">@xxx からのツイート</a>

高さを変更する

高さを変更するにはheight属性を追加します。指定できるサイズは200px〜です。

<a 
height="600"
class="twitter-timeline" 
href="https://twitter.com/xxxx" 
data-widget-id="xxxx">@xxx からのツイート</a>

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

インターフェースを変更するにはdata-chrome属性を追加します。指定できる値はnoheader、nofooter、noborders、noscrollbar、transparentの5つがあり、複数を同時に指定する場合は半角スペースで区切ります。

インターフェース変更の詳細

noheader

タイムラインのヘッダーを非表示にします。

<a 
data-chrome="noheader"
class="twitter-timeline" 
href="https://twitter.com/xxxx" 
data-widget-id="xxxx">@xxx からのツイート</a>
nofooter

タイムラインのフッターを非表示にします。

<a 
data-chrome="nofooter"
class="twitter-timeline" 
href="https://twitter.com/xxxx" 
data-widget-id="xxxx">@xxx からのツイート</a>
noborders

ボーダーを非表示にします。各ツイートを区切る境界線とウィジェットの周りの境界線が非表示になります。

<a 
data-chrome="noborders"
class="twitter-timeline" 
href="https://twitter.com/xxxx" 
data-widget-id="xxxx">@xxx からのツイート</a>
noscrollbar

タイムラインのスクロールバーを非表示にします。

<a 
data-chrome="noscrollbar"
class="twitter-timeline" 
href="https://twitter.com/xxxx" 
data-widget-id="xxxx">@xxx からのツイート</a>
transparent

ウィジェットの背景を透明にします。

<a 
data-chrome="transparent"
class="twitter-timeline" 
href="https://twitter.com/xxxx" 
data-widget-id="xxxx">@xxx からのツイート</a>
複数を同時に指定する

半角スペースで区切ります。

<a 
data-chrome="nofooter noborders"
class="twitter-timeline" 
href="https://twitter.com/xxxx" 
data-widget-id="xxxx">@xxx からのツイート</a>

ボーダー(境界線)の色を変更する

ボーダーの色を変更するにはdata-border-color属性を追加します。値は16進数のWEBカラーコードで指定します。各ツイートを区切る境界線とウィジェットの周りの境界線の色が変更されます。

<a 
data-border-color="#cc0000"
class="twitter-timeline" 
href="https://twitter.com/xxxx" 
data-widget-id="xxxx">@xxx からのツイート</a>

言語を変更する

言語を変更するにはlang属性を追加します。

<a 
lang="ja"
class="twitter-timeline" 
href="https://twitter.com/xxxx" 
data-widget-id="xxxx">@xxx からのツイート</a>

ツイート数を固定する

ツイート数を固定するにはdata-tweet-limit属性を追加します。指定できる数は1~20件です。なお、ツイート数を固定すると件数に応じて高さが固定になりheight属性の指定が無効になります。また「さらに読み込む」のリンクが表示されなくなり、自動更新も行われなくなります。

<a 
data-tweet-limit="5"
class="twitter-timeline" 
href="https://twitter.com/xxxx" 
data-widget-id="xxxx">@xxx からのツイート</a>

おすすめしたいユーザーを指定する

おすすめしたいユーザーを指定するにはdata-related属性を追加します。複数を同時に指定する場合は「,(カンマ)」で区切ります。

<a 
data-related="benward,endform"
class="twitter-timeline" 
href="https://twitter.com/xxxx" 
data-widget-id="xxxx">@xxx からのツイート</a>

まとめ

というわけでTwitterのタイムラインをカスタマイズする方法でした。

他の人と同じデザインなんてつまんねぇ!と思っていた方は、これを参考にバンバン自分色に染めちゃってくだせぇ:)

SPONSORED LINK

この記事がお役にたちましたらシェアをお願いします:)