トップ > twitter > twitter記法のデザイン変更

twitter記法のデザイン変更

twitter

もうだれか書いてるかも知らんけれども。

構造はこんな感じです。

<p><div class="twitter-tweet-wrapper"></p>
<div class="twitter-tweet">
    <p class="twitter-tweet-text">
        <span class="twitter-tweet-text-user">@
            <a class="twitter-user-screen-name" href="http://twitter.com/pigya">pigya</a>
            : 
        </span>
        ﾒﾀﾞﾏﾄﾞｺｰ
    </p>
    <p class="twitter-tweet-info">
        <a href="http://twitter.com/pigya/status/14839452486" class="twitter-tweet-info-permalink">
    	    <span class="twitter-tweet-info-date">2010-05-27</span> 
    	    <span class="twitter-tweet-info-time">23:11:17</span>
    	</a> 
    	<span class="twitter-tweet-info-source">via 
    	    <a href="http://d.hatena.ne.jp/Kiri_Feather/20071121" rel="nofollow">Tween</a>
    	</span>
  </p>
</div>

構造としては

まぁ見りゃわかるんですけども。


各クラスの説明

twitter-tweet-wrapper
一日のブロック　div要素
twitter-tweet
一ポストのブロック div要素
twitter-tweet-text
ポスト内容の段落　p要素
twitter-tweet-info
投稿情報の段落　p要素
twitter-tweet-text-user
ポストした人のユーザー名？のブロック。なぜか非表示…　span要素
twitter-user-screen-name
ポストした人のホームへのリンク　a要素
twitter-tweet-info-permalink
日付、時間のリンク　a要素
twitter-tweet-info-date
日付のブロック　span要素
twitter-tweet-info-time
時間のブロック　span要素
twitter-tweet-info-source
クライアントなどの情報のブロック　span要素

とりあえず投稿情報の段落は右に寄せて、ポストごとに線で囲ってみた(もちろん角丸)

.twitter-tweet-wrapper
{
  padding:5px;
}

.twitter-tweet{
   background:#fefefe;
   border:1px solid #ddd;
   -webkit-border-radius: 8px; 
   -moz-border-radius: 8px; 
   border-radius: 10px;
   padding:7px;
   margin:10px;
}

.twitter-tweet a{
   text-decoration:none;
}

.twitter-tweet-text{
   padding-left:5px;
}

.twitter-tweet-info{
   text-align:right;
   font-size:90%;
}

なぜかtwitter-tweet-info-date/timeのaの設定がうまくいかない。うーむ。まぁいいか…。