はてなブログ公式テーマ「レトロポップ」をダークにする
突然だが、自分は暗いほうが落ち着くため、Dark Reader というブラウザ拡張でWebページも黒めにしている。 この拡張は便利だがたまに表示が崩れたりして、今使っているテーマ レトロポップ もそうだったので、最初から暗くなるようCSSで本格的にカスタムしてみた。
実際に追記しているCSS
ちょっと長いがこんな感じ。 ダッシュボードから デザイン > カスタマイズ > デザインCSS と移動し、これを貼り付ければ君のレトロポップもダークになる。
#globalheader-container {background-color:hsla(0,0%,100%,0);} :root { --black: #151819; --white: #d3cdc1; --yellow: #87661a; --red: #8d0c0c; --lgray: #3d3d3d; --dgray: #191b1c; scrollbar-color: var(--lgray) var(--dgray); } ::-webkit-scrollbar {background-color:var(--dgray);} ::-webkit-scrollbar-thumb {background-color:var(--lgray);} body {background:var(--black); color:var(--white);} a:hover {background-color:transparent;} #container {background-color:var(--black);} #blog-title-inner {background-image:none;} #title a {color:var(--white);} .hatena-module-search-box .search-form {border-color:var(--yellow);} .hatena-module {border-bottom-color:var(--yellow);} .hatena-module:nth-child(odd) .hatena-module-title:after { background-color: #2f5951; } .hatena-module:nth-child(2n) .hatena-module-title:after { background-color: var(--red); } .hatena-urllist li a {color:var(--white); border-bottom-color:var(--lgray);} .hatena-module-title a { color: var(--white); border-bottom-color: var(--lgray); } .page-about dt {border-color:var(--yellow);} #top-box .breadcrumb {border-color:var(--yellow);} .date a {background-color:var(--red);} .date a:hover {background:var(--red);} h1 a, h1 a:hover, h1 a:visited {color:var(--white);} .categories a { background-color: var(--dgray); color: var(--white); border: 1px solid var(--lgray); } .categories a:hover {background-color:var(--dgray);} a.keyword {border-bottom-color:var(--lgray);} .entry-content iframe {filter:brightness(0.95);} twitter-widget {filter:brightness(0.95);} .entry-content code { background-color: var(--dgray); border-color: var(--lgray); } .entry-content pre {background-color:var(--dgray);} a.leave-comment-title {background-color:var(--yellow);} a.leave-comment-title:hover {background-color:var(--yellow);} .pager a {color: var(--white); border-bottom-color:var(--lgray);} .pager a:hover {background-color:transparent;} #footer {color:var(--white);} #footer a {color:var(--white);} .entry-footer { background-image: url(/css/theme/retropop/images/title-line.png); }
前回の謎の丸を消す変更も含まれている他、前から気になっている部分もちょっと修正したりした。
コードの解説
まず --black: #151819;
みたいなのは CSS変数 で、色の管理に便利だったので使ってみている。
IEには実装されていない 機能なので、IEの人には別のブラウザで見てもらうか、普通に置換したものを使えばよい。
#globalheader-container
は「ログイン」やら「読者になる」やらがついている一番上にあるバーのこと。
<iframe>
なのでCSSだけでは文字色の変更などができず、とりあえずは透明度を 0
にして目立たないようにした。
lgray
, dgray
はそれぞれ light gray, dark gray の意味で、:root
の scrollbar-color
と ::-webkit-scrollbar
はスクロールバーを暗くするための設定。
.page-about dt
は /about の横線の色の設定で、#top-box .breadcrumb
はパンくずリストの枠線の色の設定。
この段落の残りは普通の記事のページのタイトル周りの色やらなんやらの指定。
.entry-content iframe
と twitter-widget
は ブログカード を暗くする設定。
これらも <iframe>
なのでCSSだけではこのあたりが限界だと思う。
最後の段落は記事の内容より下の部分の設定。
初期設定ではレトロポップの特徴であるカラフルなあのリボンがかすれているため、.entry-footer
でタイトルに使われている綺麗なものを使うように指定している。
「レトロポップ」を本格的に弄ってみて
弄ってみてから気づいたが、レスポンシブじゃないし上のバーがスクロールで消えなかったりで、結構微妙なテーマだなと思ったりした。 カスタムする前提なら「Smooth」とかが素直で良さそう。
追記
この記事を書いた後「Smooth」に乗り換えてみたが、読みやすくレスポンシブなので当分はこれでいくことにした。 (レスポンシブにするとGoogle検索で上位に出てきやすくなるという話があり、実際そんな気もしている。) ただしマウスオーバー時のスタイルの変化に統一性がなく、ちょっと気になったので以下のCSSで適当に直している。
#title a:hover { color: #6e8181; text-decoration: none; } .entry-title a:hover { color: #6e8181; text-decoration: none; } .entry-content a.keyword:hover { text-decoration-color: #cfd8d8; }
これでブログのタイトルや記事のタイトルから下線が消えて、キーワードにマウスを持ってきてもちらちらしなくなると思う。