このテーマではカラーバリエーションのカスタマイズも簡単です。
カラーバリエーションのカスタマイズ
デザイン→カスタマイズ→デザインcssのところにカスタマイズ用のcssをコピペします。
ヘッダー画像に合わせてカラーバリエーションをご利用ください。
カラーピッカーが分かる人であれば適宜色を変更してカスタマイズしてみると良いと思います。
h3のアイコンについては24×24pxの透過pngを使用することで自由に変更できます。
h4、h5の見出しのアイコンについてはFont Awesomeを利用すれば膨大なアイコンから選べるようになります。
ワインレッド
辰砂
/*--------------------------------------
辰砂
--------------------------------------*/
/*背景色*/
body {
background: #ebe9e3;
background: linear-gradient(#fff2f2 0%,#e0c5c5 100%);
}
/*ヘッダ*/
#blog-title #blog-title-inner {
background: #f3e2c7;
background: linear-gradient(135deg, #febbbb 0%,#ff5c5c 100%);
}
/*strongタグマーカー*/
.entry-content strong{
background: linear-gradient(#fff 80%, #f7d 20%);
}
/*【薄めの色】*/
.entry-title, .archive-heading {
background: #f6cbdb;
background: linear-gradient(to bottom, #f6cbdb, #eee);
}
h3, h3:before {
background: #f6cbdb;
}
h3:before {
/*24×24pxの透過pngを使用*/
background-image: url(https://cdn-ak.f.st-hatena.com/images/fotolife/A/AzuLitchi/20190207/20190207210050.png);
background-repeat: no-repeat;
background-position: center center;
}
/*見出しのアイコン*/
h4:before,h5:before{
font-family: "blogicon";
content: "\f048";
}
h4 {
border-color: #f6cbdb;
}
h4:before {
color: #f6cbdb;
}
/*【ここ以降濃い目の色】*/
.pager a {
color: #d78faa;
}
.pager-next a:before, .pager-prev a:before {
background-color: #d78faa;
}
#bottom-editarea {
border-color: #d78faa;
}
/* leadの囲み*/
.entry-content .lead {
border-color:#d78faa;
}
.entry-content .lead:before, .entry-content .lead:after {
background-color: #d78faa;
}
緑青
/*--------------------------------------
緑青
--------------------------------------*/
/*背景色*/
body {
background: #ebe9e3;
background: linear-gradient(#E0EAC7 0%,#8DB28B 100%);
}
/*strongタグマーカー*/
.entry-content strong{
background: linear-gradient(#fff 80%, #fcf8 20%);
}
/*【薄めの色】*/
.entry-title, .archive-heading {
background: #b8ebb3;
background: linear-gradient(to bottom, #b8ebb3, #eee);
}
h3, h3:before {
background: #b8ebb3;
}
/*見出しのアイコン*/
h4:before,h5:before{
font-family: "blogicon";
content: "\f00d";
}
h4 {
border-color: #b8ebb3;
}
h4:before {
color: #b8ebb3;
}
/*-----【ここ以降は濃い目の色を設定】-----*/
/*「次のページ」「前のページ」のボタンの色*/
.pager a {
color: #578a64;
}
.pager-next a:before, .pager-prev a:before {
background-color: #578a64;
}
#bottom-editarea {
border-color: #578a64;
}
/* leadの囲み*/
.entry-content .lead {
border-color:#578a64;
}
.entry-content .lead:before, .entry-content .lead:after {
background-color: #578a64;
}
紫雲
/*--------------------------------------
紫雲
--------------------------------------*/
/*背景色*/
body {
background: #e4cce5;
background: linear-gradient(#e4cce5 0%,#bc8fb9 100%);
}
/*strongタグマーカー*/
.entry-content strong{
background: linear-gradient(#fff 80%, #f7d 20%);
}
/*【薄めの色】*/
.entry-title, .archive-heading {
background: #dec6eb;
background: linear-gradient(to bottom, #dec6eb, #eee);
}
h3, h3:before {
background: #dec6eb;
}
/*見出しのアイコン*/
h4:before,h5:before{
font-family: "blogicon";
content: "\f02d";
}
h4 {
border-color: #dec6eb;
}
h4:before {
color: #dec6eb;
}
/*【ここ以降濃い目の色】*/
.pager a {
color: #8c6b9d;
}
.pager-next a:before, .pager-prev a:before {
background-color: #8c6b9d;
}
#bottom-editarea {
border-color: #8c6b9d;
}
/* leadの囲み*/
.entry-content .lead {
border-color:#8c6b9d;
}
.entry-content .lead:before, .entry-content .lead:after {
background-color: #8c6b9d;
}
