2012年02月07日 web関連twitter API

ツイッターのプロフィールウィジェットを入れているサイトで、CSSでデザインしていたら、h3やh4の設定がTwitterのウィジェットにまで反映されて、困ることが時々あります。(私は・・・)

今回はそれを直したかったので、調べて見ました。

Twitterのウィジェット

当サイトでは、Twitterが提供しているコードをそのまま設置していますが、以下のようなコードです。
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 10000,
  width: 'auto',
  height: 300,
  theme: {
    shell: {
      background: '#333333',
      color: '#ffffff'
    },
    tweets: {
      background: '#000000',
      color: '#ffffff',
      links: '#4aed05'
    }
  },
  features: {
    scrollbar: false,
    loop: true,
    live: true,
    behavior: 'default'
  }
}).render().setUser('apr_20').start();
</script>

これがHTMLとして表示されると、以下のようになっています。複数のつぶやきが含まれていて複雑だったので、余分な箇所は適当に省いています。

HTMLソース

<div id="twtr-widget-1" class="twtr-widget twtr-widget-profile">
        <div style="width: 100%;" class="twtr-doc">
        <div class="twtr-hd">
        <a class="twtr-profile-img-anchor" href="http://twitter.com/intent/user?screen_name=apr_20" target="_blank"><img src="http://a2.twimg.com/profile_images/1308881356/twitter_normal.jpg" class="twtr-profile-img" alt="profile"></a>
        
        <h3>apr20.net</h3>
        
        <h4><a href="http://twitter.com/intent/user?screen_name=apr_20" target="_blank">apr_20</a></h4>
        
        </div>
        
        <div class="twtr-bd">
        
            <div style="height: 300px;" class="twtr-timeline">
            
                <div class="twtr-tweets">
                
                <div class="twtr-reference-tweet"></div>
                
                <div id="tweet-id-21" class="twtr-tweet" style="opacity: 1; height: 108px;">
                    <div class="twtr-tweet-wrap">
                    
                        <div class="twtr-avatar">
                        
                            <div class="twtr-img"><a href="http://twitter.com/intent/user?screen_name=apr_20" target="_blank"><img src="http://a2.twimg.com/profile_images/1308881356/twitter_normal.jpg" alt="apr_20 profile"></a></div>
                        
                        </div>
                    
                    <div class="twtr-tweet-text">
                    
                    <p>
                    <a class="twtr-user" href="http://twitter.com/intent/user?screen_name=apr_20" target="_blank">apr_20</a> ブログ更新 : Zencartの文字化け対策 - <a rel="nofollow" urlentities="" target="_blank" href="http://t.co/sOSednM8">http://t.co/sOSednM8</a>
                    <em>
                    <a href="http://twitter.com/apr_20/status/166476887701467136" time="Mon Feb 06 11:02:37 +0000 2012" class="twtr-timestamp" target="_blank">5 hours ago</a> ·
                    <a href="http://twitter.com/intent/tweet?in_reply_to=166476887701467136" class="twtr-reply" target="_blank">reply</a> ·
                    <a href="http://twitter.com/intent/retweet?tweet_id=166476887701467136" class="twtr-rt" target="_blank">retweet</a> ·
                    <a href="http://twitter.com/intent/favorite?tweet_id=166476887701467136" class="twtr-fav" target="_blank">favorite</a>
                    </em>
                    </p>
                    </div>
                    </div></div>
                
                <!-- tweets show here -->
                
                </div>
            
            </div>
        </div>
            <div class="twtr-ft">
                <div><a href="http://twitter.com" target="_blank"><img src="http://widgets.twimg.com/i/widget-logo.png" alt=""></a>
                <span><a href="http://twitter.com/apr_20" style="color:#ffffff" class="twtr-join-conv" target="_blank">Join the conversation</a></span>
                </div>
            </div>
        </div>
    </div>

CSSを適用する

上記のようなHTMLソースがわかれば、あとは変更したい箇所にCSSを適用すれば完了です。私の場合は、ウィジェットのヘッド部分にあるh3,h4を修正したかったので、以下のように指定しました。
.twtr-widget h3,.twtr-widget h4{
/*ここにCSSの設定*/
}

この投稿へのコメント

コメントはまだありません。

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CAPTCHA


ピックアップ記事

FacebookアプリをFacebookページ(ファンページ)に追加する

2012年01月27日 web関連Facebook
[php]https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&display=popup&next=YOUR_URL [/php] この「YOUR_APP_ID」はApp ID/API Keyに、「YOUR_URL」はアプリのURLに書き換えて、ブラウザからアクセスしてください。 アプリのApp ID/API K…
「FacebookアプリをFacebookページ(ファンページ)に追加する」をはてなブックマークに追加

twitter公式ウィジェットの背景色をクリアにする

2011年05月26日 web関連
ブログやサイトなんかにtwitterウィジェットを使う事が多くなりましたが、ウィジェットの背景を透明にしないとサイトにマッチしないなぁという場合もあるかと思いますので、その方法を書いておきます。簡単ですが。。。(笑) theme: {    shell: {      background: 'none',  …
「twitter公式ウィジェットの背景色をクリアにする」をはてなブックマークに追加

有名サイトのロゴ フォント

2011年07月27日 web関連
Twitter …… Pico Alphabet (Modified)Digg …… FFF Forward (Modified)Last.fm …… National (Modified)Flickr …… Frutiger BlackYouTube …… Alternate Gothic No. 2Facebook …… Klavika (Modified)Engadget …… Engadg…
「有名サイトのロゴ フォント」をはてなブックマークに追加

iPhoneのホーム画面に表示されるサイトへのショートカットアイコンを設定

2013年10月31日 web関連iPhone
[php]<link rel="apple-touch-icon" href="画像パス" /> [/php] サイズに関して 引用 : http://arigato-ipod.com/lab-webclip-apple-touch-icon.html 引用 : http://ozpa-h4.com/2012/03/29/…
「iPhoneのホーム画面に表示されるサイトへのショートカットアイコンを設定」をはてなブックマークに追加

WordPressの抜粋表示の設定

2014年08月25日 web関連WordPressphp
WordPressの抜粋表示(excerpt)を以下のように動作させたかったので、自作してみました。 抜粋があれば抜粋表示 moreタグがあれば、それに従う 指定文字数より本文文字数が少なければ、そのまま表示 指定文字数より本文文字数が多ければ抜粋表示 コード functions.phpにコピペ。 [php]<?php //WordPress抜粋表…
「WordPressの抜粋表示の設定」をはてなブックマークに追加
© graffiti on the web . All rights reserved. WordPress Theme by comfy