タグの装飾

デモ(HTML)

HTMLソース

<div class="taxonomy-post_tag wp-block-post-terms">
      <a href="#" rel="tag">gutenberg</a>
      <span class="wp-block-post-terms__separator"> </span>
      <a href="#" rel="tag">プラグイン</a>
      <span class="wp-block-post-terms__separator"> </span>
      <a href="#" rel="tag">ページビルダー</a>
</div>

ブロックテーマにもよるが、出力されるタグのHTMLソースは上記の様になります。

CSS設定

今回は、単語カードっぽいデザインにします。

/theme/テーマ名/style.css

/*----------------------------------------------------------------------------
  タグの装飾
  ---------------------------------------------------------------------------- */
.taxonomy-post_tag a {
	line-height: 26px;
	position: relative;
	display: inline-block;
	height: 26px;
	margin: 0 0px 10px 10px;
	padding: 0 20px 0 23px;
	-webkit-transition: color 0.2s;
	        transition: color 0.2s;
	text-decoration: none;
	color: #ffffff;
	border-radius: 0 3px 3px 0;
	background: #5d69d0;
}
.taxonomy-post_tag a::before, .taxonomy-post_tag a::after {
	background: #1b1b1b;/*背景色*/
}
.taxonomy-post_tag a::before {
	position: absolute;
	top: 10px;
	left: 3px;
	width: 6px;
	height: 6px;
	content: '';
	border-radius: 10px;
}
.taxonomy-post_tag a::after {
	position: absolute;
	top: -1px;
	left: -6px;
	width: 0;
	height: 0;
	content: '';
	border-style: solid;
	border-width: 14px 8px 14px 0;
	border-color: transparent #5d69d0 transparent transparent;
	border-radius: 4px;
}
.taxonomy-post_tag a:hover {
	background: #555555;
}
.taxonomy-post_tag a:hover:after {
	border-color: transparent #555555 transparent transparent;
}
.taxonomy-post_tag .wp-block-post-terms__separator {
	display: none;
}

参考サイト

[パーツ]タグ シンプルなタグデザイン逆向きバージョン

デザイン自体はこちらのデザインを参考にしました。ありがごうございます。

最近の記事

カテゴリー

カレンダー

2025年2月
 12
3456789
10111213141516
17181920212223
2425262728  

タグクラウド

css gutenberg html JavaScript カスタマイズ カラム テーマ プラグイン ページビルダー

Beabo

コンテンツへスキップ