【cocoon】カテゴリー名の背景色をカテゴリーごとに変える方法

WordPressテーマcocoonのカテゴリーバッジの色を変える方法 ブログ・HP

cocoonの記事一覧ページ(カテゴリーページ)で、サムネイルの上に小さく出るカテゴリー名のバッジの色を変えたい!

カテゴリーによって色分けされているブログもよくありますよね。

なんだかおしゃれだったので真似したくなりやってみました。

cocoonカテゴリーのタグの色を変える方法

 

バッジの色を変える方法を説明します。記述はコピペでOK!

では行ってみましょう!

スポンサーリンク

【cocoon】カテゴリー名の背景色をカテゴリーごとに変える方法

以下の記述を外観→テーマエディターのスタイルシートに書き足せばOKです。
.cat-label- {background-color: #ffffff;}

 

「ffffff」の部分にお好みの色のカラーコードを当てはめて下さい。

部分●の部分には数字が入るのですが、数字はカテゴリーIDとなっています。

カテゴリーにはそれぞれ番号が不規則に割り振られるので、その番号を確認して●の部分に入れる必要があります。

カテゴリーIDの確認方法は以下の通り。

 

①投稿→カテゴリーへ移動

cocoonカテゴリーのタグの色を変える方法

 

②カテゴリー名にマウスを乗せる

この時画面下のリンク先URLの部分に出てくる「category&tag_ID=●」という部分の

●の数字が、カテゴリーIDです。

cocoonカテゴリーのタグの色を変える方法

 

この数字を、先ほどのCSSの●の部分に当てはめます。

あとはお好みのカラー指定をすれば、カテゴリーバッジの色が代わります!

仕組みがわかれば簡単ですね!

cocoon設定からは出来るのか?

最初はcocoon設定から出来るのかなーと思って色々見てたのですが、

それらしき項目が見つかりませんでした。

カテゴリーのIDはランダムで指定されるのでそう簡単に出来ないのでしょうか。

こうして自分でいじってみると、複雑さがよくわかりますね。

cocoonのようにカスタマイズしやすいテーマを作ってくれた方に本当に感謝です…。

まとめ:【cocoon】カテゴリーバッジの色はカテゴリーIDごとに設定できる

ブログのテーマでcocoonを使っている人は多いと思います。

あなたのブログのデザイン性を上げるために役に立てば嬉しいです!

それにしても、カテゴリーごとにID番号が割り当てられるのは理解できますが、なんでランダムなんでしょう?

謎だ〜。

 

コメント

  1. Dvwvxo より:

    order lipitor atorvastatin 20mg price order lipitor 20mg generic

  2. Xyvqpc より:

    order cipro 500mg pill – cheap amoxiclav buy clavulanate generic

  3. Rfslkk より:

    buy baycip online – buy cephalexin 500mg sale clavulanate over the counter

  4. Tffxdu より:

    buy metronidazole without prescription – order azithromycin pills buy generic azithromycin over the counter

  5. Brhwuf より:

    buy ciplox 500 mg without prescription – order ciprofloxacin 500mg online erythromycin 500mg price

  6. Kfpwjd より:

    buy valtrex generic – buy nemasole order zovirax 400mg generic

  7. Djovds より:

    ivermectin 12mg oral – order ciplox 500 mg online cheap tetracycline 250mg for sale

  8. Mdfxax より:

    furosemide pill – lasix uk order captopril 25mg generic

  9. Yivozh より:

    glycomet ca – order cipro online buy lincomycin cheap

  10. Zmmcfg より:

    zidovudine 300mg tablet – order generic allopurinol buy allopurinol 100mg generic

  11. Okdcnd より:

    clozaril sale – buy perindopril 8mg famotidine usa

  12. Eniwzu より:

    quetiapine tablet – order venlafaxine 75mg online eskalith oral

  13. Yxwbqk より:

    anafranil 50mg cheap – order anafranil 50mg online cost doxepin 75mg

  14. Ergrok より:

    order hydroxyzine 10mg online – brand buspar 10mg buy endep without prescription

  15. Ovaybg より:

    clavulanate oral – myambutol 600mg sale buy ciprofloxacin cheap

  16. Mafqwt より:

    amoxicillin for sale – buy amoxicillin sale cipro online order

  17. Zedarn より:

    purchase zithromax without prescription – oral tindamax generic ciplox 500 mg

  18. Zxmnzy より:

    clindamycin price – cleocin 150mg without prescription buy chloromycetin generic

  19. Lubesp より:

    stromectol otc – how to buy cefaclor purchase cefaclor sale

  20. Mfzcqc より:

    purchase albuterol inhalator online – generic phenergan theo-24 Cr price

  21. Xhkcky より:

    medrol 16 mg over counter – buy fml-forte online order generic azelastine

  22. Ecpsrs より:

    buy desloratadine generic – purchase beclomethasone sale buy ventolin 2mg inhaler

  23. Quuvmi より:

    glyburide 2.5mg cheap – order glyburide for sale forxiga 10mg pill

  24. Ijbvmy より:

    glucophage 500mg cheap – glycomet 1000mg price buy generic precose over the counter

  25. Qmtcvz より:

    order repaglinide online – prandin 2mg for sale jardiance 25mg generic

  26. Oqxmne より:

    terbinafine us – cost lamisil buy griseofulvin without prescription

  27. Szlbta より:

    buy generic semaglutide for sale – glucovance without prescription buy DDAVP without a prescription

  28. Khfvhn より:

    buy ketoconazole without a prescription – nizoral over the counter order generic itraconazole 100mg

  29. Qfbsup より:

    famvir 500mg oral – buy famciclovir without a prescription where to buy valcivir without a prescription

  30. Ixxkae より:

    order lanoxin 250 mg sale – dipyridamole order lasix oral

  31. Bwpelt より:

    metoprolol order – buy benicar 20mg without prescription adalat 10mg oral

  32. Ljjzng より:

    order microzide without prescription – amlodipine online buy generic bisoprolol over the counter

  33. Ilrybn より:

    nitroglycerin drug – buy generic combipres over the counter diovan ca

  34. Qphyed より:

    simvastatin 20mg cost – fenofibrate unicorn atorvastatin anyone

  35. Qeaeou より:

    crestor pills audience – zetia desire caduet buy reflect

  36. Heonlv より:

    viagra professional online short – buy cialis professional twelve levitra oral jelly online whip

  37. Thcnlx より:

    priligy countenance – viagra plus footstep cialis with dapoxetine remove

  38. Vpgidv より:

    cenforce ward – zenegra online harmony brand viagra beside

  39. Pepezr より:

    brand cialis swell – penisole seek penisole supple

  40. Gsxcsv より:

    cialis soft tabs pills blade – valif pills cruel viagra oral jelly online drift

  41. Vxykxm より:

    cenforce anger – zenegra pills inside brand viagra online college

  42. Crsdcx より:

    priligy admiration – udenafil charles cialis with dapoxetine infinite

  43. Recpvl より:

    acne medication ankle – acne treatment frank acne treatment recover

  44. Qghkfp より:

    asthma medication hurt – asthma medication lean asthma treatment consequence

  45. Tkzhlc より:

    uti antibiotics manner – uti treatment broad uti medication send

  46. Hnzzmk より:

    pills for treat prostatitis frantic – pills for treat prostatitis difference prostatitis medications starve

  47. Nzrpol より:

    valacyclovir pills seldom – valacyclovir online flutter valtrex visit

  48. Gypcls より:

    claritin pills snow – claritin pills vision claritin scratch

  49. Djixcc より:

    priligy wink – priligy nevertheless priligy apprehension

  50. Ecjpgt より:

    claritin pills eventual – loratadine undoubted loratadine medication hail

  51. Idkhic より:

    ascorbic acid fire – ascorbic acid shoot ascorbic acid dish

  52. Etugao より:

    promethazine devote – promethazine joy promethazine linger

  53. Xltgvq より:

    biaxin pills former – albendazole add cytotec pills circle

  54. Mfexze より:

    fludrocortisone pills mansion – florinef neighbourhood lansoprazole faith

  55. Whrbkc より:

    order rabeprazole 20mg generic – buy reglan 20mg generic brand motilium 10mg

  56. Vingmn より:

    buy generic bisacodyl – buy liv52 paypal buy cheap generic liv52

  57. Ycdosy より:

    bactrim 960mg canada – keppra 1000mg us tobramycin over the counter

  58. Vmfvpf より:

    purchase hydroquinone creams – buy desogestrel 0.075mg for sale buy duphaston generic

  59. Ayoccj より:

    forxiga 10 mg uk – buy cheap generic sinequan buy precose 50mg pills

  60. Tdjvnd より:

    order griseofulvin – fulvicin 250mg over the counter gemfibrozil 300 mg usa

  61. Vuuezi より:

    dimenhydrinate cheap – where to buy actonel without a prescription actonel order

  62. Manxeg より:

    order enalapril pills – generic doxazosin where to buy latanoprost without a prescription

  63. Sjxrna より:

    buy etodolac 600mg sale – monograph for sale online order pletal generic

  64. Ezknnb より:

    purchase feldene without prescription – purchase feldene for sale order rivastigmine online cheap