タイムラインは常に最新のツイートから表示されるので、Twitterをよく更新しているサイトであればお知らせ代わりとしても使えますね。
タイムラインのコードを取得
まずはこちらのTwitter公式ページに行きます。
そしたら次のような画面が表示されるので、ここにTwitterのURLを入力してEnterキーを押します。
TwitterのURLはプロフィール画面のURLですね。
Enterキーを押すと自動で下にスクロールして次の表示が出てくるので、左のタイムラインの方をクリックします。
するとまた少し下にスクロールして次の表示が出てくるので、右のCopy Codeをクリックします（コードの色が薄いですが気にしなくてOKです）
ちなみに枠内をクリックしてもコピーできます。
そしたらそのコードをHTMLの表示させたい場所に貼り付ければ完了です。
ただしこのままだとデカいし長いのでそのまま使うのは現実的ではありません。
そこでカスタマイズをしていきます。
カスタマイズ
先ほどのCopy Codeをクリックする前に、その上にあるカスタマイズをクリックします。
するとこのような画面が表示されます。
全部で4か所設定することが出来ます。
| Height(px) | 高さの設定 |
| Width(px) | 幅の設定 |
| Light（初期値） | 背景色の設定（LightかDarkの2択） |
| Automatic（初期値） | 言語の設定（Automaticは見ている人の環境に合わせる） |
背景色は一般的には初期値であるLightかなと思います。
言語の設定もAutomaticで大丈夫なので、後は幅と高さを設定したら右下のUpdateをクリックしてから再度コードをコピーしてHTMLに貼り付ければOKです。
さらにカスタマイズ
先ほど書いたカスタマイズ画面以外にも、直接コードを書いてカスタマイズ出来る項目があります。
| data-border-color=”カラーコード” | 境界線の色 |
| data-chrome=”noborders” | 境界線を消す |
| data-chrome=”noheader” | ヘッダーを非表示にする |
| data-chrome=”nofooter” | フッターを非表示にする |
| data-chrome=”noscrollbar” | スクロールバーを非表示にする |
| data-chrome=”transparent” | 背景を透明にする |
| data-tweet-limit=”1～20の数字” | 表示させたいツイートの数 |
補足①
data-chrome系は、半角スペースを入れれば複数同時に設定することも可能です。
例）data-chrome="noheader nofooter"
補足②
data-tweet-limitは設定すると高さの設定が無視され、スクロールがなくなって全部表示されます。なので1か2ぐらいがおススメです（20にしたら大変な長さになります）
実際これらのコードをどこに入れるかというと、最初の公式ページでカスタマイズしたコードが次だとします。
<a
class="twitter-timeline"
data-width="300"
data-height="300"
data-theme="light"
href="https://twitter.com/junpei_sugiyama?ref_src=twsrc%5Etfw"
>Tweets by junpei_sugiyama
</a>
<script
async
src="https://platform.twitter.com/widgets.js"
charset="utf-8"
></script><a
class="twitter-timeline"
data-width="300"
data-height="300"
data-chrome="noheader nofooter"
data-border-color="#ff6347"
data-theme="light"
href="https://twitter.com/junpei_sugiyama?ref_src=twsrc%5Etfw"
>Tweets by junpei_sugiyama</a
>
<script
async
src="https://platform.twitter.com/widgets.js"
charset="utf-8"
></script>以上です。