Minimal Green

はてなブログカスタマイズや、HTML、CSS、サイト制作などについて書いています。

まとめて色を変更する 黒系カスタマイズ一例[訂正あり]

まとめてリンク文字や メニューバー、ページャー、続きを読む、サイドバーの色を変更するコードを書きました。
デザインCSSに追加でコピペして下さい。
他の色にもコードを参考に変更してみてください。

追記:セレクタごとに分けました。必要なところをお使いください。指定が適応されない場合はプロパティに!importantを付け加えて下さい。

f:id:syofuso:20160806225121p:plain

アクセントカラー黒系#454545、#303030リンクの色はてなデフォルト#1487bd,#0f5373にする場合のCSSコード(上記スクリーンショットのような感じになります。

/* リンク文字の色*/
a {
  color: #1487bd;
}
a:hover {
  color: #0f5373;
}
a:visited {
  color: #789dae;
}
.entry-content h3 {
color:#303030;/* 大見出しの文字の色 */ } .entry-content h3 { border-left: 3px solid #303030;/*左横バーの色*/ } .entry-content h4 { border-bottom: 2px solid #454545; } .entry-content h4::before { background: #454545; } .entry-content h4::after { background: #ccc; }
/* サイドバーモジュールタイトル */ .hatena-module-title { color: #454545;/* サイドバータイトルの色 */ } .hatena-module-title a { color: #454545; text-decoration: none; } /* urllist module リンク・最新記事・最近のコメント・月別アーカイブ・カテゴリモジュールは .hatena-urllist という共通の class が振られます */ .hatena-urllist li a { color: #1487bd; } .hatena-urllist li a:hover { text-decoration: underline; color: #0f5373; } .entry-header .date{
border:3px solid #303030;/* 日付を囲む○の枠の色 */ background:#fff;/* 背景色 */ color:#303030!important;/* 日付の文字の色 */ } .entry-header .date a{ color:#303030!important;/* 日付の文字の色 */ } .archive-entry .date a{
color:#454545!important;/* アーカイブページの日付の文字の色 */ } .entry-see-more { background-color: #454545!important;/* 背景色 */ color: #fff!important;/* 続きを読むの色 */ } .entry-see-more:hover { background-color:#454545!important;/* ホバーした時の背景色 */ opacity: 0.5;/* ホバーした時の半透明にする */ } /* カテゴリー */ .categories a { border: 1px solid #454545;/* カテゴリーを囲む枠の色 */ color:#454545!important;/* カテゴリー文字の色 */ } .categories a:hover { color: #333!important;/* カテゴリー文字の色 */ background-color: #fff;/* カテゴリー枠の背景色 */ } .categories a:visited { color: #333!important;/*カテゴリー文字の色*/ } .page-archive .categories a { color: #fff;/* アーカイブページのカテゴリーの色 */ background: #454545!important;/* アーカイブページのカテゴリーの背景色 */ } /* Pager */ .pager a{ color:#333; /* 次への文字の色 */ } .pager-next a:before,.pager-prev a:before{ background-color:#454545;/* 円の背景色 */ color:#fff;/* 中の矢印マークの色 */ } /* ページ上部へ戻る */ .pagetop a{
background-color:#303030!important; } .pagetop a:hover{
background-color:#303030!important; opacity:0.5; } /* グローバルメニューCSS */ #menu{ width: 100%; margin: 0 auto; background: #303030;/*7*/ } #menu-inner{ width: 100%; height: 40px;/*2*/ margin: 0 auto; background: #303030;/*8*/ } #menu-content > li > a{ background: #303030;/*9*/ color: #fff;/*10*/ } #menu-content > li > a:hover{ background: #303030;/*11*/ color: #fff;/*12*/ } /* 2階層目 */ #menu-content > li > ul.second-content > li > a{ background: #303030;/*13*/ color: #fff;/*14*/ } #menu-content > li > ul.second-content > li > a:hover{ background: #303030;/*15*/ color: #fff;/*16*/ } /******* トグルメニュ *********/ @media screen and (max-width:960px){/*19*/ #menu-btn{ background: #303030;/*17*/ color: #fff;/*18*/ } /* グローバルメニューCSSここまで */

カスタマイズ目次

  • グローバルメニュー
  • シェアボタン
  • 囲み枠
  • ガーリーデザイン
  • ヘッダー周り
  • フッター周り

はてなブログテーマ制作

有料カスタマイズサービス

有料にてはてなブログ・アメブロ・WordPressカスタマイズ・制作承っております。

 最新記事