*記事内に広告が含まれています。

WordPress無料テーマ「Cocoon」のカテゴリー作成、決めては色わけ

2019年1月30日

人気の無料テーマ「Cocoon」を利用している場合、カテゴリー登録時に背景色&文字色の設定ができます。
これは、「Cocoon」を利用するとTopページに並んだ記事一覧のサムネイル(アイキャッチの写真)に、カテゴリー名のタグ(ラベル)が表示されますが、このタグの背景色と文字色をカテゴリー別に設定できるものです。
カテゴリー分類が一目でわかるので便利です、またデザイン的にもインパクトが出ます。ぜひ設定しておきましょう。

基本的なカテゴリーの設定については、以下の記事を参照ください。
↓↓↓↓↓↓↓
WordPress(ワードプレス)のカテゴリー設定方法[初心者向け]、ユーザー目線がアクセスアップの秘訣

 

カテゴリータグの色設定

設定場所の確認

設定するのは、Topページの記事一蘭のサムネイルに表示されているカテゴリー名のタグ(ラベル)の色です。

まず、こちら、設定前の状態です。
デフォルトであれば「グレー」、サンプルのこのページではスキンで設定されたグリーン一色の表示です。

キャプチャー、カテゴリーのタグ

 

カテゴリー設定の編集

WordPressのダッシュボードで [投稿]>>[カテゴリー] をクリックします。
キャプチャー、カテゴリー設定

 

作成しているカテゴリー一覧で、設定するカテゴリー欄にマウスを当てます、表示されたメニューから [編集]の文字をクリックします。
キャプチャー、編集

 

カテゴリー編集の画面が出ます。
カテゴリー色の欄で、[色を選択]のボタンをクリックします。
キャプチャー、背景色設定

 

色指定用のパネルが表示されます、設定方法は以下の3通りです。
*いずれかの方法で設定します(指定は1箇所でOKです)
①色コードを入力する:HTMLの色コードを指定します→→→原色大辞典
②パネルから色を選ぶ:左側で色を選び、右側で彩度を選びます
③一覧から色を選ぶ:並んだタイルから色を選びます
キャプチャー、色の指定

背景色に続いて、文字色も設定します
*設定方法は上記と同じです、3通りの設定方法が使えます。

キャプチャー、文字色設定

背景色と、文字色が設定できました。
キャプチャー、カテゴリーの色設定

他の項目も確認します。
必要であれば、「カテゴリタイトル」「カテゴリ本文」を入力します。
*これは、カテゴリーのページを開いたときに一覧の上に表示されます。
キャプチャー、カテゴリータイトル等

続いて
メタディスクリプション:ページの概要を表すテキスト情報
メタキーワード:ページのキーワードを表す単語
を入力します
*必須ではありません、SEO的には入力した方が望ましいですが、機能的には入力しなくても特に問題はありません。

入力が完了したら[更新]をクリックします。
*色設定も、この時点で有効になります。
キャプチャー、メタタグ

 

同様の操作を繰り返して、他のカテゴリーも設定します。

表示結果の確認

設定結果を確認します。
カテゴリーごとにタグの色が変わりました。
ちょっと華やかになりました。カテゴリーの違いもよくわかります(^^)
キャプチャー、結果

りんごからのお知らせ

こんにちは、Ringoです。岡山県真庭市というところで、非常勤のデザイン講師をしながら、ブログやメルマガを利用したネットビジネスをご紹介しています。

このブログと連携して「ゆとりのシニアライフを実現させる」をテーマにメルマガを配信、シニア&初心者向けにネットビジネスの魅力と取り組み方をお伝えしています。噛み砕いた解説がわかりやすいと好評です(^^)
経済的にも心にも「ゆとり」をもたらす収入をゲットしませんか!
イラスト、葉っぱ付きりんごを持ったおじさんとおばさん ブログを作ったけどアクセスが無い!、アフィリエイトの成果が出ない!
そんなあなたは必見ですよ
SNSやネット活用の実践講座を交えた実りいっぱいの無料メルマガです。

お申し込みはこちらのボタンをクリック、是非この機会に(^o^)ノ゙
↓↓↓↓↓↓↓↓↓↓ バナー、りんごメルマガ登録用 *詳細ページが表示されます、すぐにメルマガ申し込みはされません

よろしければ、この記事やブログに関する 感想・聞いてみたいこと・要望などなどお聞かせください。内容と関係ない雑談も大歓迎です(^^)
↓↓↓↓↓↓↓お気軽にo(^-^)o♪
yoko_takano@appli.redまたは お問合せ

お願い記事内の不具合や間違い等をお知らせください。 (キャプチャーの違い、古くなった情報、誤字脱字等些細なことでもかまいません)
↓↓↓↓↓↓↓↓
バナー、不具合問い合わせフォーム *お知らせいただいた方にはりんごからささやかなお礼を送らせていただきます。