Welcome to my blog

vanillaice (Akira)

vanillaice (Akira)

以前の記事でタグクラウドはこんな感じでプラグイン登録します みたいなのを書いたのですが
Valid である(web標準に準拠した正式なソースコード) ことに拘りを持たれる方は
CSSファイルを別途用意されることをおすすめします

元記事
タグクラウド入れてみました

上記URLにありますやり方では W3Cバリデートの際に「エラー」としての判定結果を頂戴してしまいます(笑)


どういうことかと言うとですね
現在のweb標準では HTML(構造・定義)とCSS(レイアウト・スタイリング)とを
完全に分離させる というのが強く推奨されています
従来よく使われていたように
HTML文書の中にCSSを織り交ぜて書くやり方は「非推奨」です

というわけで
タグクラウドのスタイリングに関する事項は 一つのCSSファイルとしてまとめ
テンプレ毎にそのファイルを head情報内に放り込む
これがベターなのではないでしょうか (´・ω・`)



大体どのテンプレでもこんな感じになってます
link から始まるタグの集まりですね
これはCSSファイルへのアクセスなのですが 一番上のものは必ず入ってます
これが各テンプレートのスタイリング内容です
一番下 RSS となっているものは 入ってない場合もあります

プラグイン側に記入するソースは以下の通り(フリーエリア または 公式タグクラウドの内容書き換え)


<ul class="tag_cloud">
<!--stag-->
<li class="t_large t_ordinary<%stag_count>">
<a href="<%stag_url>" title="<%stag_count>hits"><%stag_name></a>
</li>
<!--/stag-->
</ul>


そしてCSSの方ですが
Crescent Eve などのhtml専用エディターをお持ちでない方は Windows標準のメモ帳で作成します


.tag_cloud {
line-height: 1;
font-size: 13px;
padding: 10px 0;
}

.tag_cloud li {
display: inline;
padding: .3em;
list-style-type: none;
}

.t_large a {
font-size: 167%;
font-weight: bold;
}

.t_ordinary14 a, .t_ordinary13 a, .t_ordinary12 a,
.t_ordinary11 a, .t_ordinary11 a, .t_ordinary10 a {
font-size: 136%;
font-weight: bold;
}

.t_ordinary9 a, .t_ordinary8 a, .t_ordinary7 a,
.t_ordinary6 a, .t_ordinary5 a {
font-size: 122%;
font-weight: normal;
}

.t_ordinary4 a, .t_ordinary3 a,
.t_ordinary2 a, .t_ordinary1 a {
font-size: 100%;
font-weight: normal;
}


上記内容を .css 拡張子で保存
どっとしーえすえす です
出来上がったファイルをFC2にアップロードして URLを取得します
それを利用して


<link rel="stylesheet" href="ここにファイルアドレス">


これを… link の集まりの2番目ぐらいで良いと思います
そこへペタリ
それだけです ( ゚Д゚)ノ
この方式をとりますと W3C判定でもエラーを吐き出したりはしません
ただしテンプレを変更されましたら 忘れずに書く というのだけ気をつけます

タグクラウド 実用性よりも見た目の部分が大きいかと思います
見た目より実用性重視の方は 通常の公式ものを使うと良いですね


関連記事
最終更新日2015-06-05
Posted by

Comments 0

There are no comments yet.

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い