Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
widget-tag-cloud.phpに適用するスタイル例
ul.tag_cloud_with_count {
margin: 0;
padding: 0;
list-style: none;
}
ul.tag_cloud_with_count li {
display: inline-block;
margin: 0 0 .3em 1em;
padding: 0;
}
ul.tag_cloud_with_count li a {
position: relative;
display: inline-block;
height: 30px;
line-height: 30px;
padding: 0 1em;
background-color: #3498db;
border-radius: 0 3px 3px 0;
color: #fff;
font-size: 13px;
text-decoration: none;
-webkit-transition: .2s;
transition: .2s;
}
ul.tag_cloud_with_count li a:before {
position: absolute;
top: 0;
left: -15px;
content: '';
width: 0;
height: 0;
border-color: transparent #3498db transparent transparent;
border-style: solid;
border-width: 15px 15px 15px 0;
-webkit-transition: .2s;
transition: .2s;
}
ul.tag_cloud_with_count li a::after {
position: absolute;
top: 50%;
left: 0;
z-index: 2;
display: block;
content: '';
width: 6px;
height: 6px;
margin-top: -3px;
background-color: #fff;
border-radius: 100%;
}
ul.tag_cloud_with_count li span {
padding: 0 .5em;
margin: 0 .5em;
background-color: #fefefe;
border-radius: 20%;
color: #333;
font-size: 12px;
text-align: center;
-webkit-transition: .2s;
transition: .2s;
}
ul.tag_cloud_with_count li a:hover {
background-color: #555;
color: #fff;
}
ul.tag_cloud_with_count li a:hover::before {
border-right-color: #555;
}
ul.tag_cloud_with_count li a:hover span {
background-color: #fff;
color: #3498db;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment