【WPカスタマイズ】カテゴリーの背景色をパステルカラー風の自分好みの色にカラー化する:金・銀・銅含む38色

WPカスタマイズ・カラーやカテゴリー背景色をパステルカラー風に変えるイメージ画像

元々は賢威のカテゴリー背景色を自分好みの色にカスタマイズするための忘備録・備忘録的な記事でしたが・・SWELLなどの他のWPテーマ(テンプレート)でもカスタマイズの時に参考になるかと思います。

【今回の記事がおススメな人】
・カテゴリーの背景色をカスタマイズしたい人
・色のサンプルで違った色を知りたい人
・金・銀・銅のカラーコードが知りたい人

実は・・

賢威のカテゴリー表示の背景色は(特に賢威8スタンダード)は地味です。
個性を出したい、という時があります。それで・・

【結論】
・ワードプレスで賢威を使用する時のカテゴリー背景色を変える際のサンプルを説明します。⇒ 色コードでカスタマイズしてみてください。
※ 賢威8を使っているとの仮定でカテゴリー色をカスタマイズするためにパステルカラー風にしました。
・金、銀、銅の色コードも掲載しました。WPのカスタマイズだけでなく(名刺やチラシ等の)デザインなどにも応用できるかと思います。

スポンサードリンク

目次

WPテーマのカテゴリー背景色を淡い色に変えるサンプルコード

賢威カテゴリーの背景色を変更する

記事の投稿でカテゴリーがあります。
当初のワードプレス(WP)と賢威との組み合わせでは、カテゴリーの表示・背景色が薄いグレーになっています。

ましてやブログそのものが華やかなイメージでありませんので少しだけアクセント欲しさにカテゴリーのタイトル表示の背景色をカラー化するものです。

秋田秀一

今回ご案内するのは私が好んで使っていた背景色です。ご了承ください。文字色は #fff または #ffffff(白色)にしています。(一部黒)

\ パステルカラー風のカラーコードになっています /

【カラーサンプル】
渋い赤・#dd6673
(RGB=221,102,115)

カラーコード#dd6673のイメージ画像

オレンジ・#e8ac51
(232,172,81)

カラーコード#e8ac51のイメージ画像

オレンジ・#f88b4d
248,139,77

カラーコード#f88b4dのイメージ画像

 薄いオレンジよりも薄いオレンジ・#f8b551
(ベージュの薄い感じ)
248,181,81

カラーコード#f8b551のイメージ画像

オレンジ・ベージュ・#febe31
254,190,49

カラーコード#febe31のイメージ画像

オレンジ・ベージュ・#fed271
254,210,113

カラーコード#fed271のイメージ画像

さらに薄いオレンジ・ベージュ(文字・黒)・#fffde7
255,253,231

カラーコード#fffde7のイメージ画像

青・#4784bf
71,132,191

カラーコード#4784bfのイメージ画像

薄い~濃いブルー・#7ec0ee
126,192,238

カラーコード#7ec0eeのイメージ画像

薄い水色・#68d0ef
104,208,239

カラーコード#68d0efのイメージ画像

薄いブルー・#b5def8
181, 222, 248

カラーコード#b5def8のイメージ画像

薄いブルー(文字・黒)・#e1f5fe
225, 245, 254

カラーコード#e1f5feのイメージ画像

紫・#a55b9a
165, 91, 154

カラーコード#a55b9aのイメージ画像

薄い紫・#c490bf
196, 144, 191

カラーコード#c490bfのイメージ画像

薄いピンク・#ff9da6
255, 157, 166

カラーコード#ff9da6のイメージ画像

緑・#39a869
57, 168, 105

カラーコード#39a869のイメージ画像

薄いモスグリーン・#aac863
170, 200, 99

カラーコード#aac863のイメージ画像

薄いモスグリーン・#b3d465
179, 212, 101

カラーコード#b3d465のイメージ画像

薄いグリーン・#4df8a3
77, 248, 163

