wordpress カテゴリー取得<?php the_category(','); ?>のCSSデザインに関して。

Question

ループ内に出力されるカテゴリー<?php the_category(','); //カテゴリーを表示?> のデザインを
下記写真のようにデザインしたいのですが

 <div class="blog__category blog__article--category">
<?php the_category(','); //カテゴリーを表示?></div>
<h1 class="blog_title"><?php the_title();//投記事タイトルを表示 ?></h1>
<p class="blog_h2__txt"><?php the_content(); //投稿記事を表示 ?></p>
コード

　上記コードでプレビューをすると、出力されたカテゴリーの箇所がaタグに置き換わるため、<div class="blog__category blog__article--category"> でデザインしたデザインが反映されず下記写真のように出力されます。

<?php the_category(','); //カテゴリーを表示?> をデザインするにはどのようにすればいいのでしょうか?

google chrhome デベロッパーツールではHTML CSS は以下のように表示されています。

<div class="blog__category blog__article--category">
<a href="http://localhost:10009/category/category-1/" rel="category tag">カテゴリー１</a>
</div>

CSS
.blog__article--category {
position: static;
width: 110px;
height: 31px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 20px;
}

.blog__category {
position: absolute;
top: 0;
color: #fff;
background-color: var(--basecolor);
font-size: 1.2rem;
padding: 1px 5px;
border: 1px solid #707070;
}

a{
text-decoration: none;
transition: all .6s ease;
}

Comments

[thyda.eiqau]

出力されているHTML (ブラウザのソースを表示機能で確認できるHTML) と、その要素に適用されているCSSをご提示ください

[Fukusuke0604]

HTML
<div class="blog__category blog__article--category">
<a href="http://localhost:10009/category/category-1/" rel="category tag">カテゴリー１</a>
</div>

CSS
.blog__article--category {
position: static;
width: 110px;
height: 31px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 20px;
}

.blog__category {
position: absolute;
top: 0;
color: #fff;
background-color: var(--basecolor);
font-size: 1.2rem;
padding: 1px 5px;
border: 1px solid #707070;
}

a{
text-decoration: none;
transition: all .6s ease;
}

googleデベロッパーツールではこのようになっています。

[thyda.eiqau]

インデントが消えて見づらいので、質問本文に追記してくださいますか。

[m.ts10806]

色々指定されてますが一部反映されないのか全て反映されないのか問題切り分けされた方が良いかと思います。
もっと簡単で明らかな変化がみて取れる指定をしてみてください

[Fukusuke0604]

すみませんでした。
質問本文に追記いたしました。　確認お願いします。

Answer 1

コメント頂き、ありがとうございました。

ごちゃごちゃしていたCSSとクラスの必要ない記述を削除し、「カテゴリー１」はaタグで出力されているので

<div class="blog__category blog__article--category">
<a href="http://localhost:10009/category/category-1/" rel="category tag">カテゴリー１</a>
</div>
コード

.blog__article--category a{
  color: #fff;
}

とすることでスタイルを適用できました。