LoginSignup
17

More than 5 years have passed since last update.

Twitterのウィジェット(埋め込みタイムライン)のスタイルをカスタマイズする

Posted at

Twitterのウィジェットを高さ以外もカスタマイズできるスクリプト - Qiita

こちらの改良版です。
Twitterの埋め込みタイムラインウィジェットはあまりカスタマイズできないのでjsで外からスタイル変更する方法です。

ただ、ウィジェットのidやクラスが変わると使えなくなったりします。
また、スタイルを変更するのはtwitterのブランドデザイン?的にあまりよろしくないことなのかもしれないので参考程度に。。。

/** 新しいTwitterウィジェットのスタイルを設定* */
function decorateWidget(id) {
  var $twwgt = $(id);
  var decorate = function($el) {
    $el.find(".timeline-header").css(/*スタイルを変更*/);
    $el.find(".timeline-footer").css(/*スタイルを変更*/);
    return $el;
  };

  //ウィジェットが読み込まれるまで再帰
  if ($twwgt.length > 0 && $twwgt[0].contentWindow.document.body.innerHTML !== "") {
    decorate($($twwgt[0].contentWindow.document));
  } else {
    setTimeout(function() {
      decorateWidget(id);
    }, 500);
  }
}
decorateWidget("#twitter-widget-0");

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
17