ウェブ検索

どんな事が起きても、さくさく動くブログ

ゲストさん、お困りですか？ ログイン
ブログ
ブログトップ > ヘルプトップ > ガイド > カスタマイズ/管理 > タグクラウドをデザインする
ブログ ヘルプ
一覧を見る
ブログ ガイド
一覧を見る
livedoor ヘルプ
お問い合わせ
ヘルプを読んでも疑問が解決しない方はこちらをお読みください。
ご意見・ご要望
コンテンツやサービスにご意見・ご要望がございましたらこちらからどうぞ
タグクラウドをデザインする 一覧を見る
このガイドではデザインをカスタマイズする方法について記載します。
日々ガイドの充実を図っておりますが、説明不足な点がある場合があります。デザインのカスタマイズ方法については、サポート外ですので、どうしても分からない場合は、livedoor ナレッジをご利用ください。
1 cssについて
見た目のデザインを定義するcssはtemplate.cssに記載されています。デザインのカスタマイズにてcss（スタイルシート）を編集すると、このtemplate.cssが上書きされます。

tag-weight-0 〜 tag-weight-4：
タグの利用頻度を5段階で表しています。4が一番頻度が高いものを指します。
tag-lifetime-0 〜 tag-lifetime-4:
タグのアクティブ度を5段階で表しています。4が一番アクティブのものを指します。
cssを変更したときは、「デザイン（スタイルシート）」の再構築を忘れずに行ってください。
2 具体例
タグのアクティブ度を濃淡で表現したデザインです。
タグのデザイン
この設定のcssを以下に掲載します。このようにcssをカスタマイズすると、さまざまなデザインに変更することができます。
ul.tagcloud li a {
	border: 2px solid #FFFFFF;
	background-color: #6897AF;
	zoom: 1;
	position: relative;
}

ul.tagcloud a:link {
	color: #FFFFFF;
	text-decoration: none;
}

ul.tagcloud a:visited {
	color: #FFFFFF;
	text-decoration: none;
}

ul.tagcloud a:hover {
	filter: alpha(opacity=100);
	opacity:1;
	z-index: 5;
	text-decoration: none;
}

ul.tagcloud li.tag-lifetime-0 a {
	filter: alpha(opacity=30);
	opacity:0.30;
	z-index: 1;
}
ul.tagcloud li.tag-lifetime-1 a {
	filter: alpha(opacity=45);
	opacity:0.45;
	z-index: 2;
}
ul.tagcloud li.tag-lifetime-2 a {
	filter: alpha(opacity=60);
	opacity:0.60;
	z-index: 3;
}
ul.tagcloud li.tag-lifetime-3 a {
	filter: alpha(opacity=85);
	opacity:0.85;
	z-index: 4;
}
ul.tagcloud li.tag-lifetime-4 a {
	filter: alpha(opacity=100);
	opacity:1;
	z-index: 5;
}