.bct-together .blogcard-label::after {
color: #0b0b33;
}

.bct-together .blogcard-label.internal-blogcard-label {
background-color: #93d193;
}

たぶん、これでいけそうな気がします。

何が、問題か、と言えば CSS の「セレクター」が違っているからではないかと思います。

セレクターを探すには、ブラウザのデベロッパーツールの使い方がわかってくると探し易いかなと思います。

デベロッパーツールの使い方は、わいひらさんの「寝ログ」や、かうたっくさんの「ビバりずむ」に詳しい記事があるので見てみてください。

デベロッパーツールを使うときは、サイトプロテクターのプラグインはOFFにした方がやり易いかと思います。

それから

ブログカードをカスタマイズしたく、子テーマのCSS編集に
添付のように記入しました。

記入したのはstyleを見ればかわりますが、該当URLを置いてくださいね。

どこにブログカードを出しているのか、知らないサイトさんのブログカードを置いている「該当ページ」を探すのは回答側的にはキツイですので・・・。

トップページを探してもなかったので ? 

不具合・カスタマイズ対象ページのURLを提示し高速化を無効にしてください

該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

leafytree様

かうたっく様

早速ありがとうございました。

・・・サイト名を明記することを失念していました。
お手数をかけました。

【サイト名：wwishstyle  URL： https://wwish.style 】

教えていただいたものを書き足してみたのですが、
やはり反映されません。

どうしたものでしょうか。

一回いままでのブログカード関連のカスタマイズを
削除したほうがよいのでしょうか？

お手数をおかけしますが、引き続きよろしくお願いいたします。

wwishstyle さん

そうですね、いままでのブログカードのラベルに関するCSS を一旦、コメントアウトするなどしてみると良いかと思います。

/*と*/で挟めば無効になります。

冒頭でご案内させていただいたCSS は、「あわせて読みたい」のラベルだけを対象にしています。

「関連記事」などのラベルも全て変更したいということですと、また変わってくるかと思います。

あと、プラグインの「WP Copy Protect 1.6」はトピックで問題が解決するまでの間、OFFにしていただけるとありがたいです。

また、かうたっくさんが、お願いしたのは、サイト名ではなく、今回の表示を修正したいブログカードが掲載されているページのURLをお知らせくださいという意味です。

追記：ブログカード関連のCSSを沢山書かれているようですので、全部削除してしまうと見た目が変わってしまうので、問題のありそうなCSSを コメントアウトしてみるのが良いと思います。

wwishstyle さん

もう一つ気になったのですが、子テーマの CSS 以外の場所にも、似たような CSS を設置していませんか？　例えばページごとのカスタムCSSとか・・

さらに追記しておきます。

・・・サイト名を明記することを失念していました。
お手数をかけました。

【サイト名：wwishstyle  URL： https://wwish.style 】

初めに書いてます。

https://gyazo.com/b9bb77b7f63f3de167ccd304c11b7e56

一回いままでのブログカード関連のカスタマイズを
削除したほうがよいのでしょうか？

お手数をおかけしますが、引き続きよろしくお願いいたします。

実際の状態を見ないと何も言えないです。

教えていただいたものを書き足してみたのですが、
やはり反映されません。

どうしたものでしょうか。

一回いままでのブログカード関連のカスタマイズを
削除したほうがよいのでしょうか？

聞く前に、ご自身が試してみるのも良いと思います。

それから書いてる事を見てますか？？？？

再度書いておきますね。

あと、プラグインの「WP Copy Protect 1.6」はトピックで問題が解決するまでの間、OFFにしていただけるとありがたいです。

このように回答者さんが言ってるのですが、意味はわかりますか？？？

WP Copy Protectというプラグインを一時的に停止してください。と言ってる感じです。

わいひらさん
私なども書いてますが、

どこにブログカードを出しているのか、知らないサイトさんのブログカードを置いている「該当ページ」を探すのは回答側的にはキツイですので・・・。

トップページを探してもなかったので ? 

