2008-07-02 11:42

● タグクラウドの見栄え@SeeSaa

タグクラウドとはなんぞや?
という人はコチラをどうぞ。

■  タグクラウド はてなキーワード
http://d.hatena.ne.jp/keyword/%A5%BF%A5%B0%A5%AF%A5%E9%A5%A6%A5%C9

このタグクラウドが、うちではこう表示されます
tag01 

このタグクラウド、見た目が気に入らない。
文字が途中で横幅いっぱいになって次の行まで回り込んでいる。
単語単位で改行されるようにできないかなー

と、けっこう調べまくったんですが。

1行css変更するだけでできちゃいました。
検索してた時間のが長かったよママン;;

 

SeeSaa管理画面から、「デザイン」「コンテンツ」
各コンテンツ画面で、「タグクラウド」を選択。

右上の「コンテンツHTML編集」
この中にある1文を変えます。

<div id="tag_cloud_<% content.id %>" style="word-break:break-all;">

青色部分を下記のように変更

<div id="tag_cloud_<% content.id %>" style="word-break:keep-all;">

tag02 この変更で、タグクラウド部分が左の画像のようになります。単語単位で改行されてます。満足

このkeep-all、日本語のタグには効果なさそうです。日本語までは、まぁいいか。

cssの解説は下記サイト参考

■ スタイルシートリファレンス word-break
http://www.htmq.com/style/word-break.shtml

 

日本語のタグでも改行されない方法がありました。
タグをサイドバーにおかず、横幅広く見せるときは有効かもしれません。


 

さらに、表示方法の1つとして、関連タグが多い順に並べ替えてすっきり見せる というやり方もありました。
JavaScriptで見栄えを変えているので、もしかしたら導入後画面の表示が遅くなるかも と思ってうちでは導入してません。

Tag:Seesaa タグクラウド CSS
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

×

この広告は90日以上新しい記事の投稿がないブログに表示されております。