twitterにログインしてウィジェット設定へアクセスすると「新規作成」ボタンがあるのでクリックします。

ユーザー、お気に入り、リスト、検索結果、ハッシュタグのタイムラインがあるのですが、今回は自分のアカウントのタイムラインを載せたいので「ユーザータイムライン」を選択。

いくつか設定できる項目がありますが、高さやリンクの色は後で設定できます。

カスタマイズ

aタグの属性でいろいろなカスタマイズが可能。

ウィジェット設定画面で設定した内容も、コード側で設定できます。
コード側の設定が優先されるので、ちょこちょこ変更する場合はコード側で設定しておくと便利そうです。

サイズ

タイムラインのサイズは初期設定は520px×600pxですが、HTMLのwidth属性とheight属性で幅と高さを自由に調整できます。
幅は180px～520px、高さは最小200px。

幅300px×高さ500pxに設定する場合

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

サイト構成に合うようウィジェットのサイズが自動的に調整されるので、divタグで幅を調整するのもいいかも。

<!-- html -->
<div class="twitter_widget">
<a class="twitter-timeline" href="https://twitter.com/○○○○" data-widget-id="××××">@○○○○ からのツイート</a>
</div>

/* css */
div.twitter_widget {
width:300px;
}

ちなみにヘッダーにある「@○○○○さんをフォロー」というボタンですが、幅249px以下だと「フォローする」というボタンになるみたいです。

テーマ

data-theme属性で設定、値は「dark」または「light」

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

リンクの色

data-link-color属性でカラーコードを指定。

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

ボーダーの色

data-border-color属性でカラーコードを指定。

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

言語

lang属性で指定。日本語にする場合は「lang="ja"」

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

インターフェース

data-chrome属性を使ってウィジェットのレイアウトやインターフェースをカスタマイズできます。
スペース区切りで以下のオプションを指定すればOK。

• noheader: タイムラインのヘッダーを削除
• nofooter: タイムラインのフッターやツイートボックスを削除
• noborders: ウィジェットの周りやツイートの間のボーダーを削除
• transparent: タイムラインの背景を透明にする

ヘッダーとフッターを削除する場合

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

参考サイト

埋め込みタイムライン | Twitter Developers