• 該当ページのURLの意味

がいとう
【該当】
《名・ス自》一定の資格・条件にあてはまること。

https://gyazo.com/dd2d5d87fb73e91df21c96232c14559f

その条件とは、ブログカードが置いているURLのこと。サイト名は聞いてない。書いてるので❦

https://gyazo.com/30995a82da8fed9ec3ea0f65e4029404

読んでくださいね。

いつまでたってもこのやり取りを繰り返したくないですので、よろしくお願いします。

wwishstyle さん

ブログカードのラベルの色はインラインのCSSで指定されているようなので、

.blogcard-label::after {
color: #0b0b33! important;
}

.blogcard-label.internal-blogcard-label {
background-color: #93d193 !important;
}

「!important 」を指定すればいいのかもしれません。

なお、上記のCSSだと全てのラベルの色が対象になるかと思います。

これで、上手く表示されれば、子テーマの、

.blogcard::before {
content: 'あわせて読みたい';
position: absolute;
top: -.8rem;
left: auto;
font-size: 50%;
background-color: #68d6cb;
padding: .6em 1em;
font-weight: bold;
color: #0b0b33;
border-radius: 2px;
}

このCSSは要らなくなるかと思います。

また、別の場所（カスタムCSS？）に設置してある、

.blogcard::before {
content: 'あわせて読みたい';
position: absolute;
top: -.8rem;
left: auto;
font-size: 50%;
background-color: 
#68d6cb;
padding: .6em 1em;
font-weight: bold;
color: #fff;
border-radius: 2px;
}

も要らないかなと推測しています。

次回、なにかお問い合わせのときは、プラグインの「WP Copy Protect 1.6」はOFFになさってからの方がよろしいかと思います。

wwishstyle さん

いろいろと推測も含めて書いてしまいましたが、もしかすると、ラベルの背景色と文字色を変える他にラベルの位置や文字の大きさなど他にも変更したいことがあるのかなと思ったりもしています。

サイトを見ると、添付の画像のように表示されていますし・・

  leafytree様

ありがとうございます。

一度やってみます。

あれから私自身でも調べてみて、

ブログカードがいくつかの種類があることに

気づきました。

該当のプラグインをOFFにして、　全ブログカードが同じになるように再度トライしてみます。

ありがとうございました。

かうたっく様

日本語の意味までありがとうございました。

わからないことは、かうたっくさんのページも読み長は、私なりに調べてやっています。かうたっくさんには、ご不快に思われているようで申し訳ありません。

日本語の意味までありがとうございました。

どういたしまして。

該当URLを。とお願いした際、サイト名　でかえって来たので、まだ驚いています。

誇張すれば　やってほしい。ばかりが先行している人でも見落とさないか　と思ったんですけど。

該当URLのご提示は、ご自由にどうぞ。

ただ独自カスタマイズは　該当URLは必須だと思いますよ。想像だけで状態は分からないので。

いつかご理解いただけたらと思います。

ブログカードのラベルは、cocoon設定の「全体」タブで、「サイトキーカラー」を変更すると、連動して変更され、インラインのCSSで出力される仕様になっているみたいですね。

インラインのCSSなので、これを上書きするときは「!important」を指定する必要があるようです。

CSSを適用するセレクタは、わいひらさんが、わかりやすい Class属性 の名前を付けてくださっているので、デベロッパーツールで探せば、見つかるかと思います。

また、CSSの適用範囲を絞る場合は、「複数セレクタ」や「子孫セレクタ」を上手く活用するといいのかなと思います。

wwishstyle さんのおかげで、また、ひとつ勉強になりました。

ブログカードのラベルは、cocoon設定の「全体」タブで、「サイトキーカラー」を変更すると、連動して変更され、インラインのCSSで出力される仕様になっているみたいですね。

インラインのCSSなので、これを上書きするときは「!important」を指定する必要があるようです。

 leafytreeさんに。

それを行うと、AMPビューで反映されないなどあるかと思います。

