上に「○○さんのツイート」、下に「埋め込む」「Twitterで表示」というリンクテキストが表示され、外枠が消えました。
何だか表示が変に見えるので、しばらくしたら公式の方で修正してくれるかと思って待っていたのですが、どうやら枠線がないのは不具合ではなく仕様のようで、変化が見られませんでした。
このままではサイトのデザインに合わないので、自分で外観をカスタマイズしてみました。
外枠をつけることはできませんでしたが、ヘッダー(「○○さんのツイート」)とフッター(「埋め込む」「Twitterで表示」)を消す方法は分かりました。
下の赤字の文字列を書き加えるだけです!
<a class="twitter-timeline" data-chrome="noheader nofooter" href="https://twitter.com/Rei_Yumesaki" data-widget-id="602483688928980993">@Rei_Yumesakiさんのツイート</a> <script type="text/javascript">
//<![CDATA[
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
//]]>
</script>
//<![CDATA[
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
//]]>
</script>
参考:【以外と知らない?!】 Twitterウィジェットをカスタマイズ! : Mac・iOSの小技
残念ながら枠を付け足す方法は分かりませんでした。
元々うっすらある上下の線の色を変えることはできるのですが(「data-border-color="カラーコード"」を付け足す)、左右の線は元々「ない」ようで、僕にはどうしようもありませんでした。
とりあえず、すぐ上にフォローボタンを置くことで「フタ」をしました(笑)
検索してもこのデザインに文句を言っている人を見かけないのですが、皆様お困りでないのでしょうか。ウィジェットに枠がないと、白背景のサイトには置きづらいと僕は思いました。(ちなみに黒バージョンにすれば当然枠はありますが、今度は存在感がありすぎます^^;)
上にTwitterボタンを置き、7pxくらい下に余白を設けるといい感じになりました!
余白が全くないと、それはそれで不自然な見た目になるようです。
<div style="text-align:center; margin: 0 0 7px 0">
ここにTwitterボタンのコードを貼りつけ
</div>
下にウィジェットのコードを貼りつけ
ここにTwitterボタンのコードを貼りつけ
</div>
下にウィジェットのコードを貼りつけ
スポンサーリンク