はてブロカスタムテーマ『Naked』を黒くしてみた

f:id:yukk_laz:20180301224311p:plain

目に優しい黒い配色が最近の流行りなので、勝手に黒いテーマに変えてみました。

更新履歴

  • 2018/03/01 初版公開

Nakedとは?

f:id:yukk_laz:20180301223542p:plain
http://blog.hatena.ne.jp/-/store/theme/6653812171397406126

Nakedは、ゆきひー(id:ftmaccho)さんによるはてブロのカスタムテーマです。
白くてモダンでレスポンシブ、テーマストアでも上位に食い込んでいる人気テーマです。
使っている人もいるのではないでしょうか?

これを上にあった画像のように、勝手に黒くしてみようというのが今回の記事です。

カスタマイズの方法

以下、長いですが、カスタムCSSにコピペしてください。

f:id:yukk_laz:20180301222952p:plain
デザイン設定の下にあります。

body {
    color: #bbb;
}
#content {
    background-color: #0a0a0a;
}
article {
    background-color: #000;
}
#globalheader-container {
    color: #ccc;
}
#title a {
    color: #fff;
}
#blog-description {
    color: #ececec;
}
#n-menu .menu-content > li > a {
    color: #fff;
}
#n-menu .menu-content > li > a:hover {
    border-bottom: 1px solid #fff;
}
#n-menu .second-level {
    border: 2px solid #535353;
}
#n-menu .second-level > li {
    border-bottom: 1px solid #535353;
}
#n-menu .second-level > li > a {
    background-color: #000;
    color: #bbb;
}
#n-menu .second-level > li > a:hover {
    background-color: #090909;
}
@media screen and (max-width:768px) {
    #n-menu .menu-btn {
        color: #fff;
    }
}

.entry-date a {
    color: #777;
}

.entry-title a {
    color: #ddd;
}

.entry-categories a {
    color: #777;
}

.entry-header-menu a {
    border: double #333;
    color: #ddd !important;
}

.entry-content {
    color: #bbb;
}

.entry-content a {
    color: #0693cd;
}

.entry-content h1 {
    border-left: 5px solid #bbb;
    color: #bbb ;
}

.entry-content h2 {
    background-color: #bbb;
    color: #000 ;
}

.entry-content h3 {
    border-left: 6px solid #bbb;
    background-color: #090909;
    color: #bbb;
}

.entry-content h4 {
    border-bottom: 10px solid #090909;
}

.entry-content h5 {
    color: #bbb;
}

.entry-content h5::before {
    border: 5px solid #bbb;
}

@media screen and (max-width: 680px) {
    .entry-content h1 {
        border-left: 5px solid #bbb;
        color: #bbb ;
    }
    .entry-content h2 {
        background-color: #bbb;
        color: #000;
    }
    .entry-content h3 {
        border-left: 5px solid #bbb;
        background-color: #090909;
        color: #bbb;
    }
    .entry-content h4 {
        border-bottom: 10px solid #090909;
    }
    .entry-content h5 {
        color: #bbb;
    }
}

a.entry-see-more {
    background-color: #bbb;
    color: #000;
}

.entry-content blockquote {
    background-color: #090909;
}

.entry-content dt {
    border-bottom: 5px solid #090909;
}

.entry-content table {
    border: 1px solid #333;
}

.entry-content th,
.entry-content td {
    border-bottom: 1px solid #333;
    border-left: 1px solid #333;
}

.entry-content th {
    background-color: #101010;
}

.entry-content pre {
    background-color: #222;
    color: #eee;
}

.comment-box .comment-user-id {
    color: #ccc;
}

.comment-box .comment-content {
    background-color: #090909;
}

.hatena-module-title a,
.hatena-module-body a {
    color: #bbb;
}

.hatena-module-title {
    border-left: 5px solid #333;
    color: #bbb;
}

.profile-description a {
    color: #0693cd;
}

.search-module-input {
    background-color: #aaa;
}

.search-module-input:focus {
    background-color: #fff;
    color: #000;
}

.hatena-module-links li {
    border-top: 1px solid #535353;
}

.hatena-module-links li:last-child {
    border-bottom: 1px solid #535353;
}

.hatena-module-links a {
    color: #0693cd !important;
}

.urllist-item {
    list-style-type: none;
    margin-bottom: 10px;
    padding: 10px;
    background-color: #000;
}
.urllist-item a {
    color: #bbb;
    text-decoration: none;
}
.urllist-date-link a,
.urllist-categories a {
    color: #777;
    font-size: 10px;
}

.urllist-entry-body {
    color: #777;
    font-size: 10px;
}

.hatena-module-category li {
    border-bottom: 1px solid #535353;
}

.recent-comments li {
    border-bottom: 1px solid #535353;
}

.pager a {
    color: #0693cd;
}

#footer {
    color: #ccc;
}

#footer a {
    color: #ccc;
}

#n-footer {
    background-color: #eee;
}

#n-copyright h4,
#n-copyright a {
    color: #fff;
}

.page-archive .archive-entry {
    background-color: #000;
}

.page-archive .date a {
    color: #777;
}

.page-archive .entry-title a {
    color: #ddd;
}

.page-archive .categories a {
    color: #777;
}
@media screen and (max-width: 680px) {
    .page-archive .archive-entry {
        background-color: #000;
    }
}

.page-archive .archive-entry {
    background-color: #000;
}

#top-box {
    border-bottom: 1px solid #333;
    background-color: #070707;
}

#top-box .breadcrumb-link,
#top-box .breadcrumb-child {
    color: #bbb;
}

ul.table-of-contents {
    border: 1px solid #1b1b1b;
}

.booklink-box,
.kaerebalink-box {
    border: double #333;
}

.booklink-link2 a,
.kaerebalink-link1 a {
    text-shadow: 1px 1px 1px #232323;
    color: #000 !important;
}

.shoplinkamazon a {
    border: 1px solid #ff9901 !important;
    color: #ff9901 !important;
}

.shoplinkrakuten a {
    border: 1px solid #c20004 !important;
    color: #c20004 !important;
}

.shoplinkkindle a {
    border: 1px solid #007dcd !important;
    color: #007dcd !important;
}

.shoplinkkakakucom a {
    border: 1px solid #314995;
    color: #314995 !important;
}

.shoplinkyahoo a {
    border: 1px solid #7b0099 !important;
    color: #7b0099 !important;
}

#appreach-box {
    border: double 2px #131313;
}

注意点など

色が変わってあなたのブログもすばらしきアングラワールドになりましたか?

今回のCSSは、元のCSSをぶっこぬいてきて、カラーコードをすべて反転させたものになります。
それだけだと色味が一部おかしかったので、目についたものは修正しましたが、
わたしが使ってない機能についてはチェックできていません。

おかしいなあと思ったら、適宜修正&報告ください。

現在わかっている問題点

  • デザイン変更以前に書いた『はてな記法』の『コードブロック』は、たまに色がかわりません。