自分のTwitterアカウントを宣伝するために、ブログやウェブサイトに「Twitterのタイムライン（ウィジェット）を埋め込みたい」という人は多いと思います。

私もその一人で、さきほどブログの記事下にタイムラインを埋め込みました。

 

Twitterタイムラインをブログに埋め込む方法とカスタマイズ方法についてまとめたのでご参考に。

Twitterタイムラインの埋め込み手順

まず初めに、こちらのページにアクセスしてください。

・https://publish.twitter.com/#

 

ちなみにこのページ、自分のツイッターアカウントにログインしたあと、「設定とプライバシー」⇒「ウィジェット」⇒「新規作成」からもアクセスすることができます。

 

アクセスしたら、中央の入力欄に自分のツイッターアカウントのURLを入力してEnterキーを押します。

 

 

すると画面が下の方に移動しますので、「Enbedded Timeline」をクリックしてください。

 

画面下の方に埋め込み用のコードが表示されるので、コードをコピーしてブログの好きなところに貼り付ければ、Twitterのタイムラインが表示されます。

 

 

コピーしたコードをそのまま貼り付けても使えないことはないですが、そのまま貼り付けると縦に長くなってしまったり、横幅が広くなってしまったりするので、ひと手間加えてカスタマイズしてみましょう。

Twitter埋め込みタイムラインのカスタマイズ

カスタマイズする際は、先ほどの埋め込み用コードを一旦「メモ帳」「ワード」などのテキストソフトに貼り付けてからカスタマイズすると編集しやすいです。

幅と高さの調節

まずは埋め込みタイムラインの「横幅」「高さ」を調節してみましょう。

基本的には埋め込み用コードの先頭部分にある「“twitter-timeline”」の後ろに、カスタマイズ用のコードを追加していけば大丈夫です。

 

 

コードを追加する際は、必ず前後に半角スペースを空けるようにしてください。

 

・幅：width=”○○px”

・高さ：height=”○○px”

 

「○○」の部分に、半角で任意の数字を入力します。

このブログはたぶんコピー禁止になっていると思うので、↓こちらのツイッターの内容をコピーしてもらえれば、コピペで編集できるはずです。

 


編集後はこうなるはず。

 

 

半角スペースの部分には、矢印を表示しておきました。

その他のカスタマイズ例

幅、高さ以外にも、埋め込みタイムラインをカスタマイズできます。

たとえば境界線の色とか。

 


URLリンクの色。

テーマの色も変更可能。


あとはヘッダー・フッター・境界線・スクロールバー・背景の有無も調節可能です。


このように色々とカスタマイズできるので、ブログやウェブサイトにTwitterのタイムラインを埋め込む際には参考にしてみてください。