やろーじだい

ブログと技術メモです。なにかあればより詳細に書こうということで最初は雑に書くようにしています。質問・要望等あれば Twitter かコメントに下さい。

はてなブログで埋め込んだ gist の色を元のデザインの背景でそれっぽくする

やりたいこと

以下のように今つかっているデザインだとコード埋め込みの色と gist の色が違っているので似たものにしたい。

f:id:lhcpr:20180905174150p:plain

完全には合わせずある程度似た雰囲気になり目に痛くなければ良いとする。

方法

私ははてなブログで公開されている Terminal というものを少し変えたものを利用しているので、 これの CSS を見ながら合わせた。

追加の CSS はブログの管理画面の デザイン→カスタマイズ→デザインCSS で追加できる。

以下に gist 部分の変更部分と、ついでに元のデザインを微調整したものを gist に公開した。 gist のデザインの変更部分に関して、 単に元の CSS (github-light.css) と同じ詳細度で記述しても上書きできず、 追加分が後から読まれるようになってなかったようなので面倒になり !important で書いた。

またコード部分の色については一つのコードだけを見て調整したので他の言語だと変なことになる可能性がある。更に背景に関しては単に透過しただけなので使っているデザインによっては見辛くなる。

実際 css で見るとちょっとイマイチになってしまったのでまた調整するかもしれない。