テーマカラー変更方法

テーマカラー変更方法

テーマカラーの変更方法を紹介します。
標準ではブルーを設定しています。
カラーは大きくメインカラーとサブカラーの2種類があります。

「デザインCSS」にコードを追記することでカラーの変更が可能です。
画面上部のメニュー >「デザイン」> 「カスタマイズ」タブ > 「デザインCSS」

追記するコード
コードの内容は以下の通りです。[メインカラー]の箇所を好きな色コードに書き換えます。

/*************************メインカラー**************************/
/*ブログタイトル上部の帯色*/
#globalheader-container {background-color: [メインカラー];}

/*グローバルナビの背景色*/
#top-editarea {background: [メインカラー];}

/*************************メインカラー（h1～h2）****************/
.entry-content h1 {background-color: [メインカラー];}

/*ブログタイトルの「description」以外のh2要素*/
.entry-content h2:not(.archive-heading):not(#blog-description) {
border-left: 5px solid [メインカラー];
}

.entry-content h3 { color: [メインカラー]; }
.entry-content h3:before { background-color: [メインカラー]; }

.entry-content h4 {
border-left: 6px solid [メインカラー];
color: [メインカラー];
}

.entry-content h5:before {color: [メインカラー];}

/************************サブカラー**************************/
/*ブログタイトルの背景色*/
#blog-title {background-color: [サブカラー];}

/*ブログ右側（プロフィール、カテゴリーなど）のタイトル背景色*/
.hatena-module-title {background-color: [サブカラー];}

/*グローバルナビのホバー時の背景色*/
#global-navi a:hover {background-color: [サブカラー];}

サンプルカラーの紹介

実際のコードと反映結果のイメージは以下の通りです。
サンプルのコードを「デザインCSS」にそのままコピペして頂ければOKです。

ブルー

/*************************メインカラー**************************/
#globalheader-container {background-color: #0B65F1;}
#top-editarea {background: #0B65F1;}

/*************************メインカラー（h1～h2）****************/
.entry-content h1 {background-color: #0B65F1;}
.entry-content h2:not(.archive-heading):not(#blog-description) {
border-left: 5px solid #0B65F1;
}
.entry-content h3 {
  color: #0B65F1;
}
.entry-content h3:before {
  background-color: #0B65F1;
}
.entry-content h4 {
border-left: 6px solid #0B65F1;
color: #0B65F1;
}
.entry-content h5:before {color: #0B65F1;}

/************************サブカラー**************************/
.hatena-module-title {background-color: #7BACF9;}
#blog-title {background-color: #7BACF9;}
#global-navi a:hover {background-color: #7BACF9;}

グリーン

/*************************メインカラー**************************/
#globalheader-container {background-color: #3DCF4D;}
#top-editarea {background: #3DCF4D;}

/*************************メインカラー（h1～h2）****************/
.entry-content h1 {background-color: #3DCF4D;}
.entry-content h2:not(.archive-heading):not(#blog-description) {
border-left: 5px solid #3DCF4D;
}
.entry-content h3 {
  color: #3DCF4D;
}
.entry-content h3:before {
  background-color: #3DCF4D;
}
.entry-content h4 {
border-left: 6px solid #3DCF4D;
color: #3DCF4D;
}
.entry-content h5:before {color: #3DCF4D;}

/************************サブカラー**************************/
.hatena-module-title {background-color: #A0E7A9;}
#blog-title {background-color: #A0E7A9;}
#global-navi a:hover {background-color: #A0E7A9;}

オレンジ

/*************************メインカラー**************************/
#globalheader-container {background-color: #F19A0B;}
#top-editarea {background: #F19A0B;}

/*************************メインカラー（h1～h2）****************/
.entry-content h1 {background-color: #F19A0B;}
.entry-content h2:not(.archive-heading):not(#blog-description) {
border-left: 5px solid #F19A0B;
}
.entry-content h3 {
  color: #F19A0B;
}
.entry-content h3:before {
  background-color: #F19A0B;
}
.entry-content h4 {
border-left: 6px solid #F19A0B;
color: #F19A0B;
}
.entry-content h5:before {color: #F19A0B;}

/************************サブカラー**************************/
.hatena-module-title {background-color: #F9CA7B;}
#blog-title {background-color: #F9CA7B;}
#global-navi a:hover {background-color: #F9CA7B;}

レッド

/*************************メインカラー**************************/
#globalheader-container {background-color: #F53D23;}
#top-editarea {background: #F53D23;}

/*************************メインカラー（h1～h2）****************/
.entry-content h1 {background-color: #F53D23;}
.entry-content h2:not(.archive-heading):not(#blog-description) {
border-left: 5px solid #F53D23;
}
.entry-content h3 {
  color: #F53D23;
}
.entry-content h3:before {
  background-color: #F53D23;
}
.entry-content h4 {
border-left: 6px solid #F53D23;
color: #F53D23;
}
.entry-content h5:before {color: #F53D23;}

/************************サブカラー**************************/
.hatena-module-title {background-color: #F98B7B;}
#blog-title {background-color: #F98B7B;}
#global-navi a:hover {background-color: #F98B7B;}