※クリックすると該当箇所に移動します

  1. 1．ベースカラーの変更
  2. 2．ベースカラーに薄い色を設定したときの文字色の修正
  3. 3．フラットデザインにする

 

主要部分のベースカラー(色)を変更することで
デザインに使っているグラデーション背景やボーダーをお好みの色で設定できます。

 

 

 

 

1．ベースカラーの変更

 

CSS の ■ベースカラー の次の記述を変更してください。

2ヶ所のカラーコード #000080 をお好みの色に変更してください。

 

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■ベースカラー  2ヶ所のカラーコードを変更ください
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
#header-navi-outer,#globalmenu-outer,#globalmenu a:hover,.sidebar-title-outer,.sidebar-title,.sidetitle,#footer2-outer,.article-title-outer,.article-title,.readmore a:hover,.kijilist-title-outer,.kijilist-title,.post-title-outer,.post-title,.cm-title-outer,.cm-title,.tb-title-outer,.tb-title,.ul-kl li a:hover:before,.kl-cat a:hover,.kl-read a:hover,.navi-return a:hover,.pagination a:hover,.cm-btn:hover,button:hover,.message-title,#rssRegist:hover {
    background: #000080;
}

#header1,#footer2-outer,.article-title-outer,.kijilist-title-outer,.post-title-outer,.cm-title-outer,.tb-title-outer {
    border-style: solid;
    border-color: #000080;
}

 

※参考：カラーコード表　http://www.colordic.org/

 

 

 

 

2．ベースカラーに薄い色を設定したときの文字色の修正

 

ベースカラーに薄い色を設定したとき
次の箇所の文字が読み辛くなり修正が必要な場合があります。

 

●通常時とホバー時の文字色
ヘッダー上ナビ、フッター

●ホバー時の文字色
グローバルメニュー、続きを読む、記事一覧（カテゴリ・記事を読む）、コメント送信ボタン、ページナビ(トップに戻る)、ページナビ1・2(前後ページ)

 

文字色の修正が必要なときは

CSS の ■文字色 の次の記述を変更してください。

 

/*----------------------
ベースカラー部分  #fff
------------------------*/
/*link*/
#header-navi,#header-navi a,.style01,#footer2,#footer2 a,#menuOpen:before {
    color: #fff;
}

/*hover*/
#header-navi a:hover,#globalmenu a:hover,#footer2 a:hover,.readmore a:hover,.kl-cat a:hover,.kl-read a:hover,.navi-return a:hover,.pagination a:hover,.cm-btn:hover,button:hover,#menuOpen:hover:before {
    color: #fff;
}
.ul-kl li a:hover:after {
    border-color: #fff;
}

6行目の #fff を #777 などに変更してください。

11・14行目の #fff を #a00 などに変更してください。

 

 

 

 

3．フラットデザインにする

 

グラデーションなどで立体的に見せず単色系で見せる「 フラットデザイン 」にもできます。

 

CSS の ■表示制御 の次の記述を変更してください。

 

/*フラットデザインは適用*/
/*
#header1,#header-navi-outer,#header-navi,#globalmenu-outer,.sidebar-title-outer,.sidebar-title,.sidetitle,#footer2-outer,.article-title-outer,.article-title,.readmore a:hover,.kijilist-title-outer,.post-title-outer,.cm-title-outer,.tb-title-outer,.kijilist-title,.post-title,.cm-title,.tb-title,.message-title,.kl-cat a,.kl-date,.kl-cat a:hover,.kl-read a:hover,.cm-btn,button,.cm-btn:hover,button:hover,.navi-return a:hover,.pagination a,.pagination a:hover {background-image: none;}

 

灰色行の /* を削除ください。