Twitterウィジェットのカスタマイズ(ウィジェット部分のHTML・CSS)
複雑なAPIのプログラムコードを書かなくてもTwitterを扱いやすくするウィジェットが用意されています。
ウィジェットは１アカウントにつき最大で100個作成できます。
ウィジェットの作り方
『設定』から『ウィジェット』
『新規作成』ボタンを押します。
作成するウィジェットの設定をして『ウィジェットを作成』ボタンを押すと、HTMLコードが出力されます。
このHTMLコードをサイトに張り付ければウィジェットが動作します。
生成されるHTMLコード
Twitterの管理画面で生成されるHTMLコードは次のようなコードです。
<a class="twitter-timeline" href="https://twitter.com/pentan_info" data-widget-id="493888843242688512">@pentan_info からのツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
このコードは<iframe>が呼び出されて、その中で<html>が呼び出されています。
カスタマイズ方法
!importantなどを使用してCSSを書くと、Twitterウィジェットのカスタマイズができます。
例えば幅を160pxにするには次のようになります。
<style>
#twitter-widget-0{
width:160px !important;
min-width:160px !important;
}
</style>
呼び出されるインラインフレーム
<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" class="twitter-timeline twitter-timeline-rendered" style="border: none; max-width: 100%; min-width: 180px; width: 520px;" title="Twitter Timeline" height="1000"></iframe>
インラインフレーム内のHTML
<html>
<head>
<style type="text/css">
body{display:none}
</style>
<base target="_blank">
<link type="text/css" rel="stylesheet" href="http://platform.twitter.com/embed/timeline.295a00bf5122128e332d25515711dbbd.default.css">
</head>
<body>
<div class="root timeline 左横書き customisable-border twitter-timeline not-touch twitter-timeline-rendered" dir="左横書き" data-timeline-type="profile" data-profile-id="98265457" data-dt-now="現在" data-dt-s="秒" data-dt-m="分" data-dt-h="時間" data-dt-second="秒" data-dt-seconds="秒" data-dt-minute="分" data-dt-minutes="分" data-dt-hour="時間" data-dt-hours="時間" data-dt-months="1月|2月|3月|4月|5月|6月|7月|8月|9月|10月|11月|12月" data-dt-abbr="%{number}%{symbol}" data-dt-short="%{month}%{day}日" data-dt-long="%{year}年%{month}%{day}日" data-iframe-title="Twitter Timeline" data-scribe="page:timeline" id="twitter-widget-0" lang="ja" data-twitter-event-id="0">
<div class="timeline-header customisable-border" data-scribe="section:header">
<h1 class="summary" data-scribe="element:title">
<a class="customisable-highlight" href="https://twitter.com/pentan_info" title="pentan(ぺんたん)さんからのツイート">ツイート</a>
</h1>
<a class="follow-button profile" href="https://twitter.com/pentan_info" role="button" data-scribe="component:followbutton" title="Twitterでpentan(ぺんたん)さんをフォロー"><i class="ic-button-bird"></i>フォローする</a>
</div>
<div role="alert" class="new-tweets-bar" aria-live="polite" aria-atomic="false" aria-relevant="additions">
<button data-scribe="element:show_new_tweets"><i class="ic-top"></i>新しいツイート</button>
</div>
<div class="stream" data-scribe="section:stream" style="height: 913px;">
<ol class="h-feed">
<!-- タイムラインのループここから -->
<li class=" h-entry tweet customisable-border" data-tweet-id="493741163069730816" data-rendered-tweet-id="493741163069730816" data-scribe="component:tweet">
<div class="header">
<a class="u-url permalink customisable-highlight" href="https://twitter.com/pentan_info/statuses/493741163069730816" data-datetime="2014-07-28T12:54:01+0000" data-scribe="element:mini_timestamp">
<time pubdate="" class="dt-updated" datetime="2014-07-28T12:54:01+0000" title="投稿時刻: 2014年7月28日 12:54:01 (UTC)" aria-label="Posted 9 時 ago">9<abbr title="時間">時間</abbr></time>
</a>
<div class="h-card p-author" data-scribe="component:author">
<a class="u-url profile" href="https://twitter.com/pentan_info" aria-label="pentan(ぺんたん) (ユーザー名: pentan_info)" data-scribe="element:user_link">
<img class="u-photo avatar" alt="" src="https://pbs.twimg.com/profile_images/590709349/pentan_9_normal.jpg" data-src-2x="https://pbs.twimg.com/profile_images/590709349/pentan_9_bigger.jpg" data-scribe="element:avatar">
<span class="full-name">
<span class="p-name customisable-highlight" data-scribe="element:name">pentan(ぺんたん)</span>
</span>
<span class="p-nickname" dir="ltr" data-scribe="element:screen_name">@<b>pentan_info</b></span>
</a>
</div>
</div>
<div class="e-entry-content">
<p class="e-entry-title">データ統計取ってる最中にグノシー来るとノイズになる</p>
</div>
<div class="footer customisable-border" data-scribe="component:footer">
<ul class="tweet-actions" role="menu" aria-label="Tweet actions" data-scribe="component:actions">
<li><a href="https://twitter.com/intent/tweet?in_reply_to=493741163069730816" class="reply-action web-intent" title="返信" data-scribe="element:reply"><i class="ic-reply ic-mask"></i><b>返信</b></a></li>
<li><a href="https://twitter.com/intent/retweet?tweet_id=493741163069730816" class="retweet-action web-intent" title="リツイート" data-scribe="element:retweet"><i class="ic-retweet ic-mask"></i><b>リツイート</b></a></li>
<li><a href="https://twitter.com/intent/favorite?tweet_id=493741163069730816" class="favorite-action web-intent" title="お気に入り" data-scribe="element:favorite"><i class="ic-fav ic-mask"></i><b>お気に入り</b></a></li>
</ul>
</div>
</li>
<!-- タイムラインのループここまで -->
</ol>
<button class="load-more customisable" data-scribe="element:load_more">さらに読み込む</button>
<p class="no-more-pane" role="alert">
これ以上のツイートはありません。
<i class="ic-bird-flourish"></i>
</p>
</div>
<div class="timeline-footer" data-scribe="section:footer">
<a class="tweet-box-button web-intent" href="https://twitter.com/intent/tweet?screen_name=pentan_info" data-scribe="element:timeline_permalink">@pentan_infoさん宛にツイートする</a>
</div>
</div>
</body>
</html>
HTMLで使用されているCSS
html body{
display:block;
background:transparent
}
html,body,h1,h2,h3,blockquote,p,ol,ul,li,iframe,button{
padding:0;
margin:0;
font:normal normal normal 12px/16px "Helvetica Neue",Roboto,"Segoe UI",Calibri,sans-serif;
text-decoration:none;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
text-transform:none;
vertical-align:baseline;
list-style:none;
border:0;
-webkit-outline:0;
-moz-outline:0;
-ms-outline:0;
-o-outline:0;
outline:0
}
img{
border:0
}
b,i{
font-style:normal;
font-weight:normal
}
abbr{
border-bottom:0
}
.p-author:before,.p-author:after,.cards-base:before,.cards-base:after{
display:table;
content:""
}
.p-author:after,.cards-base:after{
clear:both
}
.tweet,.root,.p-author{
zoom:1
}
.root,.tweet,.footer,.detail-expander,.header,.timeline{
position:relative
}
button.load-more,.tweet-box-button,.no-tweets-pane .load-tweets{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box
}
.no-tweets-pane p{
font-size:20px;
line-height:24px
}
.timeline-header .custom-timeline-summary,.timeline-header h1.summary{
font-size:18px;
font-weight:bold;
line-height:18px
}
.custom-timeline-owner-profile,.timeline .e-entry-title,.p-author .p-name,.cards-base h3,
.new-tweets-bar button,.load-tweets,.no-more-pane{
font-size:14px;
line-height:16px
}
.tweet-box-button{
font-size:13px
}
.stats strong,.timeline-header- .byline,.timeline-header .list-description{
font-size:12px;
line-height:18px
}
.timeline-header .byline{
margin:4px 0
}
.stats span{
font-size:10px
}
.brand span{
font-size:12px
}
.timeline-header .custom-timeline-description{
font-size:14px;
color:#707070
}
.custom-timeline-owner-profile .p-nickname{
font-size:13px
}
.custom-timeline-owner-profile .p-name,.p-author .profile .p-name,.cards-base .profile .p-name{
font-weight:bold
}
.p-author a,.e-entry-title,.cards-base h3,.cards-base .cards-content p{
line-height:18px
}
.e-entry-title a{
max-width:100%;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
a,a:visited,a:active,a:hover,a:focus,.p-author .full-name,.p-author a.profile,
.p-author a.profile:hover .p-nickname,.p-author a.profile:focus .p-nickname,
.p-author a.profile:hover .p-nickname b,.p-author a.profile:focus .p-nickname b,
.timeline-header .custom-timeline-owner-profile:hover,.timeline-header .custom-timeline-owner-profile:focus,
.custom-timeline-owner-profile:hover .p-nickname,.custom-timeline-owner-profile:focus .p-nickname,
.custom-timeline-owner-profile:hover .p-nickname b,.custom-timeline-owner-profile:focus .p-nickname b,
.cards-base a.profile:hover .p-nickname,.cards-base a.profile:focus .p-nickname,
.cards-base a.profile:hover .p-nickname b,.cards-base a.profile:focus .p-nickname b,
.cards-base .byline-user .p-nickname{
text-decoration:none;
outline:0
}
a:hover b,a:focus b,a:hover span,a:focus span,h3 a:hover,h3 a:focus,.timeline-header a:hover,
.timeline-header a:focus,.e-entry-title .link:hover,.e-entry-title .link:focus,.footer a.expand:hover,
.footer a.expand:focus,a.permalink:hover,a.permalink:focus,a.long-permalink:hover,a.long-permalink:focus,
.cards-base p a:hover,.cards-base p a:focus,.retweet-credit a:hover,.retweet-credit a:focus{
text-decoration:underline
}
html,.p-author .profile .p-name,.custom-timeline-owner-profile .p-name,.cards-base p,
.cards-base p a,.timeline-header .custom-timeline-summary,.timeline-header .custom-timeline-summary a:link,
.timeline-header .custom-timeline-summary a:visited,.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:#292f33
}
.customisable,.customisable:link,.customisable:visited,.customisable:hover,.customisable:focus,
.customisable:active,.customisable-highlight:hover,.customisable-highlight:focus,a:hover .customisable-highlight,
a:focus .customisable-highlight{
color:#0084b4
}
a:link,a:visited,.stats span,.byline,.retweet-credit,.no-more-pane,.no-tweets-pane p,.p-geo,
.cards-base .byline-user,.timeline-header .list-description{
color:#707070
}
a:hover,a:focus,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:#66757f
}
.tweet-box-button{
color:#aaa
}
.customisable-border{
border:1px solid #e8e8e8
}
.verified b,.tweet-actions b,abbr.p-geo b,.ic-twitter-badge b,.e-entry-title a .tco-hidden,.collapse-geo .p-geo b,
.collapse-media-tag .media-tag b{
position:absolute;
top:0;
left:0;
clip:rect(0,0,0,0);
clip:rect(0 0 0 0)
}
.verified,.ic-rt,.ic-mask,.ic-top,.ic-twitter-alert,.ic-twitter-badge,.ic-bird-flourish,.ic-button-bird{
display:inline-block;
vertical-align:middle;
background:transparent url(../images/sprite.png) no-repeat 0 0;
background-image: url(data:image/png;
base64,XXXXXXXXXXXXXXXXXX);
background-size:177px 191px
}
.verified{
width:15px;
height:17px;
margin-left:-21px;
vertical-align:-25%;
background-position:0 -161px
}
.ic-twitter-badge{
width:18px;
height:15px;
background-position:-20px -161px
}
.ic-top{
display:inline-block;
width:12px;
height:10px;
margin:2px 4px 0 0;
vertical-align:top;
background-position:0 -181px
}
.ic-twitter-alert{
width:16px;
height:12px;
margin:0 3px 3px 0;
background-position:-80px -142px
}
.ic-bird-flourish{
display:block;
width:32px;
height:20px;
margin:12px auto 0;
background-position:-40px -161px
}
.ic-button-bird{
width:16px;
height:16px;
margin:0 3px 0 0;
background-position:-73px -160px
}
.ic-mask{
width:12px;
height:13px;
background-color:#999
}
a:hover .ic-mask,a:focus .ic-mask{
background-color:#0084b4
}
.ic-reply{
width:19px;
height:15px;
background-position:0 -87px
}
.ic-retweet{
width:22px;
height:15px;
background-position:-31px -87px
}
.ic-fav{
width:16px;
height:15px;
background-position:-60px -87px
}
.ic-geo,.ic-pho,.ic-sum,.ic-pla,.ic-con,.ic-people{
display:inline-block;
width:16px;
height:16px
}
.ic-geo{
background-position:-100px -30px
}
.ic-pho{
background-position:-60px -29px
}
.ic-sum{
background-position:-120px -29px
}
.ic-pla{
background-position:-80px -29px
}
.ic-con{
background-position:-140px -29px
}
.ic-people{
width:14px;
background-position:-160px -31px
}
.ic-rt{
width:14px;
height:16px;
margin-right:4px;
background-position:-20px -2px
}
.timeline{
margin-bottom:10px;
background-color:#fff;
border-radius:5px
}
.timeline .stream{
position:relative;
width:100%;
overflow-x:hidden;
overflow-y:scroll
}
.timeline.pending-scroll-in .stream .h-feed{
-webkit-transition:margin-top .5s ease-out;
-moz-transition:margin-top .5s ease-out;
-o-transition:margin-top .5s ease-out;
transition:margin-top .5s ease-out
}
.timeline-header,.timeline-footer{
position:relative;
z-index:100
}
.timeline-header{
padding:12px;
border-width:0 0 1px;
box-shadow:0 0 0 -3px rgba(0,0,0,0);
-webkit-transition:box-shadow .3s ease-out;
-moz-transition:box-shadow .3s ease-out;
-o-transition:box-shadow .3s ease-out;
transition:box-shadow .3s ease-out
}
.scrolled-down .timeline-header{
box-shadow:0 0 10px -3px #ccc
}
.timeline-header h1.summary{
font-weight:bold
}
.timeline-header .follow-button,.timeline-header .twitter-follow-button,.timeline-header .ic-twitter-badge{
position:absolute;
top:10px;
right:10px
}
.ic-twitter-badge{
border:1px solid #fff;
border-color:transparent;
border-radius:3px
}
.ic-twitter-badge:focus{
border-color:#00acee
}
.new-tweets-bar{
position:absolute;
right:0;
left:0;
z-index:100;
display:none;
width:auto;
margin-top:-2px;
opacity:0;
-webkit-transition:opacity .3s ease-in;
-moz-transition:opacity .3s ease-in;
-o-transition:opacity .3s ease-in;
transition:opacity .3s ease-in
}
.pending-new-tweet-display .new-tweets-bar{
display:block
}
.pending-new-tweet .new-tweets-bar{
opacity:1
}
.new-tweets-bar button{
width:100%;
_width:92%;
padding:10px 0;
color:#fff;
text-align:center;
background-color:#222;
background-color:rgba(0,0,0,0.87);
border-width:0
}
.new-tweets-bar button:hover,.new-tweets-bar button:focus{
text-decoration:underline;
cursor:pointer
}
button.load-more{
display:block;
width:100%;
*width:92%;
padding:10px 0;
margin:0;
text-align:center;
text-shadow:0 1px 0 rgba(255,255,255,0.4);
cursor:pointer;
background-color:#fcfcfc;
background-color:rgba(0,0,0,0.02);
border:0;
box-shadow:inset 0 3px 8px rgba(0,0,0,0.05);
-webkit-transition:background-color .2s ease-out;
-moz-transition:background-color .2s ease-out;
-o-transition:background-color .2s ease-out;
transition:background-color .2s ease-out
}
button.load-more:hover,button.load-more:focus{
text-decoration:underline;
background-color:#eee;
background-color:rgba(0,0,0,0.08)
}
.no-more-pane{
display:none;
padding:12px;
text-align:center
}
.empty-timeline button.load-more,.no-more button.load-more{
display:none
}
.no-more .no-more-pane{
display:block
}
.no-tweets-pane{
margin:30px 0;
text-align:center
}
.no-tweets-pane p{
margin:24px 12px;
text-align:center
}
.nsfw .display-sensitive-image,.no-tweets-pane .load-tweets{
padding:5px 10px;
margin:5px auto;
font-weight:bold;
line-height:18px;
text-align:center;
text-shadow:0 1px 0 rgba(255,255,255,0.5);
cursor:pointer;
background-color:#dedede;
background-color:rgba(0,0,0,0.15);
background-image:-webkit-linear-gradient(#fff,#ddd);
background-image:linear-gradient(#fff,#ddd);
border:1px solid #ccc;
border-color:rgba(0,0,0,0.2);
border-radius:4px
}
.nsfw .display-sensitive-image:hover,.nsfw .display-sensitive-image:focus,.nsfw .display-sensitive-image:active,.no-tweets-pane .load-tweets:hover,.no-tweets-pane .load-tweets:focus,.no-tweets-pane .load-tweets:active{
background-color:#f8f8f8;
background-color:rgba(0,0,0,0.5);
background-image:-webkit-linear-gradient(top,rgba(0,0,0,0.5),rgba(0,0,0,0.15));
background-image:linear-gradient(top,rgba(0,0,0,0.5),rgba(0,0,0,0.15));
border-color:#bbb;
border-color:rgba(0,0,0,0.27)
}
.nsfw .display-sensitive-image:active,.no-tweets-pane .load-tweets:active{
background-color:#efefef;
box-shadow:inset 0 3px 5px rgba(0,0,0,0.1)
}
.has-tweets .no-tweets-pane{
display:none
}
.timeline-footer{
padding:6px 10px;
background:#e8e8e8;
background:rgba(0,0,0,0.1)
}
.timeline-footer a.widget-link{
display:block;
padding:10px;
text-align:center
}
.tweet-box-button{
display:block;
width:100%;
padding:6px;
text-align:left;
background:#fff;
border:1px #ccc solid;
border-radius:4px
}
.tweet-box-button:hover,.tweet-box-button:focus{
cursor:pointer;
border-color:#999;
border-color:rgba(0,0,0,0.4)
}
a.tweet-box-button{
width:auto
}
.tweet{
padding:12px 12px 10px 69px;
border-width:0 0 1px
}
.tweet.with-expansion{
cursor:pointer
}
.header{
_float:left;
_clear:left
}
.header .avatar{
position:absolute;
top:0;
left:-57px;
width:48px;
height:48px;
background:#fff;
border-radius:4px
}
.permalink{
position:relative;
z-index:50;
float:right;
margin-top:2px;
_clear:right
}
.tweet .e-entry-title{
margin:0 5px 0 0;
overflow:hidden;
clear:both;
word-wrap:break-word;
white-space:pre-wrap
}
.inline-media{
max-width:100%;
margin:10px 0 0;
overflow:hidden
}
.tweet .retweet-credit{
margin:3px 0
}
.tweet .twitter-alerts{
margin-top:6px
}
.footer{
overflow:hidden;
zoom:1
}
.tweet-actions{
position:absolute;
_position:static;
right:0;
bottom:1px;
_float:right;
background:#fff;
visibility:hidden;
_visibility:visible;
box-shadow:0 0 10px 5px #fff
}
.tweet-actions li{
_display:inline;
float:left
}
.tweet-actions a i{
margin:1px 0 0 8px;
*margin:1px 0 0 3px;
overflow:hidden
}
.tweet:hover .tweet-actions,.tweet:focus .tweet-actions,.expanded .tweet-actions{
visibility:visible
}
.tweet .tweet-actions a,.tweet .tweet-actions a b,.tweet .tweet-actions a i,.tweet .tweet-actions li{
cursor:pointer;
outline:0
}
.twt-tweet .tweet-actions .ic-retweet{
margin-top:1px
}
.footer{
min-height:16px;
padding-top:1px;
margin-top:2px;
overflow:hidden;
border-width:0;
-webkit-transition:margin-top .2s ease-out,padding-top .2s ease-out;
-moz-transition:margin-top .2s ease-out,padding-top .2s ease-out;
-o-transition:margin-top .2s ease-out,padding-top .2s ease-out;
transition:margin-top .2s ease-out,padding-top .2s ease-out
}
.expanded .footer{
padding-top:11px;
margin-top:10px;
border-width:1px 0 0
}
.expand,.p-geo{
_display:inline;
float:left
}
.stats-wide,.stats-narrow,.brand{
display:none;
margin-left:.3em;
border-width:0
}
.expanded .stats-wide{
display:inline-block;
margin-top:-2px
}
.stats span{
display:inline-block;
margin-right:3px;
text-transform:uppercase
}
.stats strong{
font-weight:bold
}
.detail-expander{
height:0;
overflow:hidden;
-webkit-transition:height .3s ease-in;
-moz-transition:height .3s ease-in;
-o-transition:height .3s ease-in;
transition:height .3s ease-in
}
.detail-expander .detail-content{
_display:none
}
.expanded .detail-expander .detail-content{
_display:block
}
.brand .ic-twitter-badge{
margin:-4px 5px 0 0
}
.cards-base{
padding:13px 0 12px;
border-width:0;
-webkit-transition:margin-top .3s ease-out;
-moz-transition:margin-top .3s ease-out;
-o-transition:margin-top .3s ease-out;
transition:margin-top .3s ease-out
}
.expanded .cards-base{
padding:12px 0 0;
margin-top:12px;
border-width:1px 0 0
}
.expanded .cards-multimedia,.cards-multimedia{
padding-top:0;
border-top:0
}
.cards-base h3{
margin:0 0 4px 0
}
.cards-base .cards-content p{
margin:5px 0 10px
}
.cards-multimedia .cards-content-concise .byline{
margin-bottom:8px
}
.cards-base .summary-thumbnail{
float:right;
max-width:120px;
max-height:120px;
margin:4px 0 0 15px
}
.cards-base .summary-large-thumbnail{
display:block;
margin:4px 0 5px
}
.cards-base .media{
margin:0 0 8px;
line-height:0
}
.cards-base .source-user{
position:relative;
height:16px;
padding-left:21px;
margin:10px 0;
line-height:16px
}
.cards-base .source-user .avatar{
position:absolute;
top:-2px;
left:0;
display:block;
width:16px;
height:16px;
border-radius:2px
}
.multi-photo{
padding:7px 6px 0;
background:#fff
}
.crop-media-box{
display:inline-block;
overflow:hidden;
vertical-align:top
}
.multi-photo .box-0,.multi-photo-4 .box-2{
margin-right:6px
}
.multi-photo-4 .box-0,.multi-photo-4 .box-1,.multi-photo-3 .box-1{
margin-bottom:6px
}
.multi-photo-2 .box-0,.multi-photo-3 .box-0{
border-radius:4px 0 0 4px
}
.multi-photo-2 .box-1{
border-radius:0 4px 4px 0
}
.multi-photo-3 .box-1{
border-radius:0 4px 0 0
}
.multi-photo-3 .box-2{
border-radius:0 0 4px 0
}
.multi-photo-4 .box-0{
border-radius:4px 0 0 0
}
.multi-photo-4 .box-1{
border-radius:0 4px 0 0
}
.multi-photo-4 .box-2{
border-radius:0 0 0 4px
}
.multi-photo-4 .box-3{
border-radius:0 0 4px 0
}
.multi-photo-3 .crop-media-box:first-child{
float:left
}
.custom-timeline-owner-profile{
display:block
}
.custom-timeline-owner-profile .verified{
margin-right:3px;
margin-left:-38px
}
.custom-timeline .timeline-header{
border-bottom-width:3px
}
.custom-timeline-owner-profile{
position:relative;
height:16px;
padding-left:21px;
line-height:16px
}
.custom-timeline-owner-profile .avatar{
position:absolute;
left:0;
display:block;
width:16px;
height:16px;
border-radius:2px
}
.custom-timeline .custom-timeline-summary{
margin-bottom:11px
}
.custom-timeline .custom-timeline-description{
margin-bottom:12px
}
.custom-timeline-owner-profile{
margin-bottom:4px
}
.nsfw{
padding:8px;
background-color:#fcfcfc;
background-color:rgba(0,0,0,0.02);
border-radius:4px
}
.standalone-tweet{
padding:8px 8px 0;
background:#fff;
border-radius:5px
}
.standalone-tweet .subject{
margin-top:4px
}
.standalone-tweet .subject{
padding:4px 8px 8px;
border:0
}
.standalone-tweet .subject .header{
position:relative;
_height:48px;
min-height:48px;
padding:3px 0 4px 57px
}
.standalone-tweet .expanded .footer{
margin-top:5px
}
.standalone-tweet .reply{
padding:8px 8px 8px 65px
}
.standalone-tweet .subject .header .avatar{
left:0
}
.standalone-tweet .subject .header .profile .p-name{
font-size:16px
}
.standalone-tweet .subject .header .profile .p-nickname{
font-size:14px
}
.standalone-tweet .subject .header .profile .p-nickname::before{
white-space:pre;
content:"\A"
}
.standalone-tweet .follow-button,.standalone-tweet .twitter-follow-button{
position:absolute;
top:0;
right:0
}
.standalone-tweet.rtl .follow-button,.standalone-tweet.rtl .twitter-follow-button{
right:auto;
left:0
}
.standalone-tweet .subject .e-entry-title{
font-size:18px;
line-height:24px
}
.standalone-tweet .subject .dateline{
margin-top:6px;
white-space:nowrap
}
.standalone-tweet .subject .p-geo{
float:none
}
.standalone-tweet .subject .dateline .p-geo,.standalone-tweet .subject .dateline .media-tag{
margin-left:3px
}
.media-tag .tag-count{
display:none
}
.collapse-media-tag .media-tag .tag-count{
display:inline
}
.standalone-tweet .subject .cards-base{
padding-bottom:0
}
.standalone-tweet .subject .stats-narrow,.standalone-tweet .subject .brand{
display:block;
float:left;
margin:0
}
.standalone-tweet .subject .tweet-actions{
position:static;
float:right;
margin-bottom:4px;
visibility:visible
}
.standalone-tweet .conversation{
padding:8px 8px 4px 8px;
margin:-8px -8px 8px -8px;
background:#f6f6f6;
border-bottom:1px solid #e8e8e8;
border-bottom-color:rgba(0,0,0,0.1)
}
.standalone-tweet .reply{
position:relative;
min-height:48px;
border:0
}
.follow-button:link,.follow-button:visited{
display:inline-block;
padding:0 5px 0 3px;
font:bold 11px/18px 'Helvetica Neue',Arial,sans-serif;
color:#333;
text-decoration:none;
text-shadow:0 1px 0 rgba(255,255,255,0.5);
white-space:nowrap;
cursor:pointer;
background-color:#eee;
background-image:-webkit-linear-gradient(#fff,#dedede);
background-image:linear-gradient(#fff,#dedede);
border:#ccc solid 1px;
border-radius:3px
}
.ie9 .follow-button:link,.ie9 .follow-button:visited{
border-radius:0;
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dedede')"
}
.follow-button:focus,.follow-button:hover,.follow-button:active{
color:#333;
text-decoration:none;
background-color:#d9d9d9;
background-image:-webkit-linear-gradient(#f8f8f8,#d9d9d9);
background-image:linear-gradient(#f8f8f8,#d9d9d9);
border-color:#bbb;
box-shadow:none
}
.timeline-header a.follow-button:link,.timeline-header a.follow-button:visited,.timeline-header a.follow-button:hover,.timeline-header a.follow-button:focus,.timeline-header a.follow-button:active,.thm-dark .timeline-header a.follow-button:link,.thm-dark .timeline-header a.follow-button:visited,.thm-dark .timeline-header a.follow-button:hover,.thm-dark .timeline-header a.follow-button:focus,.thm-dark .timeline-header a.follow-button:active{
color:#333;
text-decoration:none
}
.thm-dark a.follow-button:link,.thm-dark a.follow-button:visited,.thm-dark a.follow-button:hover,.thm-dark a.follow-button:focus,.thm-dark a.follow-button:active{
color:#333
}
.ie9 .follow-button:hover,.ie9 .follow-button:focus,.ie9 .follow-button:active{
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#f8f8f8', endColorstr='#d9d9d9')"
}
.follow-button:active{
background-color:#efefef;
box-shadow:inset 0 3px 5px rgba(0,0,0,0.1)
}
.follow-button:focus{
border-color:#0089cb;
outline:0
}
.var-narrow .timeline-header .summary{
font-size:14px
}
.var-narrow .custom-timeline-summary{
margin-bottom:7px;
font-size:14px
}
.var-narrow .custom-timeline-description{
margin-bottom:10px
}
.var-narrow .header .profile .p-name,.var-narrow .timeline-header .byline,.var-narrow .timeline-header .list-description,.var-narrow .e-entry-title,.var-narrow .cards-base h3{
font-size:12px;
line-height:16px
}
.var-narrow .timeline-header{
padding:8px
}
.var-narrow .timeline-footer{
padding:4px
}
.var-narrow .timeline-header .follow-button,.var-narrow .timeline-header .twitter-follow-button{
top:6px;
right:6px
}
.var-narrow .tweet{
padding:5px 8px 6px 8px
}
.var-narrow .tweet .header{
position:relative;
_height:36px;
min-height:32px;
padding:0 0 4px 36px
}
.var-narrow .header .avatar{
top:2px;
left:0;
width:32px;
height:32px
}
.var-narrow .header .profile .p-nickname::before{
white-space:pre;
content:"\A"
}
.var-narrow .header .p-name{
display:inline
}
.var-narrow .header .p-nickname{
line-height:16px
}
.var-narrow .permalink{
font-size:11px
}
.var-narrow .expanded .stats-wide{
display:none
}
.var-narrow .expanded .stats-narrow,.var-narrow .brand{
display:block;
margin:0 0 4px 0;
font-size:11px
}
.var-narrow .cards-base .summary-thumbnail{
max-width:60px;
max-height:60px
}
.var-narrow.standalone-tweet .subject{
margin-top:1px
}
.var-narrow.standalone-tweet .subject .header .profile .p-name{
font-size:14px
}
.var-narrow.standalone-tweet .subject .header .profile .p-nickname{
font-size:12px
}
.var-narrow.standalone-tweet .subject .header{
margin-bottom:8px
}
.var-narrow.standalone-tweet .subject .e-entry-title{
font-size:16px;
line-height:20px
}
.var-narrow.standalone-tweet .expanded .footer{
padding-top:6px
}
.var-narrow.standalone-tweet .stats-narrow,.var-narrow.standalone-tweet .brand{
display:block;
float:none;
padding-bottom:5px;
margin:0 0 8px;
border-width:0 0 1px
}
.var-narrow.standalone-tweet .tweet-actions{
position:static;
float:none;
margin-bottom:3px;
overflow:hidden;
white-space:nowrap
}
.var-narrow.standalone-tweet .tweet-actions li{
display:inline-block;
float:none;
width:33.33%;
text-align:center
}
.var-narrow.standalone-tweet .tweet-actions li a{
display:block;
width:100%;
margin:0
}
.var-narrow.standalone-tweet .tweet-actions a i{
margin:0
}
.rtl,.rtl .tweet-box-button,.rtl .follow-button{
text-align:right;
direction:rtl
}
.rtl .p-nickname{
text-align:left;
direction:ltr
}
.rtl .header{
_float:right;
_clear:right
}
.rtl .permalink,.rtl .tweet-actions,.rtl .cards-base .summary-thumbnail{
float:left
}
.rtl .expand,.rtl .p-geo,.rtl .tweet-actions li{
float:right
}
.rtl .permalink{
clear:left
}
.rtl .custom-timeline-owner-profile{
padding-right:21px;
padding-left:0
}
.rtl .custom-timeline-owner-profile .avatar{
right:0
}
.rtl .tweet{
padding:12px 69px 10px 12px
}
.var-narrow.rtl .tweet{
padding:5px 8px 6px 8px
}
.rtl .header .avatar{
right:-57px;
left:auto
}
.var-narrow.rtl .tweet .header{
padding:0 36px 4px 0
}
.rtl.var-narrow .header .avatar{
right:0
}
.rtl .tweet-actions{
right:auto;
left:0
}
.rtl .timeline-header .follow-button,.rtl .timeline-header .twitter-follow-button,.rtl .timeline-header .ic-twitter-badge{
position:absolute;
right:auto;
left:12px
}
.var-narrow.rtl .timeline-header .follow-button,.var-narrow.rtl .timeline-header .twitter-follow-button{
right:auto;
left:6px
}
.rtl .cards-base .source-user{
padding:0 21px 0 0
}
.rtl .cards-base .source-user .avatar{
right:0;
left:auto
}
.rtl .follow-button{
padding:0 3px 0 5px
}
.rtl .ic-top{
margin:2px 0 0 4px
}
.rtl .ic-twitter-alert{
margin:0 0 3px 3px
}
.rtl .ic-rt{
margin:0 0 0 4px
}
.rtl .expand .ic-mask,.rtl .p-geo .ic-mask{
margin:0 0 0 2px
}
.rtl .ic-button-bird{
margin:0 0 0 3px
}
.rtl .stats span{
margin:0 0 0 3px
}
.rtl .verified{
margin-right:-21px;
margin-left:0
}
.thm-dark{
color:#a9a9a9;
background-color:#333
}
.thm-dark .scrolled-down .timeline-header{
box-shadow:0 0 10px -3px #000
}
.thm-dark .ic-twitter-badge{
border-color:#333;
border-color:transparent
}
.thm-dark .ic-twitter-badge:focus{
border-color:#00acee
}
.thm-dark .timeline-footer,.standalone-tweet.thm-dark .conversation{
background-color:#333;
background-color:rgba(0,0,0,0.2)
}
.thm-dark .load-more,.thm-dark .nsfw,.thm-dark .tweet-box-button{
background-color:#4a4a4a;
background-color:rgba(0,0,0,0.64)
}
.thm-dark .load-more{
text-shadow:0 1px 0 rgba(0,0,0,0.6)
}
.thm-dark .load-more:hover,.thm-dark .load-more:focus,.thm-dark .load-more:active{
background-color:#666;
background-color:rgba(0,0,0,0.39)
}
.thm-dark .tweet-actions{
background-color:#333;
box-shadow:0 0 10px 5px #333
}
.thm-dark .customisable,.thm-dark .customisable:link,.thm-dark .customisable:visited,.thm-dark .customisable:hover,.thm-dark .customisable:focus,.thm-dark .customisable:active,.thm-dark .customisable-highlight:hover,.thm-dark .customisable-highlight:focus,.thm-dark a:hover .customisable-highlight,.thm-dark a:focus .customisable-highlight{
color:#87c2ed
}
.thm-dark a:hover .ic-mask,.thm-dark a:focus .ic-mask{
background-color:#87c2ed
}
.thm-dark,.thm-dark .p-author .profile .p-name,.thm-dark .cards-base p,.thm-dark .cards-base p a,.thm-dark .timeline-header .summary,.thm-dark .timeline-header a:link,.thm-dark .timeline-header a:visited,.thm-dark .byline,.thm-dark .p-author a.profile:hover .p-name,.thm-dark .p-author a.profile:focus .p-name .thm-dark .custom-timeline-owner-profile .p-name:hover,.thm-dark .custom-timeline-owner-profile .p-name:focus{
color:#cfcfcf
}
.thm-dark .custom-timeline-summary,.thm-dark .custom-timeline-owner-profile .p-name{
color:#e5e5e5
}
.thm-dark .custom-timeline-description,.thm-dark .custom-timeline-owner-profile .p-nickname{
color:#999
}
.thm-dark a:link,.thm-dark a:visited,.thm-dark .stats span,.thm-dark .retweet-credit,.thm-dark .no-more-pane,.thm-dark .no-tweets-pane p,.thm-dark .p-geo,.thm-dark .cards-base .byline-user{
color:#a0a0a0
}
.thm-dark a:focus,.thm-dark a:hover,.thm-dark a:active,.thm-dark .p-author a.profile:hover,.thm-dark .p-author a.profile:focus,.thm-dark .custom-timeline-owner-profile:hover,.thm-dark .custom-timeline-owner-profile:focus,.thm-dark .retweet-credit .profile:hover,.thm-dark .retweet-credit .profile:focus,.thm-dark .stats strong,.thm-dark .no-tweets-pane .load-tweets,.thm-dark .nsfw{
color:#bbb
}
.customisable-border.thm-dark,.thm-dark .customisable-border{
border-color:#444
}
.thm-dark .tweet-box-button{
border-color:#222
}
.thm-dark .ic-mask{
background-color:#999
}
.thm-dark .tweet-actions .ic-reply{
background-position:0 -116px
}
.thm-dark .tweet-actions .ic-retweet{
background-position:-31px -116px
}
.thm-dark .tweet-actions .ic-fav{
background-position:-60px -116px
}
.thm-dark .ic-pho{
background-position:-60px -59px
}
.thm-dark .ic-pla{
background-position:-80px -59px
}
.thm-dark .ic-geo{
background-position:-100px -60px
}
.thm-dark .ic-sum{
background-position:-120px -59px
}
.thm-dark .ic-con{
background-position:-140px -59px
}
.thm-dark .ic-people{
background-position:-160px -59px
}
.is-touch .tweet-actions{
visibility:visible
}
.is-touch .tweet-actions a{
padding-left:10px
}
.is-touch.var-narrow .tweet-actions a{
padding-left:0
}
.var-chromeless .tweet-actions .ic-mask,.thm-dark.var-chromeless .tweet-actions .ic-mask,.is-touch .tweet-actions .ic-mask{
background-color:transparent
}
.var-chromeless .tweet-actions .ic-reply,.is-touch .tweet-actions .ic-reply{
background-position:-80px -84px
}
.var-chromeless .tweet-actions .ic-retweet,.is-touch .tweet-actions .ic-retweet{
background-position:-82px -102px
}
.var-chromeless .tweet-actions .ic-fav,.is-touch .tweet-actions .ic-fav{
background-position:-82px -122px
}
.var-chromeless .tweet-actions a:hover .ic-reply,.var-chromeless .tweet-actions a:focus .ic-reply,.var-chromeless .tweet-actions a:active .ic-reply,.is-touch .tweet-actions a:hover .ic-reply,.is-touch .tweet-actions a:focus .ic-reply,.is-touch .tweet-actions a:active .ic-reply{
background-position:-103px -84px
}
.var-chromeless .tweet-actions a:hover .ic-retweet,.var-chromeless .tweet-actions a:focus .ic-retweet,.var-chromeless .tweet-actions a:active .ic-retweet,.is-touch .tweet-actions a:hover .ic-retweet,.is-touch .tweet-actions a:focus .ic-retweet,.is-touch .tweet-actions a:active .ic-retweet{
background-position:-109px -102px
}
.var-chromeless .tweet-actions a:hover .ic-fav,.var-chromeless .tweet-actions a:focus .ic-fav,.var-chromeless .tweet-actions a:active .ic-fav,.is-touch .tweet-actions a:hover .ic-fav,.is-touch .tweet-actions a:focus .ic-fav,.is-touch .tweet-actions a:active .ic-fav{
background-position:-103px -122px
}
.var-preview .load-more{
display:none
}
.timeline.var-chromeless{
margin-bottom:10px;
background-color:transparent;
border:0;
border-radius:0
}
.var-chromeless .timeline-header{
padding:12px 0
}
.var-chromeless .tweet{
padding:12px 2px 10px 58px
}
.var-narrow.var-chromeless .tweet{
padding:12px 2px 10px 0
}
.var-chromeless.rtl .tweet{
padding:12px 58px 10px 2px
}
.var-narrow.var-chromeless.rtl .tweet{
padding:12px 0 10px 2px
}
.var-chromeless .permalink{
padding:0 2px 0 0
}
.var-chromeless.rtl .permalink{
padding:0 0 0 2px
}
.var-chromeless .timeline-footer{
padding:6px
}
.var-chromeless .footer .ic-mask{
background-color:transparent
}
.var-chromeless .ic-geo{
background-position:-100px 0
}
.var-chromeless .ic-pho{
background-position:-60px -2px
}
.var-chromeless .ic-sum{
background-position:-120px -2px
}
.var-chromeless .ic-pla{
background-position:-80px -2px
}
.var-chromeless .ic-con{
background-position:-140px -2px
}
.var-chromeless .ic-people{
background-position:-160px -2px
}
.var-chromeless .tweet-actions{
background:0;
box-shadow:none
}
.var-chromeless span.p-geo{
padding:0 90px 0 0
}
.var-chromeless.rtl span.p-geo{
padding:0 0 0 90px
}
.var-chromeless button.load-more{
width:98%;
margin:4px;
text-shadow:none;
border:1px solid #ccc;
border-radius:4px
}
.var-borderless,.var-borderless .customisable-border{
border:0
}
.var-borderless .expanded .footer,.var-borderless .expanded .cards-base{
margin:0
}
.var-borderless .expanded .cards-multimedia{
margin-top:2px
}
.var-borderless .expanded .footer{
padding-top:5px;
margin:0
}
.var-headerless .timeline-header,.var-footerless .timeline-footer{
display:none
}
.var-static .stream{
overflow-y:visible
}
.var-static .load-more{
display:none
}
.var-static .tweet.with-expansion{
cursor:default
}
.withheld{
padding:12px 12px 10px 12px;
border-width:0 0 1px
}
.var-narrow .withheld{
padding:5px 8px 6px 8px
}
.var-chromeless .withheld{
padding:12px 2px 10px 0
}
.var-chromeless.rtl .withheld{
padding:12px 0 10px 2px
}
.withheld-text a:hover,.withheld-text a:focus{
text-decoration:underline
}
.timeline .withheld-title{
font-size:14px
}
.var-narrow .withheld-title{
font-size:12px
}
.standalone-tweet.media-forward{
padding:0
}
.standalone-tweet.media-forward,.standalone-tweet.media-forward .tweet{
position:static;
overflow:hidden
}
.standalone-tweet.media-forward .source-user{
font-size:12px
}
.standalone-tweet.media-forward .content{
padding:0 10px 3px 10px
}
.standalone-tweet.media-forward .subject .header .avatar{
top:4px;
left:10px;
width:28px;
height:28px
}
.standalone-tweet.rtl.media-forward .subject .header .avatar{
right:10px;
left:auto
}
.standalone-tweet.media-forward .subject .header{
min-height:36px;
padding:0 0 0 47px
}
.standalone-tweet.rtl.media-forward .subject .header{
padding:0 47px 0 0
}
.standalone-tweet.media-forward .subject .header .profile .p-name,.standalone-tweet.media-forward .subject .header .profile .p-nickname{
font-size:12px
}
.standalone-tweet.media-forward .expanded .cards-base{
margin-top:0
}
.standalone-tweet.media-forward .follow-button,.standalone-tweet.media-forward .twitter-follow-button{
top:4px;
right:10px
}
.standalone-tweet.rtl.media-forward .follow-button,.standalone-tweet.rtl.media-forward .twitter-follow-button{
right:auto;
left:10px
}
.standalone-tweet.media-forward .subject .e-entry-title{
display:inline;
font-size:16px;
line-height:20px
}
.standalone-tweet.media-forward .expanded .footer{
padding-bottom:8px;
margin:2px 10px 0 10px
}
.standalone-tweet.media-forward .subject .dateline{
margin-top:7px
}
.standalone-tweet.media-forward .cards-base .media{
margin-bottom:6px;
text-align:center;
background-color:#1d1d1d
}
.standalone-tweet.media-forward .cards-base .multi-photo{
background-color:#fff
}
.standalone-tweet.media-forward.thm-dark .cards-base .multi-photo{
background-color:#333
}
.standalone-tweet.media-forward .subject,.standalone-tweet.media-forward.var-narrow .subject{
padding:0;
margin-top:0
}
.var-narrow.standalone-tweet.media-forward .subject .header{
margin-bottom:4px
}
.twitter-emoji{
width:1em;
height:1em;
padding:0 .05em 0 .1em;
vertical-align:-0.1em
}
@media print{
.ic-mask{
display:none
}
}
関連記事
- Twitter APIでのエラーの一覧
- TwitterでURL付ツイートをするとアクセスしてくるボットの一覧
- PHPでTwitterのツイートをする/ツイート一覧を取得する/検索する(API v1.1)
- 『フォローしているリスト』を削除する方法 他のユーザーのリストを削除する
- PHPでTwitterのbotを作る方法 ツイートをする/ツイート一覧を取得する(API v1)
- Twitter APIを使用する (Twitterアプリケーション登録)
- APIで Bad Request (You must specify either a list ID or a slug and owner)
- Twitter、ロゴ利用などに関するガイドライン
- Twiiterのロゴに使用されているフォント(ただし e 以外)
- HTML
- CSS [スタイルシート]
- IPアドレス制限とベーシック認証を併用する方法
- 都道府県を選択するときのサンプルコード (JISコード準拠)
- 連続する半角英数字を途中で自動改行させるには、​が使えます
- title属性値が違うとCSSが読み込まれません
- SELECTタグで色を選択する場合のサンプル
- 連続する英文字を単語の途中で自動改行するCSS[Firefox,Opera対応]
- mailtoの使い方
- Google Chromeでテキストエリアtextareaのサイズ変更をさせない方法
- DOCTYPE宣言/XML宣言
- サイトマップ(sitemap.xml)のつくり方とちょっとしたテクニック
- 会員専用ページを作る方法 (ベーシック認証 / Basic認証 / 基本認証)
- BRタグが<br />と書ける理由 『<br> が <br /』で『</br> が >』になる
- Firefox、Chromeなどで文字化けを防ぐ方法 ヘッダー情報に文字コードを指定
- SSLの警告
- 生年月日などで年を選択するときのサンプルコード
- ナインパッチとは(9-Patch)
- Windows7やWindowsVistaでTelnetを使用する方法
- SSL(HTTPS)でファイルのダウンロードができない場合
- HTMLソースの最後にコメントで『Quick Cache』とあるページ
- <title>などの<head>タグ内の要素にもスタイルが効く
- 多言語対応テキストエディタの一覧
スポンサーリンク
