Blogger では、投稿する際にタグ付けたラベルは、一覧表示されるだけ。これに加えて、タグクラウドを表示させたい。
方法
New Blogger Tag Cloud / Label Cloud にカスタマイズの方法と、ソースコードが掲載されていた。
まず、テンプレート > HTML の編集 を選択し、テンプレートを編集するためのテキストエリアを表示させた。
先のサイトでは、タグクラウドのソースコードが 3 つの部分に分かれていた。それぞれ表示されるタグクラウドに対して、次の役割を持つ。
- デザイン (CSS)
- ウィジェットの表示をコントロールするための変数
- ウィジェット (本体)
デザイン (CSS) 部の設定
「/* Label Cloud Styles」 ではじまるコードを b:skin タグで囲まれる中に入れた。
b:skin というのは、レイアウト用フォント タグとカラー タグ によると、
コードの
<head>セクションでは、<b:skin> </b:skin>タグの対を定義する必要があります。 これらのタグの間に CSS スタイルを宣言し、デザインにフォントおよびカラー ページで使用する変数名を記述します。
ウィジェットの表示をコントロールするための変数の設定
「// Label Cloud User Variables」とコメントが書かれているコードを head タグで囲まれる中に入れた。このコードの変数の値を変更すると、タグクラウドの表示を変えることができる。
ウィジェットの設定
今回は、既存のラベル表示を残しておくことにした。
「<b:widget」ではじまるコードを既存の
<b:widget id='Label1' locked='false' title='ラベル' type='Label'/>
と書かれているラベル一覧を表示するためのウィジェットの上に追加した。ただし、このままではウィジェットの id が衝突するので、以下のように、タグクラウドの id を Label2 とした。また、title が Label Cloud となっていたが、これを「タグクラウド」に変更した。
<b:widget id='Label2' locked='false' title='タグクラウド' type='Label'>
3 つの設定ができたら、「プレビュー」ボタンを押して表示を確認し、問題なければテンプレートを保存する。
参考
ウィジェットについては、以下のページを参考に。
0コメント:
コメントを投稿