カラーコード#4df8a3のイメージ画像

薄い薄いミドリ(文字・黒)・#e1ffda
225, 255, 218

カラーコード#e1ffdaのイメージ画像

少し濃いグレー・#8f8f8f
143, 143, 143

カラーコード#8f8f8fのイメージ画像

薄いグレー・#cfcfcf
207, 207, 207

カラーコード#cfcfcfのイメージ画像

薄いグレー(文字・黒)・#f2f2f2
242, 242, 242

カラーコード#f2f2f2のイメージ画像

薄いグレー(文字・黒)・#faf9f5
250, 249, 245

カラーコード#faf9f5のイメージ画像

濃いこげ茶・#4b3a24
75,58,36

カラーコード#4b3a24のイメージ画像
秋田秀一

さりげないアクセント化です。
蛍光ペンのようにきつい感じの色ではありませんので割と気に入っています。

金・銀・銅のカラーコード

金・銀・銅のカラーコードイメージ画像

金・#c4a76b
196, 167, 107

カラーコード#c4a76bのイメージ画像

金・#b48f43
180, 143, 67

カラーコード#b48f43のイメージ画像

金・#f3d367
243, 211, 103

カラーコード#f3d367のイメージ画像

金・#ffd700
255, 215, 0

カラーコード#ffd700のイメージ画像

銀・#c9caca
201,202,202

カラーコード#c9cacaのイメージ画像

銀・#808080
128,128,128

カラーコード#808080のイメージ画像

銀・#c0c0c0
192, 192, 192

カラーコード#c0c0c0のイメージ画像

銅・#8c4841
140, 72, 65

カラーコード#8c4841のイメージ画像

銅・#b87333
184, 115, 51

カラーコード#b87333のイメージ画像

銅・#ac6b25
172, 107, 37

カラーコード#ac6b25のイメージ画像

銅・#815a2b
129, 90, 43

カラーコード#815a2bのイメージ画像

銅・#c47222
196, 114, 34

カラーコード#c47222のイメージ画像

銅・#b01015
176, 16, 21

カラーコード#b01015のイメージ画像
秋田秀一

そもそも人によって色のとらえ方は違いますし、パソコン・スマホの「画質」によっても違ってきます。ということは・・あなたが見ている色と同じものを他の人が見ても、違う色に感じていることもある、ということだけは忘れないようにしたいものです。

まとめ

カラーコード・パステルカラー風・金銀銅のまとめイメージ画像
秋田秀一

あまりデザイン的なものに注力し過ぎると肝心の記事作成やSEOがおろそかになります。ほどほどにすることが大切です。

【まとめ】
・自分好みのサイト・ブログにカスタマイズすることは、とりわけデザイン面などは「キリ」がありません。
・デザイン面でのカスタマイズが、極端に集客や滞在時間の面でプラスの影響を及ぼすことはないものです。
・注力すべきことは、コンテンツの質をあげる(オリジナルの度合を強める)こと、回遊性を高めること、など大切にすべきことを見失わないようにしてください。

別記事でカラーコードについて解説したものも参考にしてみてください。

\ カラーコード(別記事)/
色(カラー)コードのサンプル

ここまで本当にありがとうございました。

【追伸】
私が個人的に好きな「青色」です。「#39f」または「#3399ff」です。カラーコードは「51,153,255」です。

#39f(#3399ff)
51,153,255

カラーコード#39f #3399ffのイメージ画像

スポンサードリンク

WPカスタマイズ・カラーやカテゴリー背景色をパステルカラー風に変えるイメージ画像

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

秋田秀一のアバター 秋田秀一 コンサル・ネットビジネス

元銀行員・約30年勤めて定年退職後にコンサル・ネットビジネスで起業しました。メルカリ副業から始めてわらしべ長者になる方法(講座)をご案内しています。借金返済・(起業・副業・開業での)資金調達のご相談も遠慮なくどうぞ。※ 550円本はメルカリに出品しています。@eyumekanau

目次