【CSS】タグのデザイン【WordPress】

タグをデザインしてみたので記事として投稿．

ブログでタグはそのページの特徴を表す単語となる．

詳細は【WordPress】タグとカテゴリの使い分けを参照のこと．

上のようなタグを CSS のみでデザインする方法．

タグをデザインするための変更点

コードサンプル

TaxoPress を使っている場合，single.php などに追加する HTML は以下のようになる．
TaxoPress を導入していない場合，the_tags(); とすればよい．

<div class="tag"><?php st_the_tags(); ?></div>

CSS は以下のようになる．

.tag a {
  position: relative;
  display: inline-block;
  padding: 4px 6px 4px 24px;
  margin: 0 0 0 4px;
  color: #333;
  background: #BEF;
  text-decoration: none;
}
.tag a:hover {
  background: #9CF;
}
.tag a:before {
  position: absolute;
  margin: 0 0 0 30px;
  top: calc(50% - 5px);
  left: -22px;
  width: 10px;
  height: 10px;
  content: '';
  border-radius: 50%;
  background: #FFF;
}

TaxoPress 設定

TaxoPress の設定(Setting) を開き，

Legacy タブを押し，

さらにその下の Tags for Current Post のリンクをクリックすると

現在の記事のデザインに関する設定が出来る．

「タグの区切り文字：」を ,(カンマ) から空白に変更する．
「タグ一覧の後に挿入する文字：」を空欄に変更する．