【JIN】カテゴリーの角丸をなくす

この記事には、プロモーションが含まれています

【JIN】に乗り換えましたが、【stork】のテプラみたいなカテゴリのレイアウトが好きだったので、【JIN】の丸っぽさを四角く変更したくて試行錯誤しました。私はこれを、このまま「外観/カスタマイズ/追加CSS」に書き込んでいます。

カスタマイズは自己責任でお願いします。

カスタマイズの途中ですが、お知らせします

/* 角丸のサイズを指定する */
と書かれている行の数値を修正すると、お好みの角丸感に変更できます。

/* 記事のカテゴリの角丸をとる */
.cps-post .cps-post-header .cps-post-cat a {
    font-size: 0.8rem;
    color: #fff !important;
    border-radius: 0px;  /* 角丸のサイズを指定する */
    line-height: 0;
    padding: 1px 8px 1px 8px;  /* 天左地右の余白を指定する */
}
/* topページマガジン型のカテゴリの角丸をとる */
.post-list-mag .post-list-item .post-list-inner .post-list-meta .post-list-cat, .post-list-mag3col .post-list-item .post-list-inner .post-list-meta .post-list-cat {
    position: absolute;
    color: #fff !important;
    letter-spacing: 0;
    border-radius: 0px;  /* 角丸のサイズを指定する */
    top: 0px; /* 天からのアキを指定する */
    left: 0px; /* 左端からのアキを指定する */
    font-size: 0.7rem;
    padding: 1px 8px 1px 8px;  /* 天左地右の余白を指定する */
    margin-left: -1px;
    font-weight: 500;
}
/* topページベーシックのカテゴリの角丸をとる */
.post-list.basicstyle .post-list-item .post-list-inner .post-list-cat {
    display: inline;
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0;
    position: absolute;
    color: #fff !important;
    border-radius: 2px;  /* 角丸のサイズを指定する */
    top: 0px; /* 天からのアキを指定する */
    left: 0px; /* 左端からのアキを指定する */
    padding: 1px 8px 1px 8px;  /* 天左地右の余白を指定する */
}
550600

できた〜!と喜んでいたら、ピックアップコンテンツの角丸が抜けていました…。そのうち修正…しないままテーマを乗り換えました。

シェアしてくれてありがとう
  • URLをコピーしました!
目次