ウェブ検索

ブログの使い方

タグクラウドをデザインする

このガイドではデザインをカスタマイズする方法について記載します。
日々ガイドの充実を図っておりますが、説明不足な点がある場合があります。デザインのカスタマイズ方法については、サポート外ですので、どうしても分からない場合は、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;
}

使い方メニュー

Q&Aメニュー

livedoorナレッジで探す

関連リンク

お問い合わせ

ヘルプを読んでも疑問が解決しない方はこちらをお読みください。

ご意見・ご要望

コンテンツやサービスにご意見・ご感想がございましたらこちらからどうぞ。