埋め込み型ツイートは、ツイートの引用文を持つ<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のみを使って公式の見た目に近づけるには、以下のようにスタイルを設定します。
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; }
CSS for Embedded TweetsAn Embedded Tweet appears on your page as a An Embedded Tweet’s fallback markup will inherit the CSS rules already applied to
Below is some basic CSS to style an Embedded Tweet’s 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; } |