「モチの気持ち」より © studio doli
iframe内に読み込まれるファイル内のCSS操作は、そのままではできません。
でも、jQueryを使えば簡単にできます。
例えば、iframe内のP要素の文字色を赤（red）にするならば以下のようにします。
※ただし、後述しますが条件によってはNGです。
//基本
$('iframe').contents().find('p').css('color', 'red');
.contents().find('セレクタ')を使います。
ChromeだけjQueryによるCSS操作が効かない
しかし、毎度のことながらコトはそう簡単には運ばないもので、テストしてみても何も変化はありません。
原因については、以下が参考になりました。
iframe内のcssを編集するJavaScript | aNote
私はChromeで動作チェックしているのですが、上の参考記事によると、Twitterツイートボタン（公式ウィジェットも？）が設置されたページでは、iframe内のCSSに干渉することをChromeがブロックしているらしい。真偽はともかく、試しにIEやFirefoxで確認したら、あらホント、ちゃんと文字が赤色になっていました。
Chromeを無視するわけにもいかない。Twitterウィジェットをはずせばいいのかもしれないけど、今回CSS操作したいのはまさにそのTwitterウィジェット。はずすわけにはいかないッス。
しばらく悩んだんですが、ステキな解決方法を見つけました。
iframe内のhead要素にCSS外部リンクを追加する
CSSを直接操作するのではなく、CSSファイルを外部リンクさせます。
$(window).load(function(){
$('iframe').contents().find('head').append('<link href="http://<mydomain>/<path-to>/style.css" rel="stylesheet" type="text/css" media="all" />');
}
無事、CSSを変更させることに成功しました。