まさぼっち.net

ただの日記。SI→MBA→起業準備中+主夫

WEBサービス

Twitterの埋め込みタイムラインで「〜さんのツイート」を消す方法

Twitterの埋め込みタイムラインは表示されたけれど、あれ、もうちょっとカスタマイズしたい!と思いませんか?

以前にTwitterの埋め込みタイムラインの記事を書いたのですが、それの続きです。
Twitterのタイムラインウィジェットがいつの間にか変わっていたので、ブログ設定する方法について紹介したい

ぼくはこのタイムラインにおいて、もうちょっとカスタマイズしたいと思いました。
「@✕✕ さんのツイート」という箇所はいらないです。

この部分を消したいと思いましたが、色々と検索しても出ませんでした。
なので、ここにメモ代わりに記載します。

規定のタイムラインウィジェット

前回の記事で記載したタイムラインウィジェットは以下でした。

<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/ja/web/embedded-timelines

-WEBサービス