Nucleusでタグクラウドをデザインする方法



タグクラウドを上の画像のように装飾する方法をまとめてみました。
※この記事では「NP_TagEX.php」を使用してタグクラウドを生成していることを前提にしていますが、その他のプラグインにも応用可能だと思います。

「NP_TagEX.php」は<%fontlevel%>を利用して、各タグの大きさを変更しているので、それを利用してデザインします。


  1. template for 'tagIndex'への記述

    2. 「プラグイン管理」→「Tags Extension-編集」→「template for 'tagIndex'」を以下のように変更。
    <li class="level<%fontlevel%>" title="<%tagamount%> post(s)"><a href="<%taglinkurl%>"><%tag%></a></li>
    ↑はみ出していますが問題なくコピーできます。
    参考-http://japan.nucleuscms.org/bb/viewtopic.php?t=2473&start=0&postdays=0&postorder=asc&highlight=

  2. スキンへの記述

    3. タグクラウドを表示させたいスキンに以下の記述を追加。
    <ul class="tagCloud"> 
    <%TagEX(list100/1/4/1/4)%>
    </ul>

  3. CSSでデザインを設定

    4. スタイルシートに「level1」や「level2」を使って文字の色や大きさを指定。
    以下のサイトの管理者は、タグクラウドの装飾に使えるCSSを配布しておられますので、その中から選んだCSSをスキンのCSSに追加。
    参考-Tag Cloudのスタイル
    ※<%fontlevel%>ではfontlevelの数字が大きくなるほど、文字も大きくなりますが、上記のリンク先では数字が小さくなるほど数が大きくなるように設定されていますので、数字を逆転させてください。
    ul.tagCloud li.level6 a→ul.tagCloud li.level1 a
    ul.tagCloud li.level5 a→ul.tagCloud li.level2 a
    .
    .
    .
    ul.tagCloud li.level1 a→ul.tagCloud li.level6 a

  • Posted: 06/06/08 05:05PM
  • Category: Nucleus