読者です 読者をやめる 読者になる 読者になる

社会人から始めたプログラミング

プログラミング、エンジニアに関することでの備忘録、シェアしたい情報などを共有するためのブログです。

Twitter埋め込みガジェットの中にあるリンクの色を変更する。

Twitterの埋め込みコードは現在のところ、
ある程度Twitterウィジェットの設定の画面で設定できます。

しかし、サイトのイメージと合わせるために、link系の色だけ変えたい時などに、
「ユーザー名(@name)」や「Embed」、「View on Twitter」などは
簡単には色を変更できなかったので方法を調べました。



やったこと。
ポイントは2つ。


ポイント1)style.cssを作成しないでそのままもたせたこと。
 *参照1からJSの書き方がわかったので使わせていただきました。

 railsと一緒に動かしてたのだけど、urlのリクエストをJSから送っていたようだったので、
 別ファイルのcssを読み込まず、直接JSにstyleを記載。



ポイント2)!importが重要
 **参照2からimport!するようにと書いてあったので、その通りにやったら反映されました!

 Twitterのaタグのlinkのデフォルトカラーをセットし、hoverした時の色も指定した
 ソース:

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(
        '<style type="text/css"> a { color: #41b7d8 !important; } a:hover { color: #9eeefc !important; } </style>'
      );
    }
    else {
      setTimeout(function(){
        changeTwitterWidgetDesign();
      }, 350);
    }
  }

changeTwitterWidgetDesign();


参照:
 2つのブログを参考にさせていただきました。
 *参照1:CSSとJS/jQueryTwitter埋め込みタイムラインのデザインをカスタマイズする
     → http://ithat.me/2016/02/09/js-jquery-twitter-widget-timeline-customize
 **参照2:dakkie blog / Twitter ウィジェットをカスタマイズする。
     → http://dakkie.com/blog/css/twitter-widget-customize/