WordPress投稿ページのタグのスタイルについて

前提・実現したいこと

WordPressについての質問です。
投稿を表示するページのタイトル下に表示されるカテゴリーのCSSを編集したいのですが、どのようにすれば良いのかわかりません。

試したこと

こちらが現状のコードです。

PHP
1<?php get_header(); ?>
2<body>
3    <div class="uk-container uk-container-small uk-margin-xlarge-top uk-margin-xlarge-bottom">
4    <?php if(have_posts()): while(have_posts()):the_post(); ?>
5        <section <?php post_class(''); ?>>
6        <h1><?php the_title(); ?></h1>
7        <time datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y.m.d'); ?></time>
8        <p class="category"><?php the_category(', '); ?></p>
9        <?php the_content(); ?>
10        </section>
11    <?php endwhile; endif; ?>
12
13    <?php previous_post_link('%link','古い記事へ'); ?>
14    <?php next_post_link('%link','新しい記事へ'); ?>
15    </div>
16</body>
17<?php get_footer(); ?>

CSS
1.category{
2    display: inline-block;
3    margin: 0 .1em .6em 0;
4    padding: .6em;
5    line-height: 1;
6    text-decoration: none;
7    color: #0000ee;
8    background-color: #fff;
9    border: 1px solid #0000ee;
10    border-radius: 2em;
11}

PHPの8行目でcategoryクラスを指定してみたのですが、このようになってしまい1つ1つにスタイルを適用することができません。

タグ1つ1つはa要素なので、categoryクラスかつa要素のスタイルを指定する、という意味で以下のようにも書いてみましたがうまくいきません。

CSS
1a.category{
2    display: inline-block;
3    margin: 0 .1em .6em 0;
4    padding: .6em;
5    line-height: 1;
6    text-decoration: none;
7    color: #0000ee;
8    background-color: #fff;
9    border: 1px solid #0000ee;
10    border-radius: 2em;
11}

行動規範の内容に同意します

回答1件

ベストアンサー

HTML
1<p class="hoge_tag"><?php the_category(', '); ?></p>

CSS
1.hoge_tag{
2スタイル
3}

8行目のpタグにclass名を入れてCSSで編集できます。

投稿2021/08/30 02:18

meli

総合スコア312

kiichisato

2021/08/30 02:42

回答ありがとうございます。書いたはずのところが消えていたので、質問を修正させていただきました。 8行目のpタグのクラスを指定すると、1つ1つのタグにスタイルを反映することができませんでした。画像が貼ってありますので、宜しければご確認いただけますでしょうか。

meli

2021/08/30 02:45

>タグ1つ1つはa要素なので、categoryクラスかつa要素のスタイルを指定する、という意味で以下のようにも書いてみましたがうまくいきません。 categoryクラスの中にaタグが入っているという認識ですと、CSSでの記述は「a.category」ではなく「.category a」になります。 (認識違ってたらすみません)

kiichisato

2021/08/30 03:28

.category aで解決しました。ありがとうございます！

行動規範の内容に同意します