CSSとJS/jQueryでTwitter埋め込みタイムラインのデザインをカスタマイズする

毎日インスピレーションを受けるため、ハイクオリティーなWebサイトを探すのが日課になっています。そこで、もったいないなと思うのがTwitterタイムラインウィジェットが白く、浮いてしまっているということです。せっかく、美しいデザインのサイトなのにTwitterウィジェットで台無しになってしまっていました。そこで、今回はTwitterウィジェットを自由にカスタマイズする方法を紹介します。

ウィジェット作成

まず、Twitterのページへ行き、自分のアイコンをクリックします。

設定をクリックします。

左のメニューからウィジェットを選びます。

新規作成をクリックします。

特に設定するところはありませんが、オプションで@ツイートを除外したい場合はチェックをはずしましょう。設定が終わったらウィジェットを作成をクリックします。

生成されたHTMLコードをコピーして貼り付ければウィジェットが表示されます。

カスタマイズ

このパラメーターを使ってある程度ウィジェットをカスタマイズできます。

@IT_takamasaさんのツイート

data-chrome=”noheader nofooter” でヘッダーとフッターを削除し、data-width=”500″ で横幅を500pxに、data-height=”400″ で高さを400pxに設定しています。

デザイン

ここまででかなりカスタマイズできましたが、もっと細かい部分をカスタマイズできていませんよね。例えば、ユーザー名の色を変えたりツイートの背景色を変更したり、などなど。

Javascriptを使えば自由にカスタマイズすることができます。

JS

function changeTwitterWidgetDesign(){
  var $twitter_widget = $('iframe.twitter-timeline');
  var $twitter_widget_contents = $twitter_widget.contents();
  
  if ($twitter_widget.length > 0 && $twitter_widget[0].contentWindow.document.body.innerHTML !== ""){
    $twitter_widget_contents.find('head').append('');
  }
  else {
    setTimeout(function(){
      changeTwitterWidgetDesign();
    }, 350);
  }
}

changeTwitterWidgetDesign();

こんな関数を作ります。Twitterウィジェットである iframe が読み込まれるまで、再帰的にループしています。そして、見つかったら head 内に style.css を読み込ませる処理を書いています。この style.css 内にTwitterウィジェットのデザインを変更するCSSを書いていきます。

style.css

.p-author .profile .p-name {
  color: #18b194;
}

style.css 内にこのように記述すると、ユーザー名の色を変更できます。ほかの要素もデベロッパーツールを使いながら同じようにCSSで色などを変更することができます。

タイトルを変更

function changeTwitterWidgetDesign(){
  var $twitter_widget = $('iframe.twitter-timeline');
  var $twitter_widget_contents = $twitter_widget.contents();
  
  if ($twitter_widget.length > 0 && $twitter_widget[0].contentWindow.document.body.innerHTML !== ""){
    $twitter_widget_contents.find('head').append('');
    $twitter_widget_contents.find('.summary a').html('最新のツイート');
  }
  else {
    setTimeout(function(){
      changeTwitterWidgetDesign();
    }, 350);
  }
}

changeTwitterWidgetDesign();

７行目に注目してください。$twitter_widget_contents で自由に要素にアクセスできるので、ヘッダーのタイトルも変更することができます。