「カテゴリー別色分け」はWordPressの記事一覧を魅力的にする答えの一つです。
今回の記事では、カテゴリーの色の選び方で悩んでいる方に対して色の選び方、WordPressでカテゴリー別に色を分けるための実装方法がわからない方向けにソースコードでの実装方法を解説します。
カテゴリー別の色の選び方
WordPressのカテゴリー一覧でカテゴリー別に色を変えるためのソースコード
はじめに：色で変わるサイトの印象
ウェブサイトのデザインにおいて、色は重要な役割を果たします。特に、WordPressで運営されるブログやウェブサイトでは、カテゴリー別の色分けを活用することで、サイトの見た目を向上させることができます。
カテゴリー別色分けのメリット
カテゴリー別に色を分けることには、いくつかの明確なメリットがあります。まず、色を使うことで、各カテゴリーの識別が容易になります。これにより、訪問者は自分が興味のあるコンテンツを素早く見つけやすくなり、サイトのナビゲーションが向上します。また、色分けはサイトのビジュアルアピールを高めることもできます。統一感のある配色を用いることで、ブランドイメージを強化し、訪問者にプロフェッショナルで洗練された印象を与えることが可能です。
色を使うことの心理的効果
色には、人の感情や行動に影響を与える心理的な効果があります。たとえば、青は信頼性や安定感を表す色とされ、金融やビジネス関連のサイトで好んで使われます。一方、赤は情熱や緊急感を伝える色で、アクションを促すコールトゥアクション（CTA）ボタンなどに使用されることが多いです。これらの色の心理的効果を理解し、適切に利用することで、サイト訪問者の行動や感情にポジティブな影響を与えることができます。
色の選び方とデザインのコツ
WordPressサイトのカテゴリー別色分けを行う際、色の選び方とデザインは非常に重要です。適切な色とバランスを選ぶことで、サイトの魅力と使い勝手が大きく向上します。ここでは、効果的な色の選び方と色の組み合わせに関するヒントをご紹介します。
効果的な色の選び方
色の選び方には、いくつかのポイントがあります。まず、目的に合わせた色を選びましょう。例えば、プロフェッショナルなイメージを演出したい場合は、落ち着いた色合いを選ぶと良いでしょう。次に、色の心理効果を考慮してください。青は信頼感を、緑は安心感を、赤はエネルギーを象徴します。また、サイトの全体的なテーマやブランドカラーに合わせて色を選ぶことも大切です。
色の組み合わせとバランス
色の組み合わせには、バランスが鍵です。強烈な色同士を組み合わせると、サイトが乱雑に見えることがあります。代わりに、一つまたは二つの強い色を基調にし、残りは中立的な色でバランスを取ると良いでしょう。また、色相環を参考にして、互いに補完し合う色を選ぶのも効果的です。例えば、青とオレンジ、赤と緑などが相補色です。相補色を使うことで、サイトにダイナミックながらも調和のとれた印象を与えることができます。
実践！カテゴリーごとの色設定
理論を学んだ後は、実際にカテゴリーごとの色設定を行ってみましょう。このセクションでは、実際の例を通して色設定のプロセスをデモンストレーションし、カスタマイズのヒントやトラブルシューティングの方法を紹介します。
色設定の例
色設定の理由
ライフスタイル
ピンク系の色は暖かみがあり、快適さと優しさを感じさせるため、日常生活や個人的な経験を中心に扱うライフスタイルカテゴリーに適しています。
テクノロジー
ダークブルーは深みがあり、革新性や知性を象徴する色です。テクノロジーとの相性が良く、未来志向のテーマに適しています。
健康・ウェルネス
緑色は自然や健康を連想させ、健康やウェルネスに関連する内容に適している色です。
旅行
オレンジ色は暖かさと活力を持ち、冒険や楽しい体験を想起させます。なので旅行カテゴリーに適しています。
エンターテインメント
赤色は明るくエネルギッシュなので、エンターテインメントの楽しさや興奮を表現するのに適しています。
ファッション
この色はスタイリッシュで華やかで、ファッションの創造性や魅力を表現するのに適しています。
教育
青色は安定感と信頼性を持ち、教育という真面目で知的なカテゴリーに合う色です。
カテゴリー別に色分けをするソースコード
カスタム投稿タイプ名が「column」でタクソノミー名は「columns_category」とします。
PR
<?php
$taxonomy_terms = get_terms('column_category');
if($taxonomy_terms): ?>
<div class="column_category">
<p class="column_category__ttl">カテゴリー</p>
<ul class="column_category__list">
<li class="column_category__item">
<a href="<?php echo home_url('column'); ?>" class="icon-right">すべて</a>
</li>
<?php foreach($taxonomy_terms as $taxonomy_term): ?>
<li class="column_category__item column_category<?php echo $taxonomy_term->term_taxonomy_id; ?>">
<a href="<?php echo get_term_link($taxonomy_term); ?>" class="icon-right">
<?php echo $taxonomy_term->name; ?></span>
</a>
</li>
<?php endforeach; ?>
</ul>
</div>
<?php endif;
?><div class="column_category">
<p class="column_category__ttl">カテゴリー</p>
<ul class="column_category__list">
<li class="column_category__item">
<a href="#" class="icon-right">すべて</a>
</li>
<li class="column_category__item column_category01">
<a href="#" class="icon-right">ライフスタイル</a>
</li>
<li class="column_category__item column_category02">
<a href="#" class="icon-right">テクノロジー</a>
</li>
<li class="column_category__item column_category03">
<a href="#" class="icon-right">健康・ウェルネス</a>
</li>
<li class="column_category__item column_category04">
<a href="#" class="icon-right">旅行</a>
</li>
<li class="column_category__item column_category05">
<a href="#" class="icon-right">エンターテインメント</a>
</li>
<li class="column_category__item column_category06">
<a href="#" class="icon-right">ファッション</a>
</li>
<li class="column_category__item column_category07">
<a href="#" class="icon-right">教育</a>
</li>
<li class="column_category__item column_category08">
<a href="#" class="icon-right">その他</a>
</li>
</ul>
</div><?php echo $taxonomy_term->term_taxonomy_id; ?>
クラス名にそれぞれのカテゴリーのidを付与することによってcssでカテゴリー別に色を分けることが可能になります。
.column_category__ttl {
font-size: 18px;
font-weight: 700;
padding: 16px 0;
border-bottom: 2px solid #094;
}
.column_category__item a {
position: relative;
display: block;
padding: 15px 20px;
border-bottom: 1px solid #7f7f7f;
}
.column_category01 a {
color: #db3b6f;
}
.column_category02 a {
color: #27168b;
}
.column_category03 a {
color: #01b350;
}
.column_category04 a {
color: #da9c00;
}
.column_category05 a {
color: #cd2323;
}
.column_category06 a {
color: #c7007d;
}
.column_category07 a {
color: #0f69b4;
}
.icon-right::before {
content: "";
position: absolute;
top: 50%;
right: 20px;
width: 8px;
height: 8px;
border-top: 2px solid #191919;
border-right: 2px solid #191919;
transform: translate(-65%,-50%) rotate(45deg);
}まとめ
カテゴリー別色分けは、訪問者に直感的なナビゲーションを提供し、サイトの全体的な見た目を向上させます。重要なのは、色選びがサイトの全体的なテーマやブランドアイデンティティと調和していること、そして色がユーザーエクスペリエンスを向上させるように利用されていることです。今回の記事を参考に訪問者のエンゲージメントと満足度を高めてサイトの成功に貢献してください。
