テーマカラー変更方法②

基本的な方法は以下の記事でも変更しています。 今回は基本的には前回の記事で紹介したコードの色コードを変えただけです。

marumaruchanmaru.hatenablog.jp

変更例

まずは結果からご覧頂きます。
配色を変えただけで大きく印象が変わります。

変更方法

下の赤字の内「★ブログタイトルの背景色」以外はすべて同じ色にします。

/*ブログタイトル上部の帯色*/
#globalheader-container {background-color: [メインカラー];}
/*グローバルヘッダーの背景色*/
#top-editarea {background: [メインカラー];}
/*グローバルヘッダーの背景色（ホバーした時）*/
#global-navi a:hover {background-color: [メインカラー];}
/*ブログタイトルの文字色*/
#blog-title-content a {color: [メインカラー]}
/*ブログタイトルの説明*/
#blog-title-content h2 {color: [メインカラー];}
/*プロフィール、カテゴリーなどの背景色*/
.hatena-module-title {background-color: [メインカラー];}

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

/*************************見出し（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: [メインカラー];}

サンプルコード

 変更例にあるカラーに変える場合は、以下のコードをそのままコピペすればOKです。

/*ブログタイトル上部の帯色*/
#globalheader-container {background-color: #162A87;}
/*グローバルヘッダーの背景色*/
#top-editarea {background: #162A87;}
/*グローバルヘッダーの背景色（ホバーした時）*/
#global-navi a:hover {background-color: #162A87;}

/*ブログタイトルの文字色*/
#blog-title-content a {color:  #162A87;}
 /*ブログタイトルの説明*/
#blog-title-content h2 {color:  #162A87;}

/*プロフィール、カテゴリーなどの背景色*/
.hatena-module-title {background-color: #162A87;}
/*ブログタイトルの背景色*/
#blog-title {background-color: lightyellow;}

/*************************見出し（h1～h2）****************/
.entry-content h1 {background-color: #162A87;}

/*ブログタイトルの説明がh2要素なのでそこ以外*/
.entry-content h2:not(.archive-heading):not(#blog-description) {
border-left: 5px solid #162A87;
}

.entry-content h3 {
  color: #162A87;
}
.entry-content h3:before {
  background-color: #162A87;
}
.entry-content h4 {
border-left: 6px solid #162A87;
color: #162A87;
}
.entry-content h5:before {color: #162A87;}

以上です。