ツイッターの引用をいじる

人力検索 はてなブログ

この質問のやつ。
http://q.hatena.ne.jp/1416005355

はてな記法のうちのひとつ、Twitter 記法を使うと、こう。

[twitter:533391240591470592:detail]

表示は、こう。


スタイルは、css で変更できる。

P.twitter-detail-text {
    font-size: 26px;
    color: green;
}

はてなブログのサイドバーで、「Twitter 貼り付け」を選んだときには、Twitter 記法ではなく、http 記法の亜種として展開される。

[http://twitter.com/hatenaquestion/status/533391240591470592:embed]

表示は、こう。


いったん、blockquote で展開されるものの、javascript で iframe に書き直される。
なので、公開内容としてスタイルを変えるには、デザインの css では対応できなくて、javascript で書き換える必要がある。。

(function(){
    var loaded = Date.now();
    var change_fontsize_tweet = function() {
        var found = false;
        var ifs = document.getElementsByTagName("IFRAME");
        for (var i = 0 ; i < ifs.length ; ++i) {
            if (/twitter-tweet-rendered/.test(ifs[i].className)) {
                var w = ifs[i].contentWindow;
                var ps = w.document.getElementsByTagName("P");
                for (var j = 0 ; j < ps.length ; ++j) {
                    if (/e-entry-title/.test(ps[j].className)) {
                        ps[j].style.fontSize = "10px";
                        ps[j].style.lineHeight = "16px";
                        ps[j].style.color = "green";
                        /* ifs[i].style.height = "700px"; 文字を大きくする際には、フレームも広げる*/
                        found = true;
                    }
                }
            }
        }
        return found;
    };
    var retry = function() {
        console.log(new Date());
        if (! change_fontsize_tweet()) {
            var now = Date.now();
            if ((Date.now() - loaded) < 40*1000) {
                setTimeout(retry, 500);
            } else {
                console.log("*** GIVE UP ! ***");
            }
        }
    };
    retry();
})();

文字を大きくする場合には、IFRAME の大きさも広げてあげなきゃいけない。