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

最終更新日: 公開日: 2021年09月

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

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

詳細は【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 のリンクをクリックすると

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

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

関連ページ

 

Contact

ご質問等ありましたら,下のフォームからお願いします.

 
   
contact
Pagetop