はてなダイアリーに 埋め込んだGist のスタイルを変える

はてなダイアリーに Gist を埋め込めるのは非常に便利だけど、 はてなダイアリーの見た目と合わないし、なんかイマイチ...
と思われている方もみえるのではないでしょうか？
もちろん自分もそうでした。
このブログで使っているテーマの場合、コードは

println "Hello, world."

のように 黒っぽい背景で表示されるのですが、Gist だと

のように 白っぽい背景で表示されてしまい、なんかイマイチな感じになってしまいます。

と言うことで...
今回は はてなダイアリーに埋め込んだ Gist のスタイルを変える方法です。

Gist のスタイルを変える方法はとっても簡単！！
はてなダイアリーの CSS に Gist のスタイルを追加するだけです。
はてなダイアリーの CSS は 管理画面を開き、メニューから デザイン > デザイン編集 を選択して、詳細タブの一番下にある スタイルシート欄で設定できます。
このブログの設定は

div.section .gist .gist-file .gist-data pre {
    background: none repeat scroll 0 0 #222222 !important;
}

div.section .gist-syntax .k,
div.section .gist-syntax .kc,
div.section .gist-syntax .kd,
div.section .gist-syntax .nx,
div.section .gist-syntax .o,
div.section .gist-syntax .p {
    color:#CCCCCC !important;
}

のような感じです。
ポイントは 先頭に "div.section" を入れることです。
これにより Gist 用の CSS よりも優先されて適用されるようになります。
ちなみに 上記のように設定すると
のような感じで表示されるようになります。

Gist で使われている CSS クラス名については

https://gist.github.com/stylesheets/gist/embed.css

を参照してみてください。