カスタマイズ5：全体のテーマカラーを変更する

f:id:c-miya:20170317232027j:plain このZENO-TEALというテーマはその名にあるようにTEALという色をテーマカラーとしています。この色を変更したい人もいると思うので、今回はそのカスタマイズ方法です。

このテーマでメインカラーの印象はかなり強いので同じテーマを使っているとすぐにわかりますよね。なので自分の個性を出すためにも変えたいと思う人も多いでしょう。

メインカラーを変更する方法

まず、このZENO-TEALというテーマのメインカラーはTEALで、■←こんな色(#009688)です。そしてはてなのグローバルヘッダーなどにちょっと濃い色■(#00897b)を、メニューに薄い色■(#26a69a)と3つの色を使っています。これをcssで上書きします。

f:id:c-miya:20170317232327j:plain デザイン設定のデザインcssに以下のコードを加えるとメインカラーを変えることができます。

/* メインカラー 500 */
#blog-title, .entry-content h2, .entry-content ol li:before, .page-index .pager a:hover, .page-entry .pager .pager-prev::before, .page-entry .pager .pager-next::after, .hatena-module-title, .archive-heading
{background-color:#色コード;}

.entry-content p a, .entry-content h3, .entry-content h4::before, .entry-content ul ul li::before, ul.table-of-contents:before, .page-index .pager a, .page-entry .pager span a, .urllist-item::before, .hatena-module-category .hatena-urllist li::before, .entry-content ul li::before
{color:#色コード;}

.archive-heading::before, .entry-content h2::before
{border-top-color:#色コード;}

.entry-content h3
{border-left-color:#色コード;}

ul.table-of-contents, .page-index .pager a, .page-entry .pager span
{border-color:#色コード;}


@media screen and (max-width: 480px){
.entry-content h2
{border-bottom:3px solid #色コード;color:#色コード;background-color:transparent;}
}

/* 濃い色 600 */
#globalheader-container, .zeno-menu li a:hover
{background:#色コード;}

.entry-content p a:visited {color:#色コード;}

/* 薄い色 400 */
.page-entry .pager span a:hover, #zeno-menu, .entry-content ol ol li:before
{background:#色コード;}

色コードという部分を好きな色に変更してください。

f:id:c-miya:20170317233030j:plain まとめてインディゴ系統に変えるとこうなります。ちなみにこれは■メイン：#3f51b5、■濃い色：#3949ab、■薄い色：#5c6bc0となっています。

色の参考

もともとのTEALの配色はGoogleのマテリアルデザインの色を持ってきています。

Color - Style - Material design guidelines

ここにはマテリアルデザインの色がカラーごとにまとまっています。上のコードの中にも書いていますが、それぞれの系統の中からメインは500の、濃い色は600の、薄い色は400の色を適用しています。なので、ここから同じようにその数字の色を持ってくると簡単に整えられると思います。

おまけ

トップページのカード右上などについている黄色いカテゴリー部分の色を変更したいときは以下のcssを加えてください。

.page-index .entry-categories, .page-entry .entry-categories{
    background:#色コード;
}

これで変更できると思います。たぶん…。

追記

2017.03.27

コードを修正しました。

.entry-content p a, .entry-content h3, .entry-content h4::before, .entry-content ul ul li::before, ul.table-of-contents:before, .page-index .pager a, .page-entry .pager span a, .urllist-item::before, .hatena-module-category .hatena-urllist li::before
{color:#色コード;}

↓

.entry-content p a, .entry-content h3, .entry-content h4::before, .entry-content ul ul li::before, ul.table-of-contents:before, .page-index .pager a, .page-entry .pager span a, .urllist-item::before, .hatena-module-category .hatena-urllist li::before, .entry-content ul li::before
{color:#色コード;}

（最後に, .entry-content ul li::beforeを追加）

…

.archive-heading::before
{border-top-color:#色コード;}

↓

.archive-heading::before, .entry-content h2::before
{border-top-color:#色コード;}

（最後に, .entry-content h2::beforeを追加）

…

.page-entry .pager span a:hover, #zeno-menu
{background:#色コード;}

↓

.page-entry .pager span a:hover, #zeno-menu, .entry-content ol ol li:before
{background:#色コード;}

（最後に, .entry-content ol ol li:beforeを追加）

…

カテゴリー部分も修正しました。

2017.03.29

コードを修正しました。

@media screen and (max-width: 480px){
.entry-content h2
{border-bottom:3px solid #色コード;color:#色コード;}
}

↓

@media screen and (max-width: 480px){
.entry-content h2
{border-bottom:3px solid #色コード;color:#色コード;background-color:transparent;}
}

（background-color:transparent;を追加）