カエテンジョイSeesaa版(旧デザインシステム)

ベースカラーの変更

●掲載ソースを追加して正しく表示されないときは次を確認ください。

 

・ソースが文字化けしている可能性があります。一旦テキストエディタに貼り付けて確認してください。

・ご自身で全角スペースを入力している可能性があります。全角スペースを削除してください。

 

●画像は説明用のイメージサンプル画像です。

 

実際のブログや管理画面とは細部の表示が異なる部分がありますので予めご了承ください。

 

●CSS/HTMLソースの行数の番号/色は説明用です。

 

実施のブログでは、行数が違う・行数表示が無い・色が無い、となりますので予めご了承ください。

ベースカラーの変更


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


この説明はアップデート版(2015-12-10以降のリリース分)から適用します




変更方法

書き替えした メインCSSの■ベースカラー の次の箇所で変更します。
3ヶ所のカラーコード #000080 をお好みの色に変更してください。

/*━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■ベースカラー  3ヶ所のカラーコードを変更ください
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━*/
#header-navi-outer,#globalmenu-outer,#globalmenu a:hover,.sidebar-title-outer,.sidebar-title,#footer2-outer,.article-title-outer,.article-title,.postmore 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,.input-submit:hover,button:hover,.message-title,.sidetitle,#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;
}

#header-navi-outer,#globalmenu a:hover,.sidebar-title-outer,#footer2-outer,.navi-return a:hover,.input-submit:hover,button:hover {
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000080', endColorstr='#ffffff/*←変更不可*/',GradientType=0 );/*IE9*/
}

※参考:カラーコード表 http://www.colordic.org/
※カラーコードの後にある ; を削除しないでください。



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

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

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

文字色の修正は メイン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,.postmore a:hover,.kl-cat a:hover,.kl-read a:hover,.navi-return a:hover,.pagination a:hover,.input-submit:hover,button:hover,#menuOpen:hover:before {
    color: #fff;
}
.ul-kl li a:hover:after {
    border-color: #fff;
}

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




ホーム RSS購読 サイトマップ
設置マニュアル SEO対策の設定 カスタマイズ デザイン変更 Seesaa公式マニュアル