Simplicityの記事下にあるタグを背景ありのタグにカスタマイズするCSS

Simplicityの記事下にあるタグは、デフォルトではアンダーライン入りのテキストリンクですが、こちらを背景色のあるボタンに変更したいと思います。

スポンサーリンク

カスタマイズ前

カスタマイズ後

/* ================== タグを背景ありにする================= */
.article .post-tag a {
        background: #ea798d;
        color: #fff;
        line-height: 100%;
        text-decoration: none;
        font-weight: 400;
        font-size: 0.8em !important;
        padding: 4px 6px 4px 6px ;
        margin:  10px 5px 5px 0px;
        -webkit-transition: .3s ease;
        -moz-transition: .3s ease;
        -o-transition: .3s ease;
        transition: .3s ease;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -ms-border-radius: 3px;
        -o-border-radius: 3px;
        border-radius: 3px;     
}
.article .post-tag a:before {
  font-family: 'FontAwesome';
  content: "\f02b";
  margin-right: 4px;
}

.article .post-tag  a:hover {
        background: #ffa8b5;
}

以下サイトを参考にさせていただきました。ありがとうございました。

参照サイト:https://blog.icchi.me/customize-simplicity-taglist/