style.cssに

.cat-label {
  top: -20px;
  left: 0px;
}

のような感じでラベルの位置が画像の枠外になります。
(-20pxの部分はお好みの数値で)

トップページだけでなく他の部分のカテゴリーラベル(例えば投稿ページの関連記事の部分)にも影響があります。

前略、猫ちゃん さん

はるさんのおっしゃるように、投稿ページの関連記事などに影響が出ないように、また、スマホ表示も考慮しなくてはならなので、簡単にはいかないです。

.entry-card-wrap .entry-card-thumb {
  margin-top: 30px;
}

.entry-card-wrap .cat-label {
  top: -30px;
  left: 0;
}

@media screen and (max-width:480px) {

  .entry-card-wrap .entry-card-thumb {
    margin-top: 25px;
  }

  .entry-card-wrap .cat-label {
    top: -25px;
  }

}

上記のコードでも、まだ不備があるかもしれません。

猫ちゃん さん

スキンを別のに変更したりすると、また調整が必要かもしれません。

この辺りのデザインは、けっこうデリケートなんです。

猫ちゃん さん

先ほどの、コードを適用したときのサンプル画像を貼っておきます。

私も、どちらかと言うと、Simplicity2 のように、カテゴリのラベルは、アイキャッチの中ではない方が好みです。

リフィトリー様

画像見本まで、素早く、有難うございます。

マッハ１５のスピード級ですね。 ? 

私はようやく、外観➡（ＣＳＳの編集という項目がないから）テーマエディターかな？　or　外観➡カスタマイズ➡付随のＣＳＳエディターかな？と、まずは編集場所について、Cocoonの「サイト内検索」をしておりました。

蝸牛スピードですが、頑張って、出来上がりをご報告したいです。

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　猫

猫ちゃん さん

CSSを記述する場所は、子テーマの style.css ファイルか、追加CSS のどちらかになります。

子テーマの style.css ファイルに記述する場合は、ダッシュボードの「外観」→「テーマエディター」とたどると開けます。

あらかじめ、そこに記述してあるものは、重要な部分もあるので、消さないようにしてください。

また、追加CSSを開くには、「外観」→「カスタマイズ」→「追加CSS」とたどって開きます。

追加CSSにコードをコピペするか記述して、内容を確定するときは、すぐ上にある「公開」ボタンをクリックします。

CSSを編集するときは、必ず、文字コードをUTF-8（BOMなし）でプレーンテキストを扱うことができるテキストエディターをお使いください。

無料で高機能なテキストエディターは、沢山ありますが、私は、とてもシンプルな「Mery」というテキストエディターをオススメします。

テキストエディター「Mery」

Mery 設定方法

Macの場合は、CotEditor　というのがオススメです。

文字コードをUTF-8 BOMなし(UTF-8N)でファイル保存をする方法

リフィトリー様

重ねて有難うございます。

カードにラベルがちょっとかかっている、リフィトリーさんの画像をフォーラム返信から探し出しました。

パソコンとスマホで、すべてのカードラベルをリフィトリーさんのこの見本のようにしたいです。

2019年12月23日 23:08

すみません。投稿の仕方が分からず、添付を２つもつけてしまいました。

１つ取りました。　　　　　　　　　　　　　　猫

猫ちゃん さん

ちょっと、他の部分にも影響していまわないか心配なところもありますが、試しにコードを書いてみました。

.entry-card-wrap.a-wrap.border-element {
  position: relative;
}

.entry-card-wrap .entry-card,
.entry-card-thumb {
  position: static;
}

.entry-card-meta {
  bottom: 8px;
  right: 2%;
}

.entry-card-wrap.a-wrap .cat-label {
  top: -10px;
  left: 2%;
}

@media screen and (max-width:480px) {

  .ecb-entry-border .a-wrap {
    margin: 0 0 4.5%;
  }

}

もしかしたら、まだ、修正しなくてはならないかもしれません。

猫ちゃん さん

投稿ページ下の関連記事のカテゴリーラベルは、とても小さいので、枠線の上に持ってくるより、消してしまった方がスッキリするかもしれません。

.related-entry-card .cat-label {
  display: none;
}

リフィトリー様

は　　る　　様

　有難うございます。

　全て思い通りに、今、変更できました。

　ホント、ホント、素人の私のために知識を素早く公開してくださり、有難うございます。

　リフィトリー様のＣＳＳコードをコピーして、「外観」→「カスタマイズ」→「追加CSS」とたどって、ペーストし、「公開」しただけで、すぐに反映されました。

　２ヶ月ほど迷惑メールに鬱々としているのですが、お陰様で気が晴れました。

　みるらいとスキンのランキング数字〇表示も魅力的ですが、タイジ―ＷＰ様のスキン（スキンとは、ブログの皮膚のようなものだからそう言うのですか？こういう１つ１つの呼称がカタカナ【英語】で覚えられないので）が好きで、季節に合わせて、タイジ―ＷＰ様のスキンを取り換えて使わせていただいています。

　コノハウィング、WP、わいひら様のCocoon、タイジ―ＷＰ様のスキン、Ｉkumi様の「ああ、ブログ」の画像圧縮のTiny png情報、そして、リフィトリー様と　はる様の　ラベル位置変更ガイドおよびＣＳＳ画面への到達の仕方の明示で、あっという間に、解決いたしました。

　情報と時間を、皆様が下さったおかげです。有難うございました。

　解決ボタンはどのようにしたらいいですか？

　　　　　　　　　　　　　　　　　　　　　　　　猫 ? 

猫ちゃんさん

そう言えば、私も「解決済み」って、やった記憶がないです・・ ? 

リフィトリー様

「関連記事」へのアドバイスもやってみます。

スマホ表示は小さいですもんね。

今になって、わいひら様のランキング〇囲みを発見しました。

至らぬ説明にも、分かりやすいご教示を有難うございました。

https://wp-cocoon.com/how-to-set-adsense/#comment-16225

リフィトリー様

「関連記事」へのアドバイス、実行してみました。

ラベルを取ると、画像が全部見えて、わかりやすくなりました。

有料カスタマイズ並みのアドバイス、嬉しいです。

リフィトリー様のブログ「リフィトリーインフォ」によれば、野良の子猫ちゃんを絡まった金網から助けて、その時かじられて傷口から発熱し、２週間も点滴治療したリフィトリー様のやさしさを、私ももらいました！

　　　　　　　　　　　　　　　　　　　　　　　　　猫

似たようなトピックを３つ立てて、３つとも解決しました。

トピック冒頭の「解決済み」リンクを見つけられず、

１つだけ、文末の「解決済み」ボタンを押せました。

　　　　　　　　　　　　　　　　　　　　　　　猫

わいひらさん

エントリーカードのカテゴリー表記は、投稿日のコンテナの「entry-card-meta」にも出力されていたんですね。

display: none; を解除したら出てきました。

サムネイル画像の中じゃない方が良いと言う場合は、投稿日の付近にも表示できるように配慮されているんですね。全く気付いていませんでした。

これなら、CSSでちょっとアレンジすれば、すぐに使えそうです。

猫ちゃん さん

猫ちゃんさんのおかげで、いいことに気づきました。