配色の変更方法

配色変更方法

これから紹介するコードを、変更したい色に変えてデザインCSSに追加するだけ。

まずはこのブログのメインカラーで設定してある「コーンフラワーブルー」こと、

上記の色を変更するコードです。

#blog-title #title a,#blog-description,.search-module-input,.search-module-input::placeholder,.entry-content h3,.entry-content h4,.leave-comment-title:hover {
  color: #4f8299 !important;
}
.top-menu-bar,.page-index .enable-top-editarea .page-archive .categories,.page-archive .categories,.page-index .enable-top-editarea .page-archive .pager a,.page-archive .pager a,.archive-heading,.search-module-button,.entry-content h2,.leave-comment-title,.page-entry .pager-prev a:hover,.page-entry .pager-next a:hover {
 background: #4f8299 !important;
}
.search-module-input,.search-module-button,.leave-comment-title,.page-entry .pager-prev a,.page-entry .pager-next a {
 border: 1px solid #4f8299 !important;
}
.entry-content h3 {
 border-top: double 5px #4f8299 !important;
}
.entry-content h3 {
 border-bottom: double 5px #4f8299 !important;
}
.entry-content h4 {
 border-bottom: solid 3px #4f8299 !important;
}

上記の赤色の部分、計6箇所を好きな色に変更すると配色が変更できます。

そして、次にメニューや目次で使われている「バーミリオン」こと

上記の色を変更するコードです。

.hatena-module-title,.comment-box:after,.entry-header .categories a {
 background: #2C5379 !important;
}
.table-of-contents {
 border:1px solid #2C537990 !important;
 border-bottom: 10px solid #2C5379 !important;
}
.table-of-contents:before {
 border-bottom: 10px solid #2C5379 !important;
 background: #2C537990 !important;
}

上記の赤色の部分3箇所と青色の部分2箇所を好きな色に変更すると配色が変更できます。
注意点として、青色の2箇所はカラーコードの後ろに「90」と数字がついています。
この数字は透明度を設定している数字なので、この90は残しつつ青色の部分のみ変更してください。

カラーコードサンプル：水色×緑

#blog-title #title a,#blog-description,.search-module-input,.search-module-input::placeholder,.entry-content h3,.entry-content h4,.leave-comment-title:hover {
 color: #40AAEF !important;
}
.top-menu-bar,.page-index .enable-top-editarea .page-archive .categories,.page-archive .categories,.page-index .enable-top-editarea .page-archive .pager a,.page-archive .pager a,.archive-heading,.search-module-button,.entry-content h2,.leave-comment-title,.page-entry .pager-prev a:hover,.page-entry .pager-next a:hover {
 background: #40AAEF !important;
}
.search-module-input,.search-module-button,.leave-comment-title,.page-entry .pager-prev a,.page-entry .pager-next a {
 border: 1px solid #40AAEF !important;
}
.entry-content h3 {
 border-top: double 5px #40AAEF !important;
}
.entry-content h3 {
 border-bottom: double 5px #40AAEF !important;
}
.entry-content h4 {
 border-bottom: solid 3px #40AAEF !important;
}

.hatena-module-title,.comment-box:after,.entry-header .categories a {
 background: #58BE89 !important;
}
.table-of-contents {
 border:1px solid #58BE8990 !important;
 border-bottom: 10px solid #58BE89 !important;
}
.table-of-contents:before {
 border-bottom: 10px solid #58BE89 !important;
 background: #58BE8990 !important;
}

カラーコードサンプル：ネイビー

#blog-title #title a,#blog-description,.search-module-input,.search-module-input::placeholder,.entry-content h3,.entry-content h4,.leave-comment-title:hover {
 color: #08233E !important;
}
.top-menu-bar,.page-index .enable-top-editarea .page-archive .categories,.page-archive .categories,.page-index .enable-top-editarea .page-archive .pager a,.page-archive .pager a,.archive-heading,.search-module-button,.entry-content h2,.leave-comment-title,.page-entry .pager-prev a:hover,.page-entry .pager-next a:hover {
 background: #08233E !important;
}
.search-module-input,.search-module-button,.leave-comment-title,.page-entry .pager-prev a,.page-entry .pager-next a {
 border: 1px solid #08233E !important;
}
.entry-content h3 {
 border-top: double 5px #08233E !important;
}
.entry-content h3 {
 border-bottom: double 5px #08233E !important;
}
.entry-content h4 {
 border-bottom: solid 3px #08233E !important;
}
.hatena-module-title,.comment-box:after,.entry-header .categories a {
 background: #2C5379 !important;
}
.table-of-contents {
 border:1px solid #2C537990 !important;
 border-bottom: 10px solid #2C5379 !important;
}
.table-of-contents:before {
 border-bottom: 10px solid #2C5379 !important;
 background: #2C537990 !important;
}

カラーコードサンプル：ピンク

#blog-title #title a,#blog-description,.search-module-input,.search-module-input::placeholder,.entry-content h3,.entry-content h4,.leave-comment-title:hover {
 color: #EB7084 !important;
}
.top-menu-bar,.page-index .enable-top-editarea .page-archive .categories,.page-archive .categories,.page-index .enable-top-editarea .page-archive .pager a,.page-archive .pager a,.archive-heading,.search-module-button,.entry-content h2,.leave-comment-title,.page-entry .pager-prev a:hover,.page-entry .pager-next a:hover {
 background: #EB7084 !important;
}
.search-module-input,.search-module-button,.leave-comment-title,.page-entry .pager-prev a,.page-entry .pager-next a {
 border: 1px solid #EB7084 !important;
}
.entry-content h3 {
 border-top: double 5px #EB7084 !important;
}
.entry-content h3 {
 border-bottom: double 5px #EB7084 !important;
}
.entry-content h4 {
 border-bottom: solid 3px #EB7084 !important;
}
.hatena-module-title,.comment-box:after,.entry-header .categories a {
 background: #F2A4BA !important;
}
.table-of-contents {
 border:1px solid #F2A4BA90 !important;
 border-bottom: 10px solid #F2A4BA !important;
}
.table-of-contents:before {
 border-bottom: 10px solid #F2A4BA !important;
 background: #F2A4BA90 !important;
}