Twitter以前のTwitterウィジェットは色とか色々とカスタマイズできたのですが、新しくなってほぼそのまま使うしかなくなってしまいました。そこでjQueryを使用してカスタマイズしてみようと思います。今後、Twitterの仕様変更によって使えなくなる可能性もありますがご了承ください。追記)jQueryを使用しないでもカスタマイズできるようになりました。タイムラインを表示するウィジェットの設置タイムラインを表示したいときはこんな感じに設置しますね。js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>横幅(width)のカスタマイズ横幅はwidthオプションで設定しますがこれだと最大で「520px」までしか広くなりません。サイズの変更だけならcssで変更できます。800px;}ウィジェットのJSが実行されるとiframeに置き換わるので、その部分にcssを割り当てるだけですね。Twitterウィジェットのiframe内にアクセスするwidthはiframe自体のサイズの変更だったので、呼び出し元のcssで変更できましたが、iframe内部の要素の変更は外側からでは変更できません。そこでjQueryを使用してiframe内にアクセスできるようにしてみます。500);}}changeWidget();});</script>ChromeやFirefoxなら「$(window).load」だけでiframe読み込み後に実行してくれますが、ieだと動的に追加したiframeはだめなようです。0)」という分岐をいれてiframeがなかったら再度実行ということをすればいいみたいです。iframeは「$(‘iframe.twitter-timeline’).contents()」でアクセスできます。タイトルを変更するタイムラインのタイトルは標準で「ツイート」になってますので変更してみます。500);}}changeWidget();});iframe内で外部cssを読み込むjQueryのcssAPIでカスタマイズしてもいいですが、cssで編集できた方がスマートですね。iframeから外部cssを読み込むというのをやってみます。下記cssファイルをサーバーにアップしておきます。none;}あとはhead要素などにappendでアップロードしたcssファイルを指定します。/>');このcssはウィジェットの下のリプライ欄を非表示にしてます。以上、くどいようですがTwitterの仕様が変更された場合使えなくなる可能性があります。対応版]」を参考にしていただければ。追記)jQueryを使用しないでもカスタマイズできるようになりました。属性を指定することでカスタマイズできるようになりました。カスタマイズできる項目はあまり多くないようです。インターフェイスのカスタマイズは「data-chrome」を設定します。nofooter">その他「data-chrome」でカスタマイズできる設定は下記になります。noheaderタイムラインのヘッダーをなくします。nofooterタイムラインのフッターやツイートボックスをなくします。nobordersウィジェットの周りやツイートの間のボーダー(境界線)をなくします。transparentタイムラインの背景を透明にします。ヘッダー&フッターを非表示するとこんな感じに表示できます。「data-chrome」以外は「data-border-color」で境界線の色の変更が可能です。詳しくは公式サイトを確認してください。ありがとうございます。疑問なのですが、JavaScriptでは別ドメインのDOMの取得・変更はできないような制約があったと思います。この場合なぜ出来たのでしょうか?動的に追加したiframeは同一ドメイン扱いになるということなんでしょうかねぇ。古い記事だったのですが使えてよかったです。iframeはサイトによって編集が許可されていたり、だめだったりしていたと思います。詳しくはわからないのですが。REPLYNAMEE-MAILURLコードを書く場合は<pre>で囲んでください。WixこのブログではjQueryやWordPressを中心としたWeb制作関係のことを書いております。ご意見ご感想などお気軽にコンタクトフォームよりお問い合わせください。Web関係のお仕事も募集しております。