サイトのトップへ戻る

Twitter 開発者 ドキュメント日本語訳




埋め込み型ツイートのCSS

埋め込み型ツイートは、ツイートの引用文を持つ<blockquote>としてあなたのページ上に表示されます。; このマークアップは、埋め込み型ツイートをフル描写するために、後でTwitterの JavaScript コードによって実行されます。 <blockquote> HTML は、RSSフィードやEメールやを含む全ての描写環境で使用可能です。

埋め込み型ツイートのエレメントをブラウザをサポートしていない場合、通常の <blockquote>, <p>, and <a> といったHTMLエレメントと同じフォールバック機能が働きます。

Sunsets don’t get much better than this one over @GrandTetonNPS. #nature#sunsetpic.twitter.com/YuKy2rcjyU

— US Dept of Interior (@Interior) May 5, 2014

埋め込み型ツイートの <blockquote> コンテンツを、CSSのみを使って公式の見た目に近づけるには、以下のようにスタイルを設定します。

Embedded Tweet fallback markup rendered using custom CSS rules
blockquote.twitter-tweet {
  display: inline-block;
  font-family: "Helvetica Neue", Roboto, "Segoe UI", Calibri, sans-serif;
  font-size: 12px;
  font-weight: bold;
  line-height: 16px;
  border-color: #eee #ddd #bbb;
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  margin: 10px 5px;
  padding: 0 16px 16px 16px;
  max-width: 468px;
}

blockquote.twitter-tweet p {
  font-size: 16px;
  font-weight: normal;
  line-height: 20px;
}

blockquote.twitter-tweet a {
  color: inherit;
  font-weight: normal;
  text-decoration: none;
  outline: 0 none;
}

blockquote.twitter-tweet a:hover,
blockquote.twitter-tweet a:focus {
  text-decoration: underline;
}