CSSの詳細度　などで検索すればわかると思います。優先順位を強いものにすれば問題ないです。

あとAMPビューはAMPのキャッシュ削除が必要になった記憶があります。
っとだけ❦

投稿者:: leafytree

ブログカードのラベルの色はインラインのCSSで指定されているようなので、

.blogcard-label::after {
color: #0b0b33! important;
}

.blogcard-label.internal-blogcard-label {
background-color: #93d193 !important;
}

「!important 」を指定すればいいのかもしれません。

ついでに、勉強熱心さんの方へっと。

class属性の　blogcard-label　はdivで囲まれてますよね？？確認してませんがたぶん。

その場合CSSの詳細ドは

div..blogcard-label::after::after

これだけでhead内インラインより強くなります。

.blogcard-label　の親要素。class属性　blogcard-label　のdivを囲むdivや、class属性　entry-content　article　main　もっと親要素のbodyクラスなどを半角スペースで区切っても優先順位は強くなりますよ。

※領域を囲む親にあたる要素（その装飾をカスタマイズしたいかによっても使える親要素を指定すればOK）：子孫関係

ざっくりですが、頑張ってください。

あと

投稿者:: leafytree

あと、プラグインの「WP Copy Protect 1.6」はトピックで問題が解決するまでの間、OFFにしていただけるとありがたいです。

この対処方法は、ブラウザを開いて、検証画面をあらかじめ出しておく。

出した状態で、URLをペーストすれば、Copy Protectの意味はなさないですよ＾＾

悪いようには使わないと思いますけど、面倒なのでそのようにすれば良いカモです。

投稿者:: leafytree

もう一つ気になったのですが、子テーマの CSS 以外の場所にも、似たような CSS を設置していませんか？　例えばページごとのカスタムCSSとか・・

検証画面

Elementsを開いた状態にある
styles

そこを広くとれば

• style.css?v…061032:8999

このような記載があります。

そのCSSをクリックすれば、CSSが書いている場所へ飛びます。

https://wp-cocoon.com/wp-content/themes/cocoon-master/style.css?ver=5.3.2&fver=20191221061032

上記リストは上記styleの8999行目です。

圧縮されているとstyle.cssの場合、styleが1本になりますが。

head内インラインであれば、だいたい想像がつきます。ずっと上のほうにstyleタグのid属性をチェックすれば、カスタムCSS（これはCocoonのもの、WordPressデフォルトのもの）などあります。

Cocoon設定のものは、別途あるので、文字列を見ればだいたい想像がつくと思います。

頑張ってくださいね！

追記

ブラウザキャッシュ有効化：0
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
WEBフォントLazy Load：0
JavaScript（フッター）：1

このようになっているので、基本CocoonのCSSの圧縮はされてません。されている場合：プラグインの高速化です。デベロッパーツールを見ると、Cocoonではないと分かりますよ。

圧縮されてない、プラグインの影響はない場合は、Cocoon・WPデフォルト。もしくは独自カスタマイズなど考えられるかと思われます。

投稿者:: かうたっく

投稿者:: leafytree

ブログカードのラベルの色はインラインのCSSで指定されているようなので、

.blogcard-label::after {
color: #0b0b33! important;
}

.blogcard-label.internal-blogcard-label {
background-color: #93d193 !important;
}

「!important 」を指定すればいいのかもしれません。

ついでに、勉強熱心さんの方へっと。

class属性の　blogcard-label　はdivで囲まれてますよね？？確認してませんがたぶん。

その場合CSSの詳細ドは

div..blogcard-label::after::after

これだけでhead内インラインより強くなります。

 

.blogcard-label　の親要素。class属性　blogcard-label　のdivを囲むdivや、class属性　entry-content　article　main　もっと親要素のbodyクラスなどを半角スペースで区切っても優先順位は強くなりますよ。

class属性の　blogcard-label　はdivで囲まれてますよね？？

上間違い、正確ではなかったです。

divのclass属性blogcard-label　であればってはなしです。

• div.blogcard-label　これは以下に比べて詳細度が高い。優先順位が高い
• .blogcard-label　これは上に比べて詳細度が低い。優先順位が低い

投稿者:: かうたっく

投稿者:: leafytree

ついでに、勉強熱心さんの方へっと。

class属性の　blogcard-label　はdivで囲まれてますよね？？確認してませんがたぶん。

その場合CSSの詳細ドは

div..blogcard-label::after::after

これだけでhead内インラインより強くなります。

 

.blogcard-label　の親要素。class属性　blogcard-label　のdivを囲むdivや、class属性　entry-content　article　main　もっと親要素のbodyクラスなどを半角スペースで区切っても優先順位は強くなりますよ。

※領域を囲む親にあたる要素（その装飾をカスタマイズしたいかによっても使える親要素を指定すればOK）：子孫関係

ざっくりですが、頑張ってください。

上記の以下部分

その場合CSSの詳細ドは

div..blogcard-label::after::after

これは間違い。よくあるコピペミスで、反映しないよ…（・；）パターンです。

半各スペースなしのdivのclass要素blogcard-labelを指定し、優先順位を上げたい場合の記載方法。正確には以下です。

div.blogcard-label::after

追記

CSSはやる気になれば独学で誰でもできますよ。そこにちょっとだけ誰かが教えてくれたら、少し早道になると思います。

独学で頑張る人には、応援できるときだけ　応援しようと思ってます。私のその系記事も知りたい人用だから、答えだけ知りたい人には向かないと思います＾＾；

かうたっくさん

いろいろと教えてくださって、ありがとうございます！

特に、「!important」がAMPビューで反映されない場合がある

というのは、全く関知していませんでした。

自分でも、ちょっと探ってみようかな ? 

leafytree様

何度もありがとうございました。

おかげさまで希望に近い形になりました。

後はスニペットと色を変えるだけになりました。

AMPのページには一部反映されていない箇所もありますが、デザイン的に気になるほどではありません。

実はこの現象は以前は全くおこっていませんでした。

しばらくぶりにブログを更新、あわせてcocoonをアップデートしたら、この問題が出てきました。

何か他にも原因があったのかもしれません。

leafytreeさんには、かうたっくさんが仰っているように、こちらが答えだけを知りたいわけでないことをご理解頂けると幸いです。

かうたっく様

もし当方の質問がお気に障ったのであれば、

今後はスルーして頂ければ幸いです。

よろしくお願いします。

既にwwishstyle さんがサイトでは修正されていらっしゃるようでしたが、私もローカルのテストサイトでcocoon設定の「全体」タブで、「サイトキーカラー」を変更した上で「!important」を使わない CSS を子テーマに書いてみました。

ほぼ、かうったくさんから教わった通りなんですけれども。

div.blogcard-type div.blogcard-label {
background-color: #f8d2dc;/*ブログカードのラベルの色*/
}

div.blogcard-label::after {
color: #0b0b33;/*ブログカードのラベルの文字の色*/
}

div.blogcard-label .fa::before {
color: #0b0b33;/*ブログカードのラベルのアイコンの色*/
}

div.blogcard-type a.a-wrap div.blogcard {
border-color: #68d6cb;/*ブログカードの囲み枠線の色*/
}

追伸：

wwishstyle さん

子テーマのCSSを拝見しますと、ご自身でもいろいろと試行、工夫なさっているのがわかります。

冒頭にも

何が問題なのか教えていただけると幸いです。

答えを教えて欲しいなんて書いてませんものね。 ? 

wwishstyle さんがトピックを立ててくださったことで、私も勉強になりますし、トピックをご覧になられる方も、考えるヒントが得られると思っています。 ? 

leafytree様

色々とありがとうございました！！

新しいコードも私の今までのCSSの編集のこと、そして気持ちもまでも汲み取って頂き嬉しくて…泣きそうです?

ほかに言葉が思いつきません。

本当にありがとうございました?‍♀️