Twitterの埋め込みタイムラインで「〜さんのツイート」(Tweets by)を消す方法
2017/09/28
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の公式に埋め込みタイムラインに記載されていますので、他にも記載されていると思います。
仕様は変更されるので、公式が一番参考になります。
(なんか、日本語版が消えているっぽいので、暫定で英語のドキュメントをリンクしておきます。)
https://dev.twitter.com/web/embedded-timelines