Twitterウィジェットのカスタマイズ(ウィジェット部分のHTML・CSS)

複雑なAPIのプログラムコードを書かなくてもTwitterを扱いやすくするウィジェットが用意されています。

ウィジェットは1アカウントにつき最大で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
	}
}

スポンサーリンク

関連記事

スポンサーリンク

cue サウンドアイコンに関する指定をまとめて行う

ホームページ製作・web系アプリ系の製作案件募集中です。

上に戻る