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

style直接記入 : メイリオ | ブルー | 複数設置 | 複数デザイン別
CSSファイル : メイリオ | ブルー | 複数設置 | 複数デザイン別

ありがとう に関するツイート

@news_parody のお気に入りに登録されたツイート

@news_parody/ からのツイート

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

<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 id="wtlcss"><!--
.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;}
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>

<div class="twWTL wtlx-" title="Thanks!">
<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>
</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>

<div class="twWTL wtlx-" title="お気に入り">
<a class="twitter-timeline" width="190" href="https://twitter.com/news_parody/favorites" data-widget-id="309177517334462464">@news_parody のお気に入りに登録されたツイート</a>
<!--
.timeline-footer {display:none !important;} .timeline-header {background: none !important;}
--></div>

<div class="twWTL wtlx-">
<a class="twitter-timeline" width="190" href="https://twitter.com/news_parody/%E3%82%86%E3%82%8B%E3%82%AD%E3%83%A3%E3%83%A9" data-widget-id="308993391260213248">@news_parody/ からのツイート</a>
<!--
.twitter-timeline{background: #368 !important;}
.tweet-actions,.expand{background: #333 !important; border: 1px solid #479 !important; border-radius: 3px;}
a:link, a:visited,.stats span,.byline,.retweet-credit,.no-more-pane,.no-tweets-pane p,.p-geo,.cards-base .byline-user{color: #ddd !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: #fff !important;}
.customisable,.customisable:link,.customisable:visited,.customisable:hover,.customisable:active,.customisable-highlight:hover, a:hover .customisable-highlight, a:focus .customisable-highlight{color: #ff0 !important;}
.timeline,.p-author .profile .p-name,.cards-base p,.cards-base p a,.p-author a.profile:hover .p-name,.p-author a.profile:focus .p-name{color: #fff !important;}
h1.summary{visibility:hidden;}.timeline-header .byline,.timeline-header .list-description{display:none;}
.tweet:nth-child(odd){background: #479;}
a:hover .ic-mask, a:focus .ic-mask{background-color: #fff !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: #157 !important; border-radius: 4px 4px 0 0; color: #fff !important;}
body .timeline-header *{color: #fff !important;}
html,body{scrollbar-track-color: #479; scrollbar-face-color: #157; scrollbar-3dlight-color: #479; scrollbar-highlight-color: #479; scrollbar-shadow-color: #479; scrollbar-darkshadow-color: #479; scrollbar-arrow-color: #fff;}
/*IE8
.tweet{border-bottom: 1px #194a6c solid !important;}.tweet,.timeline,.timeline-header,.expanded .footer{border-color: #194a6c !important;}.timeline-footer{background: #194a6c !important;}button.load-more{background: #479 !important; border-bottom: 2px #368 solid !important;}
*/
--></div>

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

<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 id="wtlcss"><!--
.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;}

.inline-media img{height: auto;}
body *{font-family: 'メイリオ',Meiryo,Arial,sans-serif !important;}
.tweet:nth-child(odd){background: #f3faff;}
.timeline-header {background: #d0e6f6 !important; border-radius: 4px 4px 0 0;}

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
.tweet{border-bottom: 1px #cde solid !important;}.tweet,.timeline,.timeline-header,.expanded .footer{border-color: #cde !important;}.timeline-footer{background: #cde !important;}button.load-more{background: #d0e6f6 !important; border-bottom: 2px #e8f5ff solid !important;}
*/
--></div>

<div class="twWTL wtlx-" title="Thanks!">
<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>
</div>

<div class="twWTL wtlx-" title="お気に入り">
<a class="twitter-timeline" width="190" href="https://twitter.com/news_parody/favorites" data-widget-id="309177517334462464">@news_parody のお気に入りに登録されたツイート</a>
<!--
.timeline-footer{display:none !important;}
.timeline-header{background: none !important;}
--></div>

<div class="twWTL wtlx-">
<a class="twitter-timeline" width="190" href="https://twitter.com/news_parody/%E3%82%86%E3%82%8B%E3%82%AD%E3%83%A3%E3%83%A9" data-widget-id="308993391260213248">@news_parody/ からのツイート</a>
<!--
.twitter-timeline{background: #368 !important;}
.tweet-actions,.expand{background: #333 !important; border: 1px solid #479 !important; border-radius: 3px;}

a:link, a:visited,.stats span,.byline,.retweet-credit,.no-more-pane,.no-tweets-pane p,.p-geo,.cards-base .byline-user{color: #ddd !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: #fff !important;}
.customisable,.customisable:link,.customisable:visited,.customisable:hover,.customisable:active,.customisable-highlight:hover, a:hover .customisable-highlight, a:focus .customisable-highlight{color: #ff0 !important;}
.timeline,.p-author .profile .p-name,.cards-base p,.cards-base p a,.p-author a.profile:hover .p-name,.p-author a.profile:focus .p-name{color: #fff !important;}

h1.summary{visibility:hidden;}.timeline-header .byline,.timeline-header .list-description{display:none;}
.tweet:nth-child(odd){background: #479;}
a:hover .ic-mask, a:focus .ic-mask{background-color: #fff !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: #157 !important; border-radius: 4px 4px 0 0; color: #fff !important;}
body .timeline-header *{color: #fff !important;}

html,body{scrollbar-track-color: #479; scrollbar-face-color: #157; scrollbar-3dlight-color: #479; scrollbar-highlight-color: #479; scrollbar-shadow-color: #479; scrollbar-darkshadow-color: #479; scrollbar-arrow-color: #fff;}
/*IE8
.tweet{border-bottom: 1px #194a6c solid !important;}.tweet,.timeline,.timeline-header,.expanded .footer{border-color: #194a6c !important;}.timeline-footer{background: #194a6c !important;}button.load-more{background: #479 !important; border-bottom: 2px #368 solid !important;}
*/
--></div>