Demo Blog

はてなブログオリジナルデザインテーマ「Minimal Green」のデモブログです。2カラム、レスポンシブデザイン対応。CSSのコードやブログカスタマイズなどについて。

このブログはURL変更しました。リンクなどはhttp://design.syofuso.com/へよろしくお願いします。

まとめて色を変更するCSSコード、ピンク、水色

まとめて色を変更するコード、ピンク、水色を用意しました。デザインCSSに貼り付けてお使い下さい。

ピンク系 #E9546B薔薇色

f:id:syofuso_sub:20160728182449j:plain


/*アクセントカラーピンクCSS*/
/*リンク文字の色*/
a {
  color: #E9546B;  /*アクセントカラー*/
}
a:hover {
  color: #EDB4BD; /*ライトカラー*/
}
a:visited {
  color: #d35889;
}

.entry-content h3 {
  border-left: 3px solid #E9546B;  /*左横バーの色*/
}

.entry-content h4::before {
	background: #E9546B;
}
.entry-content h4::after {
	background: #EDB4BD;
}
.hatena-module-title {                     /*サイドバーモジュールタイトル*/
  color: #E9546B;             /*サイドバータイトルの色*/
}

.hatena-module-title a {
  color: #E9546B;
  text-decoration: none;
}

/* urllist module
    リンク・最新記事・最近のコメント・月別アーカイブ・カテゴリモジュールは .hatena-urllist という共通の class が振られます
*/
.hatena-urllist li a {
  color: #E9546B;
}

.hatena-urllist li a:hover {
  text-decoration: underline;
  color: #EDB4BD;
}
.entry-header .date{border:3px solid #E9546B;     /*日付を囲む○の枠の色*/
background:#fff;                           /*背景色*/
color:#E9546B!important;                  /*日付の文字の色*/
}
.entry-header .date a{
color:#E9546B!important;                  /*日付の文字の色*/
}
.archive-entry .date a{color:#E9546B!important;       /*アーカイブページの日付の文字の色*/
}

.entry-see-more {
    background-color: #E9546B!important;      /*背景色*/
    color: #fff!important;                /*続きを読むの色*/
}
.entry-see-more:hover {
    background-color:#EDB4BD!important;    /*ホバーした時の背景色*/
    opacity: 0.5;                       /*ホバーした時の半透明にする*/
}

/* カテゴリー */

.categories a {
	border: 1px solid #E9546B;  /*カテゴリーを囲む枠の色*/
  color:#E9546B!important;               /*カテゴリー文字の色*/

}
.categories a:hover {
	color: #EDB4BD!important;           /*カテゴリー文字の色ホバー*/
	background-color: #fff;   /*カテゴリー枠の背景色*/
}
.categories a:visited {
	color: #d35889!important;           /*カテゴリー文字の色訪問済み*/
}
.page-archive .categories a {
  color: #fff;        /*アーカイブページのカテゴリーの色*/
  background: #E9546B!important;      /*アーカイブページのカテゴリーの背景色*/
}

/* Pager */
.pager a{
	color:#E9546B;  /*次への文字の色*/

}

.pager-next a:before,.pager-prev a:before{
	background-color:#E9546B; /*円の背景色*/
	color:#fff;        /*中の矢印マークの色*/
}

/*ページ上部へ戻る*/
.pagetop a{ background-color:#E9546B!important;
}
.pagetop a:hover{ background-color:#EDB4BD!important;
opacity:0.5;
}

<!-- グローバルメニューCSSここから -->
#menu{
    width: 100%;
    margin: 0 auto;
    background: #E9546B;/*7*/
}
#menu-inner{
    width: 100%;

    height: 40px;/*2*/
    margin: 0 auto;
    background: #E9546B;/*8*/
}

#menu-content > li > a{
    background: #E9546B;/*9*/
    color: #fff;/*10*/
}
#menu-content > li > a:hover{
    background: #EDB4BD;/*11*/
    color: #fff;/*12*/
  opacity :0.8;
}
/*2階層目*/

#menu-content > li > ul.second-content > li > a{
    background: #E9546B;/*13*/
    color: #fff;/*14*/
}
#menu-content > li > ul.second-content > li > a:hover{
    background: #EDB4BD;/*15*/
    color: #fff;/*16*/
}
/*******トグルメニュ*********/
@media screen and (max-width:960px){/*19*/
#menu-btn{
    background: #E9546B;/*17*/
    color: #fff;/*18*/
}
/*グローバルメニューCSSここまで*/

水色系 #89C3EB勿忘草(わすれなぐさ)

f:id:syofuso_sub:20160728182518j:plain

/*アクセントカラー水色CSS*/
/*リンク文字の色*/
a {
  color: #89C3EB;  /*アクセントカラー*/
}
a:hover {
  color: #8AEAEA; /*ライトカラー*/
}
a:visited {
  color: #789DAE;
}

.entry-content h3 {
  border-left: 3px solid #89C3EB;  /*左横バーの色*/
}

.entry-content h4::before {
	background: #89C3EB;       /*中見出し○*/
}
.entry-content h4::after {     /*中見出し○影*/
	background: #8AEAEA;
}
.hatena-module-title {                     /*サイドバーモジュールタイトル*/
  color: #89C3EB;             /*サイドバータイトルの色*/
}

.hatena-module-title a {
  color: #89C3EB;
  text-decoration: none;
}

/* urllist module
    リンク・最新記事・最近のコメント・月別アーカイブ・カテゴリモジュールは .hatena-urllist という共通の class が振られます
*/
.hatena-urllist li a {
  color: #89C3EB;
}

.hatena-urllist li a:hover {
  text-decoration: underline;
  color: #8AEAEA;
}
.entry-header .date{border:3px solid #89C3EB;     /*日付を囲む○の枠の色*/
background:#fff;                           /*背景色*/
color:#89C3EB!important;                  /*日付の文字の色*/
}
.entry-header .date a{
color:#89C3EB!important;                  /*日付の文字の色*/
}
.archive-entry .date a{color:#89C3EB!important;       /*アーカイブページの日付の文字の色*/
}

.entry-see-more {
    background-color: #89C3EB!important;      /*背景色*/
    color: #fff!important;                /*続きを読むの色*/
}
.entry-see-more:hover {
    background-color:#8AEAEA!important;    /*ホバーした時の背景色*/
    opacity: 0.5;                       /*ホバーした時の半透明にする*/
}

/* カテゴリー */

.categories a {
	border: 1px solid #89C3EB;  /*カテゴリーを囲む枠の色*/
  color:#89C3EB!important;               /*カテゴリー文字の色*/

}
.categories a:hover {
	color: #8AEAEA!important;           /*カテゴリー文字の色ホバー*/
	background-color: #fff;   /*カテゴリー枠の背景色*/
}
.categories a:visited {
	color: #789DAE!important;           /*カテゴリー文字の色訪問済み*/
}
.page-archive .categories a {
  color: #fff;        /*アーカイブページのカテゴリーの色*/
  background: #89C3EB!important;      /*アーカイブページのカテゴリーの背景色*/
}

/* Pager */
.pager a{
	color:#89C3EB;  /*次への文字の色*/

}

.pager-next a:before,.pager-prev a:before{
	background-color:#89C3EB; /*円の背景色*/
	color:#fff;        /*中の矢印マークの色*/
}

/*ページ上部へ戻る*/
.pagetop a{ background-color:#89C3EB!important;
}
.pagetop a:hover{ background-color:#8AEAEA!important;
opacity:0.5;
}

<!-- グローバルメニューCSSここから -->
#menu{
    width: 100%;
    margin: 0 auto;
    background: #89C3EB;/*7*/
}
#menu-inner{
    width: 100%;

    height: 40px;/*2*/
    margin: 0 auto;
    background: #89C3EB;/*8*/
}

#menu-content > li > a{
    background: #89C3EB;/*9*/
    color: #fff;/*10*/
}
#menu-content > li > a:hover{
    background: #8AEAEA;/*11*/
    color: #fff;/*12*/
  opacity :0.8;
}
/*2階層目*/

#menu-content > li > ul.second-content > li > a{
    background: #89C3EB;/*13*/
    color: #fff;/*14*/
}
#menu-content > li > ul.second-content > li > a:hover{
    background: #8AEAEA;/*15*/
    color: #fff;/*16*/
}
/*******トグルメニュ*********/
@media screen and (max-width:960px){/*19*/
#menu-btn{
    background: #89C3EB;/*17*/
    color: #fff;/*18*/
}
/*グローバルメニューCSSここまで*/