はてなブックマークコメントのヘッダーカラーを変えてみた。

記事の最後に追加できる、はてなブックマークのコメント表示。
ブックマークで、コメントを貰ったこともないので、あえて表示する必要も無かったのですがちょっとチャレンジしてみました。

f:id:wedges:20150125020707p:plain

CSSでは変更できない！

iframeによって読み込まれる部分なので、通常のCSSでの変更はできないようです。

ということで、iframeの中をどうやって外側からCSSを書き換えるかとを調べていたら、ありました！
jQueryを使用してCSSを書き換えるというものがあるのです。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
        $('iframe').contents().find('div').css('border', '1px solid #f20023');
        $('iframe').contents().find('div').css('background', 'url("header.gif")');
});
</script>

Javascriptは、苦手というか、さっぱりわからない方なので、解説するようなレベルでは全くないのですが・・・・。

1行目は、jQueryの読み込み。
2行目からが、iframeを書き換えるスクリプトですね。

4行目でボーダーの色を替えて、
5行目でヘッダーに配置されている背景をかえる感じです。

これを、フッタに入れるのですが、実際はこんな感じです。
書き方は、これでいいのか、もっとスマートな方法があるのかわかりませんが・・・・。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
	    setTimeout(function(){
        $('iframe.hatena-bookmark-comment-iframe').contents().find('div.hatena-bookmark-title').css('border', '1px solid #f20023');
        $('iframe.hatena-bookmark-comment-iframe').contents().find('div.hatena-bookmark-title').css('background', 'url("http://cdn-ak.f.st-hatena.com/images/fotolife/w/wedges/20150119/20150119015635.gif") repeat scroll left center transparent');
	    },100);
});
</script>