TagCloudページのスタイル変更

以前、「TagCloudページの設置」で設置した TagCloud のスタイルを変更してみました。

参考にさせていただいた3ping.orgでは多彩なスタイルが紹介されています。

なお、今回のスタイル変更はMovable Type 備忘録さんの「TagSupplementals プラグインでタグクラウドを作る」をベースに、3ping.orgさんの「Tag Cloudのスタイル」の記述例を参考にスタイルシートのみを変更しました。

このブログのTagCloudページのHTMLコードとスタイルシートは以下のとおりです。

<ul id="tags"> <MTTags sort_by="modified_on" sort_order="ascend">  <li title="<$MTTagName$> : <$MTTagCount$> : <$MTTagLastUpdated format="%Y-%m-%d"$>"><a href="<$MTTagSearchLink$>" rel="tag"><$MTTagName$></a></li> </MTTags></ul>
#tags * {    font-size: 1.5em;}#tags {    margin: 0;    padding: 0.5em 10px;    list-style: none;    line-height: 1.25;    text-align: center;}#tags li {    margin: 0;    padding: 0;    display: inline;}#tags li a {    padding: 0 5px;    border-width: 1px;    border-style: solid;    position: relative;    text-decoration: none;    background-color: #fff;}#tags li.rank-1 a {    border-color: #df28ac;    z-index: 6;    font-weight: bold;    color: #df28ac;}#tags li.rank-2 a {    border-color: #eb79b5;    top: 5px;    z-index: 5;    font-weight: bold;    color: #eb79b5;}#tags li.rank-3 a {    border-color: #c27fb7;    z-index: 4;    font-weight: bold;    color: #c27fb7;}#tags li.rank-4 a {    border-color: #a77f9f;    top: 5px;    z-index: 3;    color: #a77f9f;}#tags li.rank-5 a {    border-color: #8a7f9f;    z-index: 2;    color: #8a7f9f;}#tags li.rank-6 a {    border-color: #507f9f;    top: 5px;    z-index: 1;    color: #507f9f;}#tags li a:hover {    text-decoration: none;    border-color: #fff;    z-index: 10;    color: #fff;    background-color: #cc0063;}

▽参考サイト
Movable Type 備忘録:TagSupplementals プラグインでタグクラウドを作る

  • このエントリーをはてなブックマークに追加

関連記事

  1. NO IMAGE

    2008.04.14

    AddClips
  2. NO IMAGE

    2006.04.25

    Favicon
  3. NO IMAGE

    2009.12.19

    WordPress 2.9
  4. NO IMAGE
  5. mono-lab

    2011.05.19

    衣替え2
  6. NO IMAGE

    2008.04.11

    QRコード

コメントをお待ちしております

2008年5月
« 4月   6月 »
 123
45678910
11121314151617
18192021222324
25262728293031