Notice: Undefined offset: 2 in /home/users/0/sub.jp-unicanails/web/libre-co/wp/wp-content/themes/Libreco/functions.php on line 468

Notice: Undefined offset: 3 in /home/users/0/sub.jp-unicanails/web/libre-co/wp/wp-content/themes/Libreco/functions.php on line 471

Notice: Undefined offset: 4 in /home/users/0/sub.jp-unicanails/web/libre-co/wp/wp-content/themes/Libreco/functions.php on line 474

Notice: Undefined offset: 5 in /home/users/0/sub.jp-unicanails/web/libre-co/wp/wp-content/themes/Libreco/functions.php on line 477

Notice: Undefined offset: 6 in /home/users/0/sub.jp-unicanails/web/libre-co/wp/wp-content/themes/Libreco/functions.php on line 480

Notice: Undefined offset: 7 in /home/users/0/sub.jp-unicanails/web/libre-co/wp/wp-content/themes/Libreco/functions.php on line 483

Notice: Undefined offset: 2 in /home/users/0/sub.jp-unicanails/web/libre-co/wp/wp-content/themes/Libreco/functions.php on line 468

Notice: Undefined offset: 3 in /home/users/0/sub.jp-unicanails/web/libre-co/wp/wp-content/themes/Libreco/functions.php on line 471

Notice: Undefined offset: 4 in /home/users/0/sub.jp-unicanails/web/libre-co/wp/wp-content/themes/Libreco/functions.php on line 474

Notice: Undefined offset: 5 in /home/users/0/sub.jp-unicanails/web/libre-co/wp/wp-content/themes/Libreco/functions.php on line 477

Notice: Undefined offset: 6 in /home/users/0/sub.jp-unicanails/web/libre-co/wp/wp-content/themes/Libreco/functions.php on line 480

Notice: Undefined offset: 7 in /home/users/0/sub.jp-unicanails/web/libre-co/wp/wp-content/themes/Libreco/functions.php on line 483
こんにちは、asです
ワードプレスでブログを書いていて、カテゴリーごとに少しスタイルを変えたいと思うことありませんか？
このブログもサーモンピンクが基調色なのですが、ウェブ関係の記事の時にはブルー基調にしたいと思います！ 今はブログを分けたので色分けしてません。が、この方法は使えます！

たった２STEPで簡単に記事の色分けができますので、その方法をシェアします♪
完全なる自己満ですが、ブルー系の方がコードと合う気がしませんか？（笑）

STEP01：カテゴリースラッグをクラスに付与

今回、ヘッダーの色も変えたかったので、ページ全体を囲む要素にカテゴリ名をクラスとして追加することにしました。
bodyタグでも良いですし、任意の場所（このブログではdiv.contents-wrap）に親カテゴリのスラッグを付与します。
こんな感じで、親カテゴリがあれば親カテゴリの、なければ現在のカテゴリのスラッグを表示させます。

<div class="contents-wrap 
//親カテゴリがあれば親カテゴリの、なければ現在のカテゴリのスラッグを表示
<?php 
if($cat->parent){ 
　$parent = get_category($cat->parent); 
　echo $parent->category_nicename; 
　}else{ 
　echo $cat->category_nicename; 
} 
?>
">

この記事は「Webデザイン」内の「WordPress」カテゴリーなので、クラス名は「Webデザイン」のスラッグある「webdesign」が新しく付与されていることが確認できます。 
<div class="contents-wrap webdesign">

STEP02：CSSで装飾

クラスにカテゴリ名が追加されたら、あとはCSSにそのクラス名をつけてスタイルを上書きしていくだけです。
通常の装飾より後に記述してくださいね。
.webdesign header {
    border-bottom-color: #71a7db;
    background-color: #9ac0e5;
}

これでヘッダーの色が青く変わりました！
この調子で変更したいスタイルの箇所を書いていきます♪
たったこれだけ！
簡単に記事の色分けができました