Twitterの埋め込みタイムラインをカスタマイズ

ひさびさに技術メモ。

サイドバーに表示してるツイッターのウィジェットが3月で使えなくなるらしいので新しいやつに変えてみた。

が、これ、幅が最小でも220pxまでしか設定できない。(しかもウィジェット設定画面からはそもそも幅が設定できない。不親切…)
さらに、背景色のカスタマイズが明/暗の2種類しかない。

仕事でちょっとカスタマイズする必要があったのでいろいろ調査。
iframeのせいでCSSいじるのが難しい。。。

最小幅に関しては、iframeの幅を無理やりちぢめてやればOK。

iframe.twitter-timeline {
    width: 160px;
    min-width: 160px !important;
}

!importantがポイント。これに気付くまでが長かった…

中身の色なんかのカスタマイズは、JS使ってiframeが読み込まれた後のタイミングでCSS変更してやればいいっぽい。
参考にしたのはこのへん
Twitterのウィジェット(埋め込みタイムライン)のスタイルをカスタマイズする #jQuery #JavaScript #twitter – Qiita
javascript – iframe CSS Override for New Twitter Widget – Stack Overflow

この方法ならヘッダとフッタを消してツイート部分だけ表示させるとかも可能。
1秒くらい遅延するのはご愛嬌ってことで。

 ***

ところで今回API変更に伴って、TwitterのRSSもたぶん使えなくなるんだよね…
フォローしてることバレずにこっそりヲチるのが難しくなるな…
非公開リスト使えばいいのか。でもあれRTとか表示されなくて不便なんだよな。
そろそろ観念してまともにTwitterはじめるべきか…

2 thoughts on “Twitterの埋め込みタイムラインをカスタマイズ

  1. B 投稿作成者

    どもです!
    親馬鹿全開なアカウントですが、ヘンテコ発言を楽しんでいただければ^^

コメントは停止中です。