vanillaice (Akira)

vanillaice (Akira)

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

元記事

タグクラウド入れてみました - カスタマイズ

こういうの最近よく見かけますよね (´・ω・`)いわゆる『タグクラウド』と呼ばれるものですがこちらのサイト様をお手本に導入してみましたスクリプト不使用のFC2ブログ用タグクラウドkofumo 様とってもわかりやすく説明してくださってますのでここで私が再度説明する間でもないのですが一つだけ付け足しとして全体のスタイルをどこに記述するか なんですけどもね...



上記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判定でもエラーを吐き出したりはしません
ただしテンプレを変更されましたら 忘れずに書く というのだけ気をつけます

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


関連記事
Posted by

Comments 0

There are no comments yet.

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い
該当テンプレートの専用記事にお願いします。無関係な記事でのコメントはお控えください。
テンプレートカテゴリ