AFFINGER BLOG

【AFFINGER5】カテゴリーの色(カラー)をカスタマイズする方法

AFFINGER5カスタマイズ(カテゴリーカラーの変更)
AFFINGER5でカテゴリーの色を変更する方法を知りたい!カテゴリーごとにカスタマイズもできるかな??

 

  • AFFINGR5のカテゴリーの色(カラー)を変更したい
  • カテゴリーごとに違う色を使いたい
  • 簡単にカスタマイズできる方法が知りたい

 

ナミアツ
このような疑問に答えますね。

 

ブログやサイトに訪れてくれる読者は、気になった記事があると同じカテゴリーの記事を読んでくれる傾向にあります。

 

なので、読者の離脱を防ぐためにもカテゴリーは必須。そして、カテゴリーは見えやすいようにしなければなりません。

 

AFFINGER5は「稼ぐ」に特化したワードプレステーマ。

SEO対策もばっちり、多くのブロガー、アフィリエイターが利用しています。

 

しかし、「カスタマイズが難しい」という意見もちらほら・・・

 

上記のお悩み(カテゴリーのカラー変更)のような些細な変更でも、意外とつまずいたりします。

 

本記事では、AFFINGER5のカテゴリーの色を変更する方法を徹底解説します。

 

ナミアツ
本記事を読めば”カテゴリーの色を変更する方法”をマスターでき、自由にカラー設定できるようになります。

 

AFFINGER5のカテゴリーの色とは?

AFFINGER5のカテゴリカラー

今回変更したいのは上記のカテゴリーの色(カラー)です。

当初のカテゴリーの色は黄色だったのですが、「ちょっと見えずらいな」と思ったので思い切って変更することにしました。

 

ナミアツ
それでは、下記で詳しく解説していきます。

 

 

AFFINGER5のカテゴリの色を変更する2つの方法

AFFINGER5カテゴリーの色を変更する2つの方法

アフィンガーではカテゴリーの色を変更することが出来ます。

 

ただし、変更する方法は2種類ありますので、どちらが自分のサイトに合っているか確認してから変更しましょう。

 

変更方法はコチラの2つ、

  1. カテゴリーの色を一括で変更する方法(一括変更)
  2. カテゴリーごとに異なる色に変更する方法(個別カスタム)

 

それぞれのメリット・デメリットはこのような感じです。

一括変更個別カスタム
変更にかかる時間少ないカテゴリーが多いと時間がかかる
カテゴリー別に色分けできないできる
変更する場所外観

カスタマイズ

テキストとタグ見出し

カテゴリー
投稿

カテゴリー

編集
こんな人におすすめカテゴリーの色は一色でいいカテゴリー別に色分けしたい

 

ナミアツ
それでは一つずつ解説していきます。

 

①一括変更:カテゴリーのカラーを一括で変更する方法

それでは、AFFINGER5のカテゴリーの色を一括で変更する方法を解説します。

手順は下記のとおり、

  1. 「ダッシュボード」→「外観」→「カスタマイズ」
  2. 「各テキストとhタグ見出し」→「カテゴリー」
  3. 「背景色」「文字色」「角丸」の設定

 

画像を使って解説します。

  • step.1 まずは「カスタマイズ」へ

    ▼「外観」→「カスタマイズ」を選択します。

    AFFINGER5カテゴリーカラーの一括変更①

  • step.2 カテゴリ編集画面へ

    ▼「各テキストとhタグ見出し」を選択

    AFFINGER5カテゴリーカラーの一括変更②

    ▼「カテゴリ」を選択

    AFFINGER5カテゴリーカラーの一括変更③

  • step.3 カラーパレットで色を調整

    ▼背景色と文字色を変更

    AFFINGER5カテゴリーカラーの一括変更④

    カラーはコードで変更するのが簡単でおすすめ。

 

ナミアツ
最後に”保存”をすれば完了。ビューワーでカテゴリの色が変更されたか確認しましょう。

 

②個別カスタム:カテゴリーごとに異なるカラーで変更する方法

それではもう一つの方法、カテゴリーごとに異なるカラーで変更する方法を解説します。

 

変更の手順は下記のとおり、

  1. 「ダッシュボード」→「投稿」→「カテゴリー」
  2. 編集画面を開く
  3. 背景色を変更(文字色は変更不可)
  4. 更新ボタンで保存

 

画像を使って詳しく解説します。

  • step.1 まずはカテゴリー編集画面へ

    ▼今度は「投稿」の中にある「カテゴリー」を選択します。

    AFFINGER5カテゴリーカラーの個別カスタム①

  • step.2 カテゴリーを編集する

    ▼変更したいカテゴリの「編集」を選択します。

    AFFINGER5カテゴリーカラーの個別カスタム②

  • step.3 編集して保存

    ▼背景色を選択し更新します。

    AFFINGER5カテゴリーカラーの個別カスタム③

    文字色については個別に設定ができません。文字色は①の方法(一括で変更する方法)で変更しましょう。

 

ナミアツ
以上でカテゴリーの色を変更する方法はおしまいです。サイトの配色が上手くいかない、なんか微妙~、と思った方は下記の無料ツールがおすすめですよ。

 

ブログのサイトカラーで迷ったら無料ツールを使おう

AFFINGER5配色に迷ったら無料ツールを使おう

サイトの配色がしっくりこない場合は、下記の無料ツール(3つ)がおすすめ。

オシャレで見やすい配色パターンがずらりです。

 

①Colors

Colors

個人的におすすめなのはコチラの”Colors"

配色のサンプルがたくさんあって選びたい放題。

サイトのイメージに合う配色パターンを選ぶだけですが、シンプルで非常に使いやすいカラーパレットです。

 

②Palettable

palettable

次におススメするのは”Palettable

表示された色を「Dislike(嫌い)」か「Like(好き)」かを選んで配色パターンを作っていくユニークなサービスです。

自分の好きな色だけ集めてオシャレな配色パターンを作ることが出来ます。

 

③Color Drop

colordrop

最後はシンプルな”Color Drop

4色のカラーパレットから配色を選んでいくサービス。

カラーコードもワンクリックでコピーできるのでワードプレスを作業しながらサクサクっと色を変更することができます。

 

 

本記事のまとめ:AFFINGER5のカテゴリーカラーは2つの方法でカスタマイズできる

AFFINGER5カスタマイズまとめ

 

AFFINGER5でカテゴリーの色を変更する2つの方法

  1. カテゴリーの色を一括で変更する方法
  2. カテゴリーごとに色をカスタマイズする方法

 

カテゴリーの色を一括変更する場合

  1. 「ダッシュボード」→「外観」→「カスタマイズ」
  2. 「各テキストとhタグ見出し」→「カテゴリ」
  3. 「背景色」「文字色」「角丸」の設定

 

カテゴリーごとに色をカスタマイズする方法

  1. 「ダッシュボード」→「投稿」→「カテゴリー」
  2. カテゴリーの編集画面を開きます
  3. 編集画面の下の方にある背景色を変更
  4. 更新ボタンを押して完了

 

ナミアツ
AFFINGER5のちょっとしたカスタマイズについては下記の記事も参考なるかと思います。是非ご活用ください。

 

サイト名の「大きさ」と「行間」をカスタマイズしたい。

 

記事一覧のサムネイル画像を大きくカスタマイズしたい。

 

ナミアツ
それでは今回は以上でおしまいです。最後までお読みいただきありがとうございました!

-AFFINGER, BLOG

© 2020 JIKORICH