Yumekawa

このブログは特別なカスタマイズをしていますのでテーマデフォルトのデザインとは異なります。

着せ替え用CSSコード

yumekawaテーマのメインカラーを変更する着せ替え用CSSコードを用意しました。
以下のコードを参考にアレンジしてみて下さい。そのまま貼ると現在のこのブログのように水色メインになります。

f:id:minimalgreen:20170814211347p:plain

/* 着せ替え用コード */

body {
  background-color: #fdfaf2;/* ブログ背景色 */
}
html, body {
  color: #555;/* 基本文字色 */
}
/* ブログタイトル */
#title a, #blog-description {
  color: #555;
}
/* リンク色 */
a,a:visited {
  color: #8AEAEA;
  text-decoration: none;
}
a:hover {
  color: #fbdfce;
  text-decoration: underline;
}
/* 記事タイトル周り */
.entry-header::after {
  width: 100%;
  background: -webkit-repeating-linear-gradient(-45deg, #ceeafb, #ceeafb 5px, #E7FAFA 5px, #E7FAFA 10px);
  background: repeating-linear-gradient(-45deg, #ceeafb, #ceeafb 5px, #E7FAFA 5px, #E7FAFA 10px);
}
/* サイドバータイトル */
.hatena-module-title {
  background-color: #ceeafb;
}

/* コメント */
.leave-comment-title {
  color: #ceeafb;
  border: 1px solid #ceeafb;
}
.leave-comment-title:hover {
  color: #ceeafb;
  opacity: 0.7;
}
/* 日付 */
.date {
  color: #ceeafb;
}
.date a {
  color: #ceeafb;
}
/* カテゴリー */
.categories {
  color: #fff;
}
.categories a {
  color: #fff;
  background-color: #ceeafb;
}
.categories a:hover {
  color: #f8bdbd;
  background: -webkit-repeating-linear-gradient(-45deg, #ceeafb, #ceeafb 2px, #fff 2px, #fff 4px);
  background: repeating-linear-gradient(-45deg, #ceeafb, #ceeafb 2px, #fff 2px, #fff 4px);
}
.page-archive .categories a {
  color: #fff;
  background: #ceeafb;
}

/* 見出しの色 */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover, h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited, .archive-heading {
  color: #555;
}
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 {
  color: #555;
}
.entry-content h2 {
  color: #555;
  border-left: 5px solid #77B8DA;
  background: repeating-linear-gradient(90deg, #edf5f4, #edf5f4 10px, #f6faf9 0, #f6faf9 20px);
}
.entry-content h3::before {
  background-color: #ceeafb;
}
.entry-content h3::after {
  background-color: #efefef;
}
.entry-content h4 {
  color: #555;
  border-bottom: 2px solid #ceeafb;
}
.entry-content h4::before {
  background-color: #ceeafb;
}
.entry-content h4::after {
  top: .7em;
  left: .7em;
  width: 13px;
  height: 13px;
  background-color: #f6faf9;
}

/*続きを読む*/
a.entry-see-more {
  background: #ceeafb;
  border: 1px solid #ceeafb;
  color: #fff;
}
a.entry-see-more::after {
  border: 2px dashed #fff;
}
a.entry-see-more:hover {
  color: #ceeafb;
  background-color: #fff;
  border: 2px dashed #ceeafb;
}

/* ナビゲーション */
nav#slide-menu {
  background: #ceeafb;
}
nav#slide-menu ul {
  background: #ceeafb;
}
nav#slide-menu li:hover>a {
  background: #fbdfce;
  color: #fff;
}
nav#slide-menu li ul li,
nav#slide-menu li ul li a,
nav#slide-menu li:hover ul {
  background: #ceeafb;
}

nav#slide-menu li ul li:hover {
  background: #fbdfce;
}
@media only screen and (max-width:1000px) {
  div.menu-trigger {
    background: #ceeafb;
    color: #fff;
  }
}

/* フッタ */
#footer {
  background: #ceeafb;
}

/* pager */
.pager .pager-next, .pager .pager-prev {
  background: -webkit-repeating-linear-gradient(-45deg, #ceeafb, #ceeafb 5px, #fff 5px, #fff 10px);
  background: repeating-linear-gradient(-45deg, #ceeafb, #ceeafb 5px, #fff 5px, #fff 10px);
}
.pager .pager-next:hover, .pager .pager-prev:hover {
  border: 1px solid #ceeafb;
  color: #ceeafb;
}
.pager-next a, .pager-prev a {
  color: #555;
}
/* アーカイブページタイトル */
.archive-heading {
  color: #ceeafb;
}

/* シェアボタン */
.sns-share {
  background: repeating-linear-gradient(90deg, #edf5f4, #edf5f4 10px, #f6faf9 0, #f6faf9 20px);
}