wordpressカテゴリ別にカラフル色をつける「Colorful Categories」

公開日: プラグイン  ,

閲覧所要時間: 約 2

ELFA79_jellybeanssk_TP_V4

Colorful Categoriesの標準はウィゼットに配置する使い方なのですが

今回は個別記事の日付の横などのカテゴリの部分に色を付けるやり方をメモ書きしたいと思います。

通常のウィゼットは以下のように表示されます

20171221190703

通常個別記事の表示は以下のように表示されます

20171221190905

を以下のようにカテゴリ別に色を付けます

20171221194902

1、まずはテーマフォルダ中の記事のループのカテゴリを表示している構文を下記に置き換えます

foreach構文を使うことで複数カテゴリを指定していても別々に繰り返し取得

「$color」に「Colorful Categories」で指定した色の16進数を格納しそれをliタグに別個にスタイルbackground-colorを指定して代入

2、CSSは以下を参考にお好きにアレンジしてください

Colorful Categoriesの説明

すばらしいスタイルの新しいカテゴリウィジェット!

カテゴリウィジェットに色を付ける

すべてのカテゴリを自分の色で作成します。

すべての色はタームメタ変数として保存されます。

使い方は簡単でプラグインをインストールして有効にすれば後は表示させたいウィゼットに入れるだけです。

 関連記事-こちらもどうぞ

 タグ関連記事

20160414162918

最新記事にNEWマークをつける

Simplicityのテーマを使って最新記事にNEWマーク 上の画像のように新しい記事にNEWマークがつきます ソースは以下で配布しています http://codepen.io/Hidekichi...

記事を読む

20160415143032

STINGER7のpowerd byを変える

STINGER7のpowerd byを変えるのに手間取ったので備示録しておきます STINGER7のpowerd byを変えるには JSのフォルダーの中にあるbase.jsを探します! ...

記事を読む

PAK145152501_TP_V

wordpressのトップ表示を記事更新順に表示する方法

あまり記事を更新しないブログで追記が多いブログには良いかなと思い私も導入しました。 例えば去年の今日のブログを更新すると一番目に表示されます。 私もかなり昔に無料ブログを使っていた頃は確かデフ...

記事を読む

LIG_h_officezangyousurudansei_TP_V4.jpg

トップページ(ホーム)だけ表示させて個別記事には表示させない方法(wordpress編)

トップページにだけ表示する方法 [crayon-5a60537415efd050072737/] トップページにだけ表示しない方法 [crayon-5a60537415f0...

記事を読む

20160730101213

スマホとPCで表示する内容を変える(wordpress)

WordPressでスマホとPCで表示する広告や内容を好きなように変える方法 WordPressでレスポンシブ対応のテーマなどを使ってるとダラダラと表示されて一番最後まで辿りつくのに途中で...

記事を読む

ブログ管理者などによく売れてる本です

コメントを残す

更新情報

ご挨拶  更新日: 11月05日
20180114005419.jpg
WordPressテーマ国産品の無料テーマchameleonの紹介

chameleonの特徴 1、シンプル なデザイン 2、ヘ

PAK58_kiokuyorikiroku_TP_V.jpg
エックスサーバーでSimplicityをカスタマイズしても反映されない

久々にwordpressテーマSimplicityのカスタマイズを

74281b8770b9cc5360dbb3bb37f84352_s.jpg
グローバルメニューをスクロール固定する【Simplicity2】

グローバルメニューをヘッダーの一番上に固定する方法を紹介したいと思い

b27a471af36017d6c98acf63487003b3_s.jpg
LiteSpeed CacheをONにするとアフィリエイト広告が表示されない現象

アフィリエイト広告を貼り付けても広告が表示されない現象 問題は

050b4e229c4b4c1f7cf100a204f2c35d_s.jpg
Simplicityのテーマを使って3つハマった事

1、バイラルサイトっぽいFacebookフォローエリアを作成する方

→もっと見る


スポンサードリンク