Home> MovableType > MT5オシャレなタグクラウド

MT5オシャレなタグクラウド

Posted by: onepiece
2010年2月19日 13:35
MovableType
CSS, MT5, タグ, タグクラウド

タグクラウドだけできました。といっても、有名どころのCSSを真似ただけです。MT5のページ分割は未だにできません。先にHTMLソースの成形とアフィリエイト広告をやろう。

MovableType（MT5）用のタグクラウド用CSSは続きに記載します。

/*--------------------------------------
Tag Cloud
---------------------------------------*/
ul.tagCloud {
margin: 0.3em 0.2em !important;
line-height: 1.1 !important;
font-size: 13px;
text-align:center !important;
}
ul.tagCloud li {
margin: 0;
padding: 0 !important;
display: inline;
font-size: 100%;
border-style: solid;
}
ul.tagCloud li.level1 {
border-width: 3pt 3pt 4pt 2pt;
border-color: #d9e5eb;
background-color: #d9e5eb;
}
ul.tagCloud li.level2 {
border-width: 0pt 1pt 2pt 4pt;
border-color: #6897af;
background-color: #6897af;
}
ul.tagCloud li.level3 {
border-width: 2pt 3pt 3pt 2pt;
border-color: #7ea6ba;
background-color: #7ea6ba;
}
ul.tagCloud li.level4 {
border-width: 2pt 1pt 4pt 2pt;
border-color: #95b6c7;
background-color: #95b6c7;
}
ul.tagCloud li.level5 {
border-width: 1pt 0 2pt 2pt;
border-color: #acc6d3;
background-color: #acc6d3;
}
ul.tagCloud li.level6 {
border-width: 0 2pt 0 0;
border-color: #c3d6df;
background-color: #c3d6df;
}
ul.tagCloud li a {
padding: 2px 5px !important;
border-width: 1pt;
border-style: solid;
position: relative;
text-decoration: none;
color: #fff !important;
background-color: #fff !important;
}
ul.tagCloud li.level1 a {
border-color: #6897af;
z-index: 6;
font-size: 167%;
font-weight: bold;
background-color: #6897af !important;
}
ul.tagCloud li.level2 a {
border-color: #6897af;
top: 5px;
z-index: 5;
font-size: 136%;
font-weight: bold;
background-color: #7ea6ba !important;
}
ul.tagCloud li.level3 a {
border-color: #6897af;
z-index: 4;
font-size: 114%;
background-color: #95b6c7 !important;
}
ul.tagCloud li.level4 a {
border-color: #7ea6ba;
top: 5px;
z-index: 3;
font-size: 100%;
background-color: #acc6d3 !important;
}
ul.tagCloud li.level5 a {
border-color: #7ea6ba;
z-index: 2;
font-size: 85%;
background-color: #c3d6df !important;
}
ul.tagCloud li.level6 a {
border-color: #95b6c7;
z-index: 1;
font-size: 70%;
background-color: #d9e5eb !important;
}
ul.tagCloud li a:hover {
z-index: 10;
border-color: #5a89a1 !important;
background-color: #5a89a1 !important;
}