元々は賢威のカテゴリー背景色を自分好みの色にカスタマイズするための忘備録・備忘録的な記事でしたが・・SWELLなどの他のWPテーマ(テンプレート)でもカスタマイズの時に参考になるかと思います。
【今回の記事がおススメな人】
・カテゴリーの背景色をカスタマイズしたい人
・色のサンプルで違った色を知りたい人
・金・銀・銅のカラーコードが知りたい人
実は・・
賢威のカテゴリー表示の背景色は(特に賢威8スタンダード)は地味です。
個性を出したい、という時があります。それで・・
【結論】
・ワードプレスで賢威を使用する時のカテゴリー背景色を変える際のサンプルを説明します。⇒ 色コードでカスタマイズしてみてください。
※ 賢威8を使っているとの仮定でカテゴリー色をカスタマイズするためにパステルカラー風にしました。
・金、銀、銅の色コードも掲載しました。WPのカスタマイズだけでなく(名刺やチラシ等の)デザインなどにも応用できるかと思います。
スポンサードリンク
WPテーマのカテゴリー背景色を淡い色に変えるサンプルコード
記事の投稿でカテゴリーがあります。
当初のワードプレス(WP)と賢威との組み合わせでは、カテゴリーの表示・背景色が薄いグレーになっています。
ましてやブログそのものが華やかなイメージでありませんので少しだけアクセント欲しさにカテゴリーのタイトル表示の背景色をカラー化するものです。
今回ご案内するのは私が好んで使っていた背景色です。ご了承ください。文字色は #fff または #ffffff(白色)にしています。(一部黒)
\ パステルカラー風のカラーコードになっています /
【カラーサンプル】
渋い赤・#dd6673
(RGB=221,102,115)
オレンジ・#e8ac51
(232,172,81)
オレンジ・#f88b4d
248,139,77
薄いオレンジよりも薄いオレンジ・#f8b551
(ベージュの薄い感じ)
248,181,81
オレンジ・ベージュ・#febe31
254,190,49
オレンジ・ベージュ・#fed271
254,210,113
さらに薄いオレンジ・ベージュ(文字・黒)・#fffde7
255,253,231
青・#4784bf
71,132,191
薄い~濃いブルー・#7ec0ee
126,192,238
薄い水色・#68d0ef
104,208,239
薄いブルー・#b5def8
181, 222, 248
薄いブルー(文字・黒)・#e1f5fe
225, 245, 254
紫・#a55b9a
165, 91, 154
薄い紫・#c490bf
196, 144, 191
薄いピンク・#ff9da6
255, 157, 166
緑・#39a869
57, 168, 105
薄いモスグリーン・#aac863
170, 200, 99
薄いモスグリーン・#b3d465
179, 212, 101
薄いグリーン・#4df8a3
77, 248, 163
薄い薄いミドリ(文字・黒)・#e1ffda
225, 255, 218
少し濃いグレー・#8f8f8f
143, 143, 143
薄いグレー・#cfcfcf
207, 207, 207
薄いグレー(文字・黒)・#f2f2f2
242, 242, 242
薄いグレー(文字・黒)・#faf9f5
250, 249, 245
濃いこげ茶・#4b3a24
75,58,36
さりげないアクセント化です。
蛍光ペンのようにきつい感じの色ではありませんので割と気に入っています。
金・銀・銅のカラーコード
金・#c4a76b
196, 167, 107
金・#b48f43
180, 143, 67
金・#f3d367
243, 211, 103
金・#ffd700
255, 215, 0
銀・#c9caca
201,202,202
銀・#808080
128,128,128
銀・#c0c0c0
192, 192, 192
銅・#8c4841
140, 72, 65
銅・#b87333
184, 115, 51
銅・#ac6b25
172, 107, 37
銅・#815a2b
129, 90, 43
銅・#c47222
196, 114, 34
銅・#b01015
176, 16, 21
そもそも人によって色のとらえ方は違いますし、パソコン・スマホの「画質」によっても違ってきます。ということは・・あなたが見ている色と同じものを他の人が見ても、違う色に感じていることもある、ということだけは忘れないようにしたいものです。
まとめ
あまりデザイン的なものに注力し過ぎると肝心の記事作成やSEOがおろそかになります。ほどほどにすることが大切です。
【まとめ】
・自分好みのサイト・ブログにカスタマイズすることは、とりわけデザイン面などは「キリ」がありません。
・デザイン面でのカスタマイズが、極端に集客や滞在時間の面でプラスの影響を及ぼすことはないものです。
・注力すべきことは、コンテンツの質をあげる(オリジナルの度合を強める)こと、回遊性を高めること、など大切にすべきことを見失わないようにしてください。
別記事でカラーコードについて解説したものも参考にしてみてください。
\ カラーコード(別記事)/
⇒ 色(カラー)コードのサンプル
ここまで本当にありがとうございました。
【追伸】
私が個人的に好きな「青色」です。「#39f」または「#3399ff」です。カラーコードは「51,153,255」です。
#39f(#3399ff)
51,153,255
スポンサードリンク