Twitterの埋め込みタイムラインは表示されたけれど、あれ、もうちょっとカスタマイズしたい！と思いませんか？
以前にTwitterの埋め込みタイムラインの記事を書いたのですが、それの続きです。
Twitterのタイムラインウィジェットがいつの間にか変わっていたので、ブログ設定する方法について紹介したい
ぼくはこのタイムラインにおいて、もうちょっとカスタマイズしたいと思いました。
「＠✕✕ さんのツイート」（「Tweets by」）という箇所はいらないです。
この部分を消したいと思いましたが、色々と検索しても出ませんでした。
なので、ここにメモ代わりに記載します。
規定のタイムラインウィジェット
前回の記事で記載したタイムラインウィジェットは以下でした。
Tweets by masabochi
「<a class=”twitter-timeline” href=”https://twitter.com/masabochi” data-lang=”ja” data-width=”600″ data-height=”800″>Tweets by masabochi</a><script src=”//platform.twitter.com/widgets.js” async=”” charset=”utf-8″></script>」
ここで、「Tweets by masabochi」を消したとしても、文面は残ります。
「<a class=”twitter-timeline” href=”https://twitter.com/masabochi” data-lang=”ja” data-width=”600″ data-height=”800″></a><script src=”//platform.twitter.com/widgets.js” async=”” charset=”utf-8″></script>」
「✕✕さんのツイート」の消し方
じゃあ、どうすれば消えるかというと、
「data-chrome=”noheader”」
を記載することで消すことができます。
以下のようになります。
「<a class=”twitter-timeline” href=”https://twitter.com/masabochi” data-lang=”ja” data-chrome=”noheader” data-width=”600″ data-height=”800″></a><script src=”//platform.twitter.com/widgets.js” async=”” charset=”utf-8″></script>」
他のTwitterの埋め込みタイムラインにおけるカスタマイズ
フッター情報を消す
data-chormeの中に複数条件入れることができます。その場合は、半角空白を入れます。
「data-chrome=”noheader nofooter”」と記載することで、フッター情報も消すことが可能です。
「<a class=”twitter-timeline” href=”https://twitter.com/masabochi” data-lang=”ja” data-chrome=”noheader nofooter” data-width=”600″ data-height=”800″></a><script src=”//platform.twitter.com/widgets.js” async=”” charset=”utf-8″></script>」
線を消す
「data-chrome=”noborders”」で線を消せます。
<a class=”twitter-timeline” href=”https://twitter.com/masabochi” data-lang=”ja” data-chrome=”noheader nofooter noborders” data-width=”600″ data-height=”800″></a><script src=”//platform.twitter.com/widgets.js” async=”” charset=”utf-8″></script>
線の色を変更する
「data-border-color」を使うことで線の色を変更できます。
<a class=”twitter-timeline” href=”https://twitter.com/masabochi” data-lang=”ja” data-chrome=”noheader” data-width=”600″ data-height=”800″ data-border-color=”#a80000″></a><script src=”//platform.twitter.com/widgets.js” async=”” charset=”utf-8″></script>
より細かなTwitterタイムラインウィジェットについて
Twitterの公式に埋め込みタイムラインに記載されていますので、他にも記載されていると思います。
仕様は変更されるので、公式が一番参考になります。
（なんか、日本語版が消えているっぽいので、暫定で英語のドキュメントをリンクしておきます。）