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


ピックアップ記事

HTML上に配置した画像に隙間が出来るときの対処法

2012年02月10日 web関連
配置した画像に余計な隙間(スペース)が出来る HTML上に画像を配置したときに、予期せぬスペースが出来るときってありませんか?(画像参照)単純に配置しただけなのに・・・と思うのですが、そんな時はCSSを以下のように設定することで解決できます。 解決策 CSSファイルに以下の設定を記述する。 [php]img { vertical-align: top; }[/php] …
「HTML上に配置した画像に隙間が出来るときの対処法」をはてなブックマークに追加

IE6で透過pngを表示させる方法のメモ

2012年02月09日 web関連
最近は透過pngを上手に使ったサイトも増えてきたので、IE6を気にせずに、透過pngを普通に使って、サイトを作りたいと思ってたのですが、IE6の使用率がゼロでない以上は、やっぱり気になってしまうので、お手軽な方法を調べていたら、詳しくまとめられているサイトを見つけたので、メモしておきます。 個人的に特に気になったのは、「ie7.js」と「DD_belatedPNG.js」です。他の方法は既知のも…
「IE6で透過pngを表示させる方法のメモ」をはてなブックマークに追加

twitter API v1.1を使ってツイート投稿

2014年08月01日 web関連phptwitter API
twitterのAPIを利用してツイートする必要があったので、メモ。 準備 まず、twitterのdevサイトでapp登録しておきます。 次に、ツイートする際に必要なOAuthという認証作業を簡単にしてくれるOAuthライブラリtwitteroauthをダウンロードします。リンク先に飛んだら右下の方にDownload ZIPというボタンがあるのでそこからダウンロード出来ます。 …
「twitter API v1.1を使ってツイート投稿」をはてなブックマークに追加

safariでowl carouselのスライド時にフォントが細くなる現象の解決策

2015年03月19日 web関連jQuery・javascript
レスポンシブ対応でとても重宝しているowlカルーセルですが、safariでは、スライド時に、フォントが細くなったり、太くなったりして、点滅するような現象が起こっていました。 iOSのchromeでも同じ現象が起こるらしいのですが、未確認。 …
「safariでowl carouselのスライド時にフォントが細くなる現象の解決策」をはてなブックマークに追加

お名前.com VPSのメールサーバ設定

2011年06月11日 web関連
メール関連のサービスを起動お名前VPSのメモです。 とりあえず、メールの送受信を正常に行うには、以下のサービスを全部起動しておく。amavisdclamd.amavisddovecotpostfixメールクライアントの設定受信メールサーバメールサーバ:pop.ドメイン名アカウント:メールアドレスパスワード:メールアドレスのパスワード送信メールサーバメールサーバ:smtp.ドメイン名アカウント:メー…
「お名前.com VPSのメールサーバ設定」をはてなブックマークに追加
© graffiti on the web . All rights reserved. WordPress Theme by comfy