WordPressで個別のカテゴリを異なる方法でスタイル設定する方法

WordPress のカテゴリーを目立たせたいと思ったことはありませんか？たとえば、「ニュース」セクションを「チュートリアル」や「レビュー」カテゴリーとは異なる見た目にしたいと思ったことはありますか？🎨

正直なところ、カテゴリのスタイルを個別に変更することは、ほとんどのブログにとって喫緊の課題ではありません。私たちWPBeginnerでさえ、それを行っていません。

しかし、すべてのブログには独自のニーズがあり、読者を引き付けることがいかに重要であるかを理解しています。そして、一部のサイトでは、各カテゴリページに独自のスタイルと機能を持たせることが、読者がコンテンツをより簡単に見つけるのに役立ちます。

良いニュースは、カテゴリページを個別にスタイリングするのは実際にはかなり簡単だということです。フルサイトエディター、ページビルダー、ビジュアルCSSエディターといったコード不要の方法をいくつか考案しました。

WordPressのカテゴリページを個別にスタイリングすることは、それほど重要ですか？ 🧐

すべてのWordPressサイトで必須ではありませんが、カスタムカテゴリが読者のエクスペリエンスを本当に向上させることができる状況がいくつかあります。

WordPressの投稿トピックが大きく異なる場合は、個々のカテゴリーをユニークにスタイル設定したい場合があります。

例えば、あなたのWordPressブログがニュースとチュートリアルの両方をカバーしている場合、これらのカテゴリを異なるスタイルにすることができます。これにより、読者はどのような種類のコンテンツを見ているのかすぐにわかります。

または、レビューサイトを作成することもできます。製品レビューの単一カテゴリーを比較カテゴリーとは異なるスタイルにすることができます。これにより、訪問者はWordPressサイトで探しているものを簡単に見つけることができます。

一部のサイトでは、特定のカテゴリをより目立たせるためにスタイルを設定し、その重要性を強調したい場合もあります。ニュースサイトでは、「速報」カテゴリをWordPressの通常のニュースカテゴリよりも目を引くスタイルにしたい場合があります。

WordPressでカテゴリーを個別にスタイル設定する主な理由は、サイトを使いやすくするためであることを忘れないでください。読者が探しているものをより速く見つけるのに役立つと思えば、このWordPressデザインのヒントを実装するのは良い考えかもしれません。

それを踏まえて、WordPressで個々のカテゴリをスタイリングする3つの方法を見てみましょう。下のクイックリンクを使用して、希望する方法にスキップできます。

• 方法1：ページビルダーを使用してカテゴリーページをスタイル設定する（カスタムテーマ）
• 方法2：フルサイトエディターを使用してカテゴリページをスタイル設定する（ブロックテーマ）
• Method 3: Use CSS Hero to Style Category Pages (All Themes)

方法1：ページビルダーを使用してカテゴリーページをスタイル設定する（カスタムテーマ）

テーマを切り替えたり、カスタムWordPressテーマをゼロから作成したりする意欲がある場合は、ページビルダーを使用することが、WordPressでカテゴリをスタイリングする優れた方法になります。

この方法は、サイトのデザインをより細かく制御したいと考えており、サードパーティ製のツールを使用することに抵抗がない人に最適です。

様々なオプションをテストした結果、Thrive Architectが個々のカテゴリーのスタイリングに最適なページビルダーの1つであることがわかりました。

コーディングの知識がなくても、カスタムカテゴリを作成してユニークにスタイル設定できる、ユーザーフレンドリーなドラッグアンドドロップインターフェイスを提供します。プラグインの詳細については、Thrive Architect レビューをご覧ください。

ただし、このアプローチがすべての人に適しているわけではないことに注意することが重要です。

現在の WordPress テーマに満足しており、切り替えたくない場合は、フルサイトエディターを使用した方法 2、または（後で説明する）ビジュアル CSS エディターを使用した方法 3を検討してください。

ただし、テーマを変更したい場合は、WordPressテーマを正しく変更する方法に関するガイドを読むことをお勧めします。

もう1つ注意点として、Thrive Architectには無料版がありません。しかし、私たちのThrive Themesクーポンコードを使用すると、初回購入時に最大50%オフになります。

ステップ1：Thrive Architectをインストールする

Thrive Architectの設定から始めましょう。プランを購入したら、Thrive Themesのウェブサイトにログインできます。

そこには、Thrive Product Managerプラグインがあります。ファイルをダウンロードして、WordPress管理画面にインストールするだけです。やり方がわからない場合は、WordPressプラグインのインストール方法（初心者向け）のガイドをご覧ください。

プラグインを有効化したら、WordPressダッシュボードのプロダクトマネージャーメニュー項目を開きます。

「マイアカウントにログイン」をクリックして、WordPressサイトをThrive Themesアカウントに接続します。

ここで、使用できる Thrive Themes 製品のリストが表示されます。

「Thrive Architect」を見つけて、「製品のインストール」の横にあるチェックボックスをオンにします。

「Thrive Theme Builder」が表示されるまで下にスクロールし、「テーマのインストール」オプションを選択します。

次に、「選択した製品をインストール」をクリックします。Thrive ArchitectはThrive Theme Builderと連携するため、これを行う必要があります。

次のページでは、Thrive Product ManagerがThrive ArchitectとThrive Theme Builderをセットアップする様子が表示されます。

完了したら、「テーマビルダーダッシュボードに移動」ボタンをクリックします。

さて、Thrive のテーマコレクションからサイトの開始デザインを選択する時間です。

どちらを選べばよいかわからない場合は、「プレビュー」ボタンを使用して各テーマの外観を確認してください。気に入ったものが見つかったら、「選択」をクリックします。

次に、テーマビルダーウィザードを開始します。このウィザードは、ロゴの追加、ブランドカラーの選択、テーマのさまざまな部分の設定に役立ちます。

次のステップに進む前に、セットアップウィザードを完了してください。

ステップ2：カテゴリアーカイブテンプレートを作成する

テーマが設定されたら、「テンプレート」タブに切り替えましょう。ここでは、テーマがウェブページのデザインに使用するデフォルトのテンプレートが表示されます。この場合、カテゴリアーカイブに使用されるテンプレートは「すべてのアーカイブ」と呼ばれます。

個別の WordPress カテゴリをスタイル設定したいので、まず新しいカテゴリアーカイブテンプレートを作成する必要があります。これを行うには、「+ 新規追加」をクリックします。

新しいポップアップウィンドウが表示されます。まず、新しいカテゴリテンプレートの名前を入力します。簡単な名前で、カテゴリ名を含めることができます。

その下で、「リスト」を選択します。これは、特定のカテゴリーのすべての投稿をリストするページを作成したいからです。

リストタイプで「アーカイブ」を選択し、「アーカイブタイプ」で「カテゴリー」を選択します。

「定義先」フィールドで、テンプレートを作成しているカテゴリの名前を選択します。例として「ブログ」を選択しました。

最後に、「最初から始める」または「テンプレートを選択」のいずれかを選択できます。

すぐに使えるThrive Themesのテンプレートの多くがすでにデザイン性の高いものなので、2番目のオプションを選択します。

次のポップアップで、利用可能なテンプレートのいずれかを選択できます。例として、「グリッドレイアウト – 注目の投稿」を選択します。

選択したら、「テンプレートを作成」ボタンをクリックします。

これで、新しいテンプレートがテンプレートのリストに追加されたのが表示されます。

その上にカーソルを合わせ、「編集」をクリックしてカスタマイズを開始します。

ステップ 3: カテゴリテンプレートページをカスタマイズする

Thrive Architectは、ページをカスタマイズするための多くの方法を提供します。

ページ上の要素をドラッグアンドドロップで配置し、カスタマイズしたい要素を選択して設定できる点で、ブロックエディターと似たような動作をします。違いは、カスタマイズオプションがはるかに多いことです。

例を見てみましょう。カテゴリアーカイブテンプレートでは、上部に大きな注目の投稿があり、その下に同じカテゴリの他の投稿が表示されます。デフォルトでは、注目の投稿は、そのカテゴリで公開された最新の投稿です。

この要素のレイアウトを変更したい場合は、「Featured List 01」要素をクリックします。次に、左側のサイドバーの上部にある外部アイコンボタンをクリックします。

ポップアップが表示され、別の注目の投稿デザインを選択するように求められます。

いくつかの選択肢があり、現在の選択に満足していない場合はいつでも変更できます。希望するレイアウトをクリックするだけで、Thrive Architectが自動的にページテンプレートに実装します。

下の投稿リストでも同様のことができます。

「ブログリスト」要素を選択するだけです。その後、左側のサイドバーの上部にある外部アイコンをクリックすると、以前のように投稿リストを表示するための他のテンプレートが見つかります。

カテゴリリストのデザインをさらに変更したい場合は、サイドバーを下にスクロールしてください。

そこでは、表示タイプ（カルーセルにするなど）を変更したり、注目の投稿を無効にしたり、ページネーションタイプ（数値から「さらに読み込む」など）を切り替えたり、表示される投稿数を増減させたりするなど、多くの設定を見つけることができます。

また、訪問者が現在どのカテゴリページにいるかを伝えるための大きな見出しや、それに付随する説明などの他の要素を追加することもできます。

これを行うには、ビルダーの右側にある「+」ボタンをクリックします。次に、「テキスト」要素を選択し、ページに最適な場所にドロップします。

テキスト要素で、テキストツールバーの最も右側にある動的テキストアイコンをクリックします。完了したら、「動的テキスト」フィールドで「アーカイブ」を選択し、その下のフィールドで「アーカイブ名」を選択します。

次に、「挿入」をクリックします。すると、Thrive Architectがカテゴリ名を追加します。この機能は動的なコンテンツを追加するため、将来的にカテゴリ名を変更した場合でも、自動的に調整されます。

ここから、テキストのスタイル、フォーマット、配置などを変更できます。

カテゴリの説明を追加するには、再度「+」ボタンをクリックしてください。

その後、「タクソノミタームの説明」要素を選択します。

WordPress 管理画面 » 投稿 » カテゴリーでカテゴリーに説明を追加した場合、その説明はここに自動的に表示されるはずです。

それ以外の場合は、そのページに戻って後で更新することができます。詳細については、WordPressでカテゴリの説明を表示する方法に関するチュートリアルを参照してください。

WordPress でカテゴリごとに異なるスタイルを設定するクールな点の一つは、各カテゴリに合わせたさまざまな要素を追加できることです。

例えば、特定のトピックにのみ適したリードマグネットやオプトインフォームがある場合、それをこのカテゴリページに追加することは、関心のある読者をターゲットにするのに最適な方法です。

幸いなことに、Thrive Architect にはその目的専用のブロックがあります。

例えば、「+」ボタンをクリックして、「行動喚起」要素をページ上のどこにでも追加できます。これは、カテゴリページで長い投稿リストを区切るのに優れた戦術です。

ここから、コールトゥアクションテンプレートを選択できます。

既存のデザインのいずれかが気に入らない場合は、最も気に入ったものを選択して、後でスタイルを変更することができます。

これで、コールトゥアクション要素のテキストを変更できます。

アクションボタンのターゲットURLを追加するには、ボタン自体をクリックするだけです。次に、URLを挿入し、新しいタブで開くかどうかの設定と、ノーフォローを設定します。

その後、タイポグラフィを変更したり、背景色を追加したり、アニメーションを挿入したりするなど、コールトゥアクション要素をさらに自由にカスタマイズできます。

カテゴリ ページの見た目に満足したら、「作業内容を保存」をクリックします。

カテゴリページが完成したら、ウェブサイトをモバイル、デスクトップ、またはタブレットでプレビューして、すべてがうまく表示されていることを確認できます。

次に、以前と同じ手順を繰り返して個別のカテゴリページに独自のスタイルを設定するか、メインカテゴリのみをスタイル設定し、残りはThrive Themesのデフォルトのカテゴリアーカイブテンプレートを使用するようにします。

デモサイトでの私たちの表示は次のようになります。

方法2：フルサイトエディターを使用してカテゴリページをスタイル設定する（ブロックテーマ）

この2番目の方法は、ブロックテーマユーザー向けです。フルサイトエディターは、カテゴリアーカイブページ用のカスタムWordPressテンプレートを作成し、個々のカテゴリを個別にスタイリングする簡単な方法を提供します。

この方法の良い点は、プラグインが不要なことです。とはいえ、WordPressテーマやフルサイトエディターで提供されるカスタマイズオプションで満足できることを確認してください。なぜなら、それらしか操作できないからです。

まず、WordPress管理画面で外観 » エディターに移動して、フルサイトエディターを開きましょう。

これで、ブロックテーマをカスタマイズするためのメイン設定が表示されます。

カスタムカテゴリーテンプレートを作成するには、「テンプレート」をクリックします。

さて、テーマが提供するいくつかのデフォルトテンプレートが表示されます。これはWordPressテーマによって異なりますが、通常、テーマにはすべてのカテゴリアーカイブページに使用されるテンプレートが含まれています。テーマ開発者は、説明の中でそれが何であるかを指定します。

私たちの場合は、カテゴリアーカイブページのデフォルトテンプレートは「すべてのアーカイブ」と呼ばれます。カテゴリ以外にも、このテンプレートはタグ、カスタムタクソノミー、カスタム投稿タイプなどの他のアーカイブタイプにも使用されます。

カテゴリアーカイブページ用の新しいテンプレートを作成するには、右上隅にある「新しいテンプレートを追加」をクリックします。

ポップアップウィンドウが表示され、作成するテンプレートの種類を選択するように求められます。

ここで、「カテゴリーアーカイブ」を選択します。

この段階で、すべてのカテゴリに対して新しいカスタムカテゴリアーカイブテンプレートを作成するか、特定のカテゴリのみに対して作成するかを選択できます。

個々のカテゴリを個別にスタイリングしようとしているため、「特定のアイテムのカテゴリ」を選択します。

あとは、テンプレートを作成したいカテゴリを選択するだけです。

この場合、「ブログ」カテゴリを選択します。

これで、フルサイトエディターに入ります。カテゴリアーカイブページに使用する ブロックパターンを選択するように求めるポップアップが表示されるはずです。

パターンを選択するか、最初から始めたい場合はこの手順をスキップできます。

例として、最初から始めて、WordPressでカテゴリページを異なる方法でスタイル設定する方法の例をいくつか示します。

もし、完全にゼロから始めずに、他のパターンを使いたい場合は、次のようにすることができます。

左上にある黒い「+」記号をクリックしてブロックを追加できます。「パターン」タブに切り替えて下にスクロールし、「投稿」オプションを選択します。これで、複数のWordPress投稿を表示するためのパターンが表示されるはずです。

デフォルトのオプションに満足できない場合は、独自のデザインを作成できます。フルサイトエディターを使用すると、通常のブロックエディターのようにブロックをドラッグアンドドロップするだけで、プロセスは簡単です。

とはいえ、テンプレートの一部を1つのブロックとして管理できるように、まずグループブロックを使用することをお勧めします。ページ上の任意の場所にある「+」ボタンをクリックして、「グループ」を選択してください。

次に、グループブロックのレイアウトを選択します。

4つの選択肢があり、WordPressサイトに最適なものを選ぶことができます。

まず、アーカイブタイトルブロックをグループブロックに追加することをお勧めします。これにより、カテゴリのタイトルが自動的に表示されます。

そのため、将来的にカテゴリ名を変更すると、タイトルも自動的に調整されます。「+」ボタンをクリックして「アーカイブタイトル」を選択すると見つけることができます。

デフォルトでは、このブロックは「アーカイブタイプ：アーカイブタイトル」の形式でタイトルを表示します。

ただし、ブロック設定サイドバーに移動し、「タイトルにアーカイブタイプを表示」ボタンを無効にすることで、タイトル内のアーカイブタイプを無効にすることができます。

追加すべきもう一つのこととして、特定のカテゴリのすべての投稿を表示するブロックがあります。

これを行うには、「+」ボタンをクリックして「投稿リスト」を選択します。

ここで、既製のデザインを使用するか、空白から始めるかを選択できます。

例として、「空白から開始」オプションを使用します。

この段階で、投稿を表示するためのレイアウトを選択できます。

4つのオプションがあります：タイトルと日付；タイトルと抜粋；タイトル、日付、抜粋；画像、日付、タイトル。

レイアウトを選択すると、すべての投稿のリストが表示されます。

次に、カテゴリに基づいて投稿をフィルタリングする必要があります。これを行うには、ブロック設定サイドバーの「ブロック」タブに切り替えます。次に、「フィルター」セクションまでスクロールし、3点メニューをクリックします。

ここで、「タクソノミー」を選択します。

カテゴリ名を入力するだけで、適切なフィールドの投稿リストをフィルタリングできます。

その後、必ず「Enter」キーを押してください。

表示される投稿の数を変更するには、「投稿リスト」ブロックをクリックして「設定」アイコンを選択します。

これで、「ページあたりのアイテム数」フィールドの数値を変更できます。

ページの外観を変更するには、ページ上のブロックのいずれかを選択できます。次に、設定サイドバーの「ブロック」タブに切り替え、「スタイル」タブに移動します。

これで、その特定のブロックの利用可能なスタイリングオプションが表示されます。テキストの色やリンクの色を変更したり、フォントを変更したり、パディングやマージンを調整したりできます。

この時点で、ページを下に移動して、「クエリで結果が返されない場合に表示されるテキストまたはブロックを追加」というブロックを見つけることができます。

ここでは、テキストを入力したり、カテゴリにまだ投稿がない場合に表示されるブロックを追加したりできます。

これで、フルサイトエディターでカテゴリページを編集する基本的な操作は完了です。他のカテゴリアーカイブページと差別化するために、さらにブロックを追加できるようになりました。

次に、「保存」をクリックするだけです。

その後、同じ手順を繰り返して、すべてのカテゴリーにカスタム WordPress ページを作成できます。メインのカテゴリーを編集するだけで、残りはテーマのデフォルトのアーカイブテンプレートを使用することもできます。

フルサイトエディターの使用に関するヒントやコツをもっと知りたい場合は、WordPressフルサイト編集の完全初心者ガイドをご覧ください。

また、カテゴリページにさらに多くの要素を追加できるように、最高のGutenbergブロックプラグインのリストも確認することをお勧めします。

シンプルなカテゴリページは次のようになります。

方法3：CSS Heroを使用してカテゴリページをスタイリングする（すべてのテーマ）

この3番目の方法は、WordPressクラシックテーマのユーザーに推奨されますが、ブロックテーマのユーザーも使用できます。

その理由は、多くのクラシックテーマでは、カテゴリアーカイブページを個別にスタイル設定するオプションが提供されていないためです。そして、方法 1 を使用したくない場合は、代替手段としてカスタム CSS を使用することになります。

CSSのコツは、コーディング方法を知る必要があるということです。技術的なバックグラウンドを持たない完全な初心者であれば、コーディングはあなたにとって最もユーザーフレンドリーな選択肢ではないかもしれません。

幸いなことに、コーディングなしでCSSを使ってテーマを簡単にカスタマイズする方法を見つけました。それはCSS Heroを使用することです。

CSS Heroは、ビジュアルCSSエディターを使用して既存のテーマをカスタマイズできるプラグインです。サイト上の要素を選択し、そのスタイルを変更するだけで、CSS Heroがその要素のCSSコードを変更します。

とはいえ、以前の方法と比較すると、カテゴリアーカイブページに軽微な変更を加えたい場合は CSS のみを使用することをお勧めします。全体的な変更も可能ですが、時間がかかる場合があります。

また、このプラグインには無料版はありませんが、CSS Heroクーポンコードを使用すると40%割引で購入できます。

詳細については、完全なCSS Heroレビューをご覧ください。

CSS Heroを購入してダウンロードしたら、WordPress管理画面にインストールして有効化できます。手順については、WordPressプラグインのインストールの初心者向けガイドをご覧ください。

次に、管理バーの上部に CSS Hero ボタンが表示されます。サイトの編集を開始するには、それをクリックしてください。

下のスクリーンショットは、現在のページがどのようになるかを示しています。

左側にはサイドバーがあり、ページ上の個々の要素を変更できます。上部には、さまざまなデバイスでページを表示したり、ナビゲートモードに切り替えたり、変更を元に戻したりするためのボタンがあります。

下部で作業内容を保存できます。

デフォルトでは、ホームページが表示されます。

カテゴリアーカイブページをカスタマイズするには、ページ右上の「編集」モードから「ナビゲート」モードに切り替えます。次に、カスタマイズしたいカテゴリに移動します。

正しいページにいることを確認したら、「編集」モードに戻ることができます。

編集がこの特定のカテゴリページのみに影響し、他には影響しないようにするには、「選択モード」設定を「カテゴリ」に変更します。

さて、編集する要素を選択できます。

この例では、カテゴリのタイトルと説明を表示するブロックのグループをクリックしました。左側のサイドバーに、その要素を変更するための設定が表示されます。

例を試してみましょう。背景色を変更したい場合は、「背景」オプションをクリックします。

次に、カラーピッカーアイコンをクリックして、お好みの色を選択できます。グラデーションや背景画像を追加することも可能です。

かなり暗い色を選んだため、テキストが読めなくなりました。幸いなことに、CSSを使えば、このブロックグループ内の個々のテキスト要素をクリックできます。

テキストの色を変更するには、「タイポグラフィ」設定に切り替えて、目的の色を選択できます。フォントサイズ、行の高さ、さらにはフォントファミリーもカスタマイズできます。

もう一つクールなのは、要素にボックスシャドウを追加することで、それらをさらに目立たせることができることです。

これを行うには、影を追加したい任意の要素をクリックします。次に、「Extra」タブに移動し、「Make Shadow」をクリックします。

さて、影を表示したい場所にドットをドラッグし始めます。要素の下に自動的に影が表示されます。

完了したら、影のぼかし、広がり、位置、色を調整できます。

要素が近すぎる（改行を追加する必要があるなど）または離れすぎている場合は、「スペーシング」設定で調整できます。

ここで、各要素のパディングとマージンを変更して、より均整の取れた見た目にすることができます。

CSS Heroでは、実際にはもっと多くのことができます。さらに詳しく知りたい場合は、これらのガイドをご覧ください。

• WordPressウィジェットにカスタムスタイルを追加する方法
• WordPressナビゲーションメニューのスタイル設定方法（更新）
• WordPressに画像ホバーエフェクトを追加する方法（ステップバイステップ）
• WordPress でサイドバーの位置を変更する方法

カテゴリーページの見た目に満足したら、「保存」をクリックするだけです。

これで完了です。次に、他のカテゴリページでも同じ手順を繰り返して、よりユニークに見せることができます。

CSS Heroで作成したカテゴリページの最終結果はこちらです。

ボーナスヒント：特定のカテゴリページに別のテーマを使用する

一部のカテゴリーの外観を大きく変更したいですか？特定のカテゴリーには、まったく異なるテーマの使用を検討するかもしれません。

これは、カテゴリページのグループをすべて同じように見せたいが、他のすべてとは異なるようにしたい場合に役立ちます。

ただし、各カテゴリを個別にスタイル設定することはできないことに注意してください。代わりに、サイトに 2 つの異なる外観を作成することになります。

これにより、物事を変更する自由が大きく与えられますが、サイトの外観をある程度一貫させることも依然として重要であることを忘れないでください。一部のカテゴリが異なって見えても、共通の要素を維持するようにしてください。

これにより、訪問者はサイト内を移動する際に快適さを感じることができます。ユニークなデザインと一貫性のバランスを見つけることで、WordPressサイトを魅力的で使いやすい状態に保つことができます。

これを行う方法の詳細については、WordPressウェブサイトで複数のテーマを使用する方法に関するガイドを参照してください。

この記事が、WordPress で個々のカテゴリに異なるスタイルを設定する方法を学ぶのに役立ったことを願っています。また、最高の WordPress テーマビルダーの専門家によるおすすめや、WordPress ウェブサイトの編集方法に関する究極のガイドもチェックすることをお勧めします。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。