Wedges.bin

はてなブログでWEBデザイン

テーマ〈Rouge〉でのアクセントカラーの変更手順

このテーマのアクセントカラーは、「赤」ですが、簡単に変更可能です。

1. ダッシュボードから「デザイン」を選択

f:id:wedges:20150123201654j:plain


2. レンチアイコンの「カスタマイズ」を選択

f:id:wedges:20150123201704j:plain


3. 「デザインCSS」を選択

f:id:wedges:20150123201718j:plain


下記のCSSをコピーします。

#blog-title,
.entry-see-more,
.entry-content h2 {
background-color: #008fde; /* base color */
}
.entry-content h3,
.entry-content h4,
.page-archive .archive-entries .entry-title {
border-color: #008fde; /* base color */
}
.entry-content h2:after {
border-top-color: #008fde; /* base color */
}
.entry-see-more:hover {
background-color: #00a4de; /* right color */
}

4. 既にある記述の下に、追加する形で挿入します。

f:id:wedges:20150123201727j:plain


5. 「変更を保存する」とデザインが変わります。

f:id:wedges:20150123202624p:plain




ベースカラー「008fde」の3箇所と、ベースカラーの明るめな色「00a4de」を変更することで、他のお色にもできます。(明るめな色は、「続きを読む」のカーソルを合わせた時の色です。)




下記のサイトでは、ベースカラーを「ffa500」、明るめな色「ffc965」にしています。

http://www.coooook.com/entry/pancake


f:id:wedges:20150124103205p:plain


色の変更に役立つサイトをまとめたので、こちらもどうぞ。