まとめて色を変更するCSSコード、ピンク、水色
まとめて色を変更するコード、ピンク、水色を用意しました。デザインCSSに貼り付けてお使い下さい。
ピンク系 #E9546B薔薇色
/*アクセントカラーピンク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勿忘草(わすれなぐさ)
/*アクセントカラー水色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ここまで*/