はてなダイアリーに 埋め込んだ 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を参照してみてください。