Twitterのタイムラインをブログやホームページに埋め込む方法!【デザイン/サイズ】

Twitterのタイムラインをブログやホームページに埋め込む方法!【デザイン/サイズ】

Twitterのタイムラインをブログやホームページなどのサイトに埋め込む方法とサイズやデザインをカスタマイズする方法についてご紹介いたします。ぜひ適切なデザインやサイズ、色に調整してブログやホームページにTwitterのタイムラインの埋め込みを行いましょう!


目次[非表示]

  1. Twitterのタイムラインをブログやホームページなどサイトに埋め込みたい
  2. Twitterのタイムラインをブログやホームページなどサイトに埋め込む方法

Twitterのタイムラインをブログやホームページなどサイトに埋め込みたい

みなさんはTwitterのタイムラインのツイートをブログやホームページなどサイトに埋め込みたいと思ったことはないでしょうか?

タイムラインの埋め込みはTwitterで発信している情報をリアルタイムにブログやホームページで発信できるので、とても便利です!

しかしツイート単体の埋め込みはできるけど、タイムラインの埋込のやり方が分からない・・、埋め込む際にデザインやサイズを調整したいけど、分からない・・という方もいらっしゃいます。

そこで今回の記事ではTwitterのタイムラインを埋め込む方法と、埋め込む際にデザインやサイズを調整する方法についてご紹介していきたいと思います。

Twitterのタイムラインをブログやホームページなどサイトに埋め込む方法

まずは基本となるタイムラインの埋込についてやり方を順番にご紹介していきます。

埋め込みたいタイムラインのユーザーのプロフィールページのURLをコピー

まずは埋め込みたいタイムラインのTwitterのユーザーのプロフィールページのURLをコピーします。

TwitterのユーザーのプロフィールページのURL
例えば@Aprico2016のユーザーの場合は「https://twitter.com/Aprico2016」というようなURLになります。

タイムラインの埋め込み用のタグを取得

次にTwitterの公式の機能を使ってタイムラインの埋め込み用のタグを取得します。

下記サイトにアクセスしましょう。こちらのサイトはTwitter公式の埋め込みタイムラインなどウィジェットを作成できるページです。

Twitter Publish
What would you like to embed?」の箇所に先程コピーした埋め込みたいタイムラインのユーザーのプロフィールページのURLをペースト
上記のサイトにアクセスしたら、「What would you like to embed?」の箇所に先程コピーした埋め込みたいタイムラインのユーザーのプロフィールページのURLをペーストします。
左側の「Embedded Timeline」を選択
次に「Here are your display options」の箇所に自動でスクロールして移動しますので、今回は左側の「Embedded Timeline」を選択します。
タイムライン埋め込み用のタグ
すると自動でタグが生成されます。こちらがタイムライン埋め込み用のタグになります。「Copy Code」のボタンを押してコピーしておきましょう。

またそのタグを埋め込んだ際のプレビューがその下に表示されますので違和感ないか見ておきましょう。
コピーしたタグをブログやホームページの好きな箇所に貼り付けると、タイムラインが表示
後はコピーしたタグをブログやホームページの好きな箇所に貼り付けると、タイムラインが表示されるようになります。

ちなみにタイムラインの埋め込みのウィジェットはレスポンシブのデザインなので、幅に合わせてデザインが調整されます。

タイムラインの埋め込みウィジェットのサイズやデザインをカスタマイズ

さて、これでブログやホームページでタイムラインの埋め込みが出来ましたが、ブログやホームページのデザインにより、Twitterのタイムラインの埋め込みウィジェットのサイズやデザインを変更したいという方もいらっしゃるかと思います。

サイズやデザインのカスタマイズ方法を見ていきましょう。

タイムラインの埋込用のタグを作成したページの「set customization options」をクリック
先程タイムラインの埋込用のタグを作成したページの「set customization options」をクリックします。
タイムラインの埋め込みウィジェットのカスタマイズオプション
するとこのような図の画面が登場します。

ここでタイムラインの埋め込みウィジェットのデザインや色・サイズを変更出来ます。

サイズ

「What size would you like your timeline to be?」の箇所
まず一番上の「What size would you like your timeline to be?」の箇所がサイズになります。

もしもレスポンシブではなく、サイズを指定したい場合はこちらを調整しましょう。

デザイン

「How would you like this to look?」の箇所
次に中段の「How would you like this to look?」の箇所でデザインが調整出来ます。左側の選択項目で「Light」「Dark」から選択出来ます。
(デフォルトは「Light」)

試しにDarkにしてみましょう。
Darkの色のデザイン
リアルタイムで下部のプレビューのデザインが変わります。Darkの色だとこのようなデザインになります。

「Light 」「Dark」お好きな方のデザインを選択しましょう。

リンクの色

リンクの色の変更箇所
また右側はリンクの色を変更出来ます。
  • 黄色
  • オレンジ
などに変更できます。試しに黄色にしてみましょう。
プレビューで、リンクの色が黄色に変化
プレビューで、リンクの色が黄色になりましたね!
右下の「Update」ボタンをクリック
サイズやデザインが固まったら最後に右下の「Update」ボタンをクリックします。

するとタイムラインの埋込用のタグが変わりますので、再度コピーして、ブログやホームページに貼り付けしましょう!

埋め込み

デザインをDarkにして、リンクの色を黄色にした場合のタイムラインの埋め込みウィジェット
デザインをDarkにして、リンクの色を黄色にした場合のタイムラインの埋め込みウィジェットです!

ぜひブログやホームページの色味にあわせてタイムラインの埋め込みウィエットのデザインを調整しましょう!

関連記事