ツイッターウィジェットのデザイン変更サンプル : スタイル直接記入 - ブルー

ソース：外部ファイルを使用しない場合

<script type="text/javascript">if(typeof jQuery=='undefined'){document.write(unescape('%3Cscript src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"%3E%3C/script%3E'));}</script>

<div class="twWTL wtlx-">
<a class="twitter-timeline" href="https://twitter.com/search?q=%E3%81%82%E3%82%8A%E3%81%8C%E3%81%A8%E3%81%86" data-widget-id="309009425719492609">ありがとう に関するツイート</a>
<script type="text/javascript">!function(d,s,id){var 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>

<!--
.twitter-timeline{background: #e8f5ff !important;}
.expand{display: inline-block !important; padding: 1px 3px !important;}
.expand:hover,.expand:hover *{text-decoration: none !important;}
.footer{font-size: 90%; min-height: 20px !important;}
.tweet-actions{box-shadow: none !important;}
.tweet-actions a i{margin: 1px 5px 0 5px !important;}
.is-touch .tweet-actions a {padding-left: 0 !important;}
.tweet-actions,.expand{background: #fff !important; border: 1px solid #bcd !important; border-radius: 3px;}
.stats-wide %3E b{display: none;}
a:link, a:visited,.stats span,.byline,.retweet-credit,.no-more-pane,.no-tweets-pane p,.p-geo,.cards-base .byline-user{color: #89A !important;}
a:hover, a:active,.p-author a.profile:hover,.p-author a.profile:focus,.retweet-credit .profile:hover,.retweet-credit .profile:focus,.stats strong,.no-tweets-pane .load-tweets,.nsfw{color: #567 !important;}
.customisable,.customisable:link,.customisable:visited,.customisable:hover,.customisable:active,.customisable-highlight:hover, a:hover .customisable-highlight, a:focus .customisable-highlight{color: #08b !important;}
.timeline,.p-author .profile .p-name,.cards-base p,.cards-base p a,.timeline-header .summary,.timeline-header .summary a:link,.timeline-header .summary a:visited,.p-author a.profile:hover .p-name,.p-author a.profile:focus .p-name{color: #111 !important;}
.customisable-border{border-color: #cde !important;}
.inline-media img{height: auto;}
body *{font-family: 'メイリオ',Meiryo,Arial,sans-serif !important;}
.tweet:nth-child(odd){background: #f3faff;}
a:hover .ic-mask, a:focus .ic-mask{background-color: #567 !important;}@media screen and (-webkit-min-device-pixel-ratio:0) {.tweet-actions a:hover .ic-mask, a:focus .ic-mask{background-color: transparent !important;}}
.timeline-header {background: #d0e6f6 !important; border-radius: 4px 4px 0 0;}
body *{font-size: 13px !important;}
body .permalink,.expand,.var-narrow .timeline-header .byline{font-size: 90% !important;}
body .tweet-box-button,.var-narrow .header .profile .p-name,.var-narrow .e-entry-title,.var-narrow .cards-base h3{font-size: 96% !important; }body .permalink *,body .expand *,.stats strong *,.var-narrow .header .profile .p-name *,.var-narrow .e-entry-title *,.var-narrow .cards-base h3 *{ font-size: 100% !important;}
.var-narrow .permalink,.var-narrow .expanded .stats-narrow{font-size:11px !important;}
.stats span{font-size:10px !important;}.stats strong,.timeline-header- .byline,.timeline-header .list-description{font-size: 12px !important;}
html,body{scrollbar-track-color: #d0e6f6; scrollbar-face-color: #7bd; scrollbar-3dlight-color: #d0e6f6; scrollbar-highlight-color: #d0e6f6; scrollbar-shadow-color: #d0e6f6; scrollbar-darkshadow-color: #d0e6f6; scrollbar-arrow-color: #fff;}
/*IE8
.timeline-footer{background: #cde !important;}button.load-more{background: #d0e6f6 !important; border-bottom: 2px #e8f5ff solid !important;}
*/
--></div>
<script type="text/javascript">
var twWL={len:[],stop:function(){twWL.len=[];},main:function(){var i,s,cs,qS,qL=twWL.len;for(i=0;i<qL.length;i++){var qI=qL[i],qC=$(qI).find('iframe:first').contents();if(qC.length){var qH=qC.find('head:first'),qM=qI.className.match(/wtl(.)-/),qD;if(qC.find('.stream:first').length){qS=$('#wtlcss')[0];cs=qS?qS.lastChild.nodeValue:'';qD=qI.lastChild;if(qD.nodeType==8)cs+=qD.nodeValue;cs=cs.replace(/%3[CE]/g,function(a){return unescape(a);});if(!jQuery.support.opacity)cs=cs.replace(/\/\*IE8([\s\S]*?)\*\//g,'$1');s=document.createElement('style');s.type='text/css';if(window.addEventListener){$(s).html(cs);}else{s.styleSheet.cssText=cs;}
qH[0].appendChild(s);if(qM){if(qM[1]=='x'){qC.find('.thm-dark:first').removeClass('thm-dark')}else{qC.find('.timeline:first').addClass('thm-dark');}}
qD=qI.title;if(qD){var h1=qC.find('h1.summary:first'),qA=h1.find('a');cs=qA.length?qA:h1;cs.text(qD);qI.removeAttribute('title');}
qL.splice(i,1);}}}
if(qL.length)setTimeout(twWL.main,100);}};
$(document).ready(function(){twWL.len=$('div.twWTL');twWL.main();$(window).load(function(){setTimeout(twWL.stop,4000);});});
</script>

ソース：外部ファイルを使用する場合

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script type="text/javascript" src="http://blog-imgs-48.fc2.com/p/a/r/paro2day/twitterWTL.js"></script>
</head>

<div class="twWTL wtlx-">
<a class="twitter-timeline" href="https://twitter.com/search?q=%E3%81%82%E3%82%8A%E3%81%8C%E3%81%A8%E3%81%86" data-widget-id="309009425719492609">ありがとう に関するツイート</a>
<!--
.twitter-timeline{background: #e8f5ff !important;}
.expand{display: inline-block !important; padding: 1px 3px !important;}
.expand:hover,.expand:hover *{text-decoration: none !important;}
.footer{font-size: 90%; min-height: 20px !important;}
.tweet-actions{box-shadow: none !important;}
.tweet-actions a i{margin: 1px 5px 0 5px !important;}
.is-touch .tweet-actions a {padding-left: 0 !important;}
.tweet-actions,.expand{background: #fff !important; border: 1px solid #bcd !important; border-radius: 3px;}
.stats-wide %3E b{display: none;}
a:link, a:visited,.stats span,.byline,.retweet-credit,.no-more-pane,.no-tweets-pane p,.p-geo,.cards-base .byline-user{color: #89A !important;}
a:hover, a:active,.p-author a.profile:hover,.p-author a.profile:focus,.retweet-credit .profile:hover,.retweet-credit .profile:focus,.stats strong,.no-tweets-pane .load-tweets,.nsfw{color: #567 !important;}
.customisable,.customisable:link,.customisable:visited,.customisable:hover,.customisable:active,.customisable-highlight:hover, a:hover .customisable-highlight, a:focus .customisable-highlight{color: #08b !important;}
.timeline,.p-author .profile .p-name,.cards-base p,.cards-base p a,.timeline-header .summary,.timeline-header .summary a:link,.timeline-header .summary a:visited,.p-author a.profile:hover .p-name,.p-author a.profile:focus .p-name{color: #111 !important;}
.customisable-border{border-color: #cde !important;}
.inline-media img{height: auto;}
body *{font-family: 'メイリオ',Meiryo,Arial,sans-serif !important;}
.tweet:nth-child(odd){background: #f3faff;}
a:hover .ic-mask, a:focus .ic-mask{background-color: #567 !important;}@media screen and (-webkit-min-device-pixel-ratio:0) {.tweet-actions a:hover .ic-mask, a:focus .ic-mask{background-color: transparent !important;}}
.timeline-header {background: #d0e6f6 !important; border-radius: 4px 4px 0 0;}
body *{font-size: 13px !important;}
body .permalink,.expand,.var-narrow .timeline-header .byline{font-size: 90% !important;}
body .tweet-box-button,.var-narrow .header .profile .p-name,.var-narrow .e-entry-title,.var-narrow .cards-base h3{font-size: 96% !important; }body .permalink *,body .expand *,.stats strong *,.var-narrow .header .profile .p-name *,.var-narrow .e-entry-title *,.var-narrow .cards-base h3 *{ font-size: 100% !important;}
.var-narrow .permalink,.var-narrow .expanded .stats-narrow{font-size:11px !important;}
.stats span{font-size:10px !important;}.stats strong,.timeline-header- .byline,.timeline-header .list-description{font-size: 12px !important;}
html,body{scrollbar-track-color: #d0e6f6; scrollbar-face-color: #7bd; scrollbar-3dlight-color: #d0e6f6; scrollbar-highlight-color: #d0e6f6; scrollbar-shadow-color: #d0e6f6; scrollbar-darkshadow-color: #d0e6f6; scrollbar-arrow-color: #fff;}
/*IE8
.timeline-footer{background: #cde !important;}button.load-more{background: #d0e6f6 !important; border-bottom: 2px #e8f5ff solid !important;}
*/
--></div>