twitterの新ウィジェット（埋め込みタイムライン）をカスタマイズ
twitterの埋め込みウィジェット、前のウィジェットほどカスタマイズはできないんだなーと思って調べてみたら、結構出来るみたいですね。
コード
|
1 2 |
<a class="twitter-timeline" href="https://twitter.com/xxxxxx" data-widget-id="xxxxxxxxxxxxxxxxxx">＠xxxxxx からのツイート</a> <script>!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上の[設定]→[ウィジェット]からコピーしてくると、こんな感じ。この、1行目の
|
1 |
<a class="twitter-timeline" □ href="xxx"> |
□部分にコードを入れることでオプションが設定できます。
|
1 |
width="300" |
例えば、幅を300pxにするときはこんな感じ。
|
1 |
height="500" |
高さを500pxにするには、こんな感じ。
|
1 |
data-chrome="noheader" |
ヘッダーを非表示にするには、こんなふうに。
詳しくはコチラをご参照ください。
例
当ブログのフッターにあるウィジェットで試してみたキャプチャです。
取得コードを貼り付けただけの状態です。
|
1 |
data-chrome="noheader" |
ヘッダーを非表示にした状態。
|
1 |
data-chrome="noheader nofooter" |
半角スペースにプラスしていくと、複数の条件を実装できます。フッターも非表示にしてみました。
|
1 |
data-chrome="noheader nofooter noborders" |
ボーダー（境界線）も非表示に。
|
1 |
data-chrome="noheader nofooter noborders transparent" |
背景色を透明にすることもできます。
私は今のところデフォルトで使っていますが、思ったよりいろいろできるんですねー！
![[PhotoshopJSX] ラジオボタンとコマンドボタンを載せたダイアログ操作](https://ateitexe.com/wp-content/uploads/2019/07/190725eye.png){kind=small}
2件のピンバック
[…] 手動 […]
[…] twitterの新ウィジェット（埋め込みタイムライン）をカスタマイズ *Ateitexe ヘッダー・フッターと装飾部分の削除まで。 […]
コメントは承認制ですので、反映までしばらくお待ち下さい。（稀にスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。）