【CSS】タグデザイン一覧

.tagcloud a {
	font-size: 14px !important; /* 文字のサイズ */
	line-height: 1em;
	background: #47bea0; /* 背景色 */
	color: #fff; /* 文字色 */
	display: inline-block;
	white-space: nowrap;
	padding: 8px 8px; /* 文字周りの余白 */
	margin-top: 3px; /* タグ同士の余白 */
	border-radius: 4px; /* 角を少し丸く */
	text-decoration: none;
}

.tagcloud a:hover {
 	background: #f9d635; /* マウスホバー時の背景色 */
	color: #278a71; /* マウスホバー時の文字色*/
}

.tagcloud a:before {
  font-family: "Font Awesome 5 Free";
  content: "\f00c";/*アイコンのユニコード*/
  font-weight: 900;
  padding-right: 4px;
}

.tagcloud a{
 position:relative;
 background:#93c9ff;
 display:inline-block;
 height:36px;
 color:#fff;
 line-height:35px;
 margin:5px 10px;
 padding:0 5px;
 text-decoration:none;
 font-size:12px;
}

/*タグクラウド角を尖らせる*/
.tagcloud a:before {
 border-top: 18px solid transparent;
 border-bottom: 18px solid transparent;
 border-right: 15px solid #93c9ff;
 content: '';
 display: block;
 margin-left: -15px;
 position: absolute;
 left: 0;
}

/*タグクラウドマウスオーバー時*/
.tagcloud a:hover{
color:#000; 
background:#ddd;
}

.tagcloud a:hover:before{
 border-right:0;
}

.tagcloud a {
 background: #bbb;
 margin: 3px;
 padding:6px;
 text-decoration: none;
 border-left:solid 4px #555;
 color:#fff;
 font-size:12px;
}

/*タグクラウドマウスオーバー時*/
.tagcloud a:hover{
 color: #000; 
 background:#ddd;
}

.tagcloud a {
 background:#eee;
 border:none;	
 color: #666;
 padding: 6px;
 margin:3px;
 border-radius: 3px;
 font-size:12px;
}

/*タグクラウドマウスオーバー時*/
.tagcloud a:hover {
 background: #ffc489; 
 color: #fff; 
}

.tagcloud a{
 background:#fff;
 border:1px solid #bbb;
 color:#666;
 padding:6px;
 margin:3px;
 border-radius:1px;
 text-decoration:none;
 font-size:12px;
}

/*タグクラウドマウスオーバー時*/
.tagcloud a:hover{
 background:#ff870f; 
 color:#fff; 
 border:1px solid #bbb;
}

.tagcloud a{
 background:#ffe0ef;
 color:#666;
 padding:6px;
 margin:3px;
 border-radius:20px;
 text-decoration:none;
 font-size:12px;
}

/*タグクラウドマウスオーバー時*/
.tagcloud a:hover{
 color:#333; 
 background:#ddd;
}

/*タグクラウドテキスト前アイコン*/
.tagcloud a:before{
 font-family:"Font Awesome 5 Brands";
 content:"\f19a"; 
 font-weight:400;
 color:#008db7;
 padding-right:6px;
}

.tagcloud a{
 background:-webkit-gradient(radial, 50% 100%, 0, 50% 100%, 120, color-stop(0.81, #2576b6), 
 color-stop(0.00, #b0eafc));
 margin:3px;
 padding:6px;
 text-decoration:none;
 color:#fff;
 font-size:12px;
 font-weight:bold;
 border-radius:5px;
}

.tagcloud a{
 background:none;
 margin:3px;
 padding:6px;
 text-decoration:none;
 color:#333;
 display:block;
 font-size:12px;
 border-bottom:dotted 1px #ddd;
}

/*タグクラウドマウスオーバー時*/
.tagcloud a:hover{
 margin-left:2%;
 color:#7fbfff;
}

/*タグクラウドテキスト前アイコン*/
.tagcloud a:before{
 font-family:"Font Awesome 5 Free";
 content:"\f0da";
font-weight:900;
 color:#333;
 padding-right:6px;	
}

.tagcloud a{
 padding:9px;
 text-decoration:none;
 color:#fff;
 display:inline-block;
 width:48.5%;
 font-size:12px;
 text-align:center;
 margin-bottom:6px;
 background:#7fbfff;
 border-radius:3px;
 box-shadow:0 1px 3px #ccc;
}

/*タグクラウドマウスオーバー時*/
 .tagcloud a:hover{
 color:#333;
 background:#ddd;
}

 .tagcloud a {
 padding:10px 0;
 color:#666;
 display:inline-block;
 width:48.5%;
 background:none;
 font-size:12px;
 text-decoration:none;
 border-bottom:dotted 1px #ddd;
}

/*タグクラウドマウスオーバー時*/
.tagcloud a:hover{
 color:#7fbfff;
 background:#fafafa;
 font-weight:bold;
}

/*タグクラウドテキスト前アイコン*/
.tagcloud a:before{
 text-shadow:none;
 font-family:"Font Awesome 5 Free";
 content:"\f02c";
 font-weight:900;
 color:#eedcb3;
 padding-right:6px;
}