パンくずリスト：カテゴリー部分cssがおかしい

Question

パンクくずリストのカテゴリー部分cssがおかしい

パンくずリストのカテゴリー部分の「お知らせ」が以下のようになってしまいます。
この「お知らせ」を何もcssを付けないようにしたいのですが、ブログカードのカテゴリー部分と同じcssが当たってしまいます。

対処法が分かる方、教えていただけると嬉しく思います。

###　現在のコード「お知らせ」コードは以下です

パンくずリスト「お知らせ」部分を検証でみた場合のコード

<div class="breadcrumbs">

<!-- Breadcrumb NavXT 6.4.0 -->

<span property="itemListElement" typeof="ListItem">
<a property="item" typeof="WebPage" title="Go to site名" href="http://localhost:~~" class="home"><span property="name">ホーム</span></a></span>

&gt;

<span property="itemListElement" typeof="ListItem">

<a property="item" typeof="WebPage" title="Go to ブログ." href="http://localhost:~~~" class="post-root post post-post"><span property="name">ブログ</span></a>

<meta property="position" content="2"></span>
&gt;

<span class="archive taxonomy category current-item">ブログ</span></div>

パンくずリスト部分のCssコード(パンくずリスト全体をbreadcrumbsというclass名のdivタグで囲っています)

 .breadcrumbs{
   margin-left: 3em;
   margin-top: 20px;
 }
  
 .breadcrumbs span{
   font-size: 14px;
 }
  
 .breadcrumbs a{ 
   text-decoration: underline;
   color: #744775;
 }

以下の部分は本来ブログカードのカテゴリ部分に当たっているcssなのですが、この部分がパンくずリストのカテゴリ部分にも反映されています。

.category{
    margin-left: 40px;
    border: solid 2px #F4D03F;
    background-color: #F4D03F;   
    width: 75px;
    height: 25px;
    color: white;
    font-size: 18px;
    border-radius: 10px;
    text-align: center;
    display: flex;
    justify-content: center; /*左右中央揃え*/
    align-items: center; 
    position: relative;
    z-index: 2;
}

.category a{
  color: white;
}

試したこと

上のコードのクラスに指定してcssを色々試してみましたが、うまくいきませんでした。
そもそも指定のやり方が正しいのかが不明です。

お力かしていただけると幸いです。
よろしくお願い致します。

Comments

[revoiot]

CSSのコードも追記していただけますか？

[codemanvs]

cssコードも追記しました。ちなみに、現在パンくずリストのカテゴリー部分には何もcssを当てていない状態です。ただ、ブログカード のカテゴリ部分のcssがパンくずリストのカテゴリ部分にも勝手に当てられているという状態となっています....

[revoiot]

CSSが当たらないように、クラス名を変えてもダメですか？

[codemanvs]

はい。。

このコードに対してcssを当てるやり方はありますでしょうか？？
<span class="archive taxonomy category current-item">お知らせ</span>

[revoiot]

パンくずリストのhtmlも追記してもらっていいですか？

[codemanvs]

ぱんくずはプラグインを使っているため、ファイルには以下のように記載しています。
```
<div class="breadcrumbs">
<?php
if ( function_exists( 'bcn_display' ) ) {
bcn_display();
}
?>
</div>
```

それを実際に検証機能で見ると、、、いかのようです
```
<div class="breadcrumbs">

<!-- Breadcrumb NavXT 6.4.0 -->

<span property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" title="Go to site名" href="http://localhost:~~" class="home"><span property="name">ホーム</span></a></span>

&gt;

<span property="itemListElement" typeof="ListItem">

<a property="item" typeof="WebPage" title="Go to ブログ." href="http://localhost:~~~" class="post-root post post-post"><span property="name">ブログ</span></a>

<meta property="position" content="2"></span>
&gt;

<span class="archive taxonomy category current-item">ブログ</span></div>
```

[codemanvs]

依頼文本文にも書き加えました。:)

Answer 1

<span class="archive taxonomy category current-item">お知らせ</span></div>
のcategoryを消せばいいのではないでしょうか？

もしそれでダメであればまたコメントください。

Comments

[codemanvs]

確かにcateogryを消せば思い通りになるのですが、phpファイル自体には

<div class="breadcrumbs">
<?php
if ( function_exists( 'bcn_display' ) ) {
bcn_display();
}
?>
</div>

いじょうのように書いているので、どのようにcategory部分を消せば良いのか不明です。
先ほど、ググりましたがやり方が出てこずでした。

そのほかアドバイスあればよろしくお願い致します。。

[codemanvs]

できました！
パンくずリストのプラグイン管理画面の部分に、コード記載部分があるのですが、そこにcateogryが自動で出力されるようになっていて、その部分を調整することでブログカードのcategory部分のcssが当たらないようにできました。

色々とアドバイスをいただき、ありがとうございます ^o^
感謝しています。。。。