Seesaa blog のタグクラウドがWindows IEから見たときに行間が狭くなる件

ここは LOVELOG なんだけれど、お友達の blog の「 For the mind ：タグクラウドの表示」の記事を読んで気になったのでいろいろ調べてしまったので、ご報告がてら記事にしてみる。
タグクラウドの表示の何が問題かというと、 Windows Internet Explorer でタグクラウドの行間が狭く表示されるらしい。他のブラウザで確認したところきちんと表示されていた、とのこと。

Windows IE での見え方

Mac Safari での見え方

（サンプルとして For the mind の画面をお借りしました。）

なんとなく、 Windows IE のスタイルシート周りが悪いんじゃないかと思ってソースを見てみたらびっくり。 Seesaa のタグクラウドはパラメーターに対するフォントの大きさを class 属性には持っていなくて（ class=”_tag” ）、 title 属性に / をつけて無理矢理持たせている（ title=” ○○ /2″ ）のだ。これを tag_cloud.js という Javascript で読み込んで、フォントサイズを決定し、それを Javascript の element.style.fontSize でフォントサイズを後からレンダリングし直しているのだ。これには正直びっくりした。

普通、他の MT のタグクラウドのプラグインなんかは、サーバー側でパラメーターを処理してフォントサイズを決定して、それを class 属性に吐き出すような処理をしている。普通に設計したら、こっちの方法をとると思う。

けれど、 Seesaa はその処理をサーバーにさせると負担が増大するから嫌なのか、クライアントであるブラウザにさせている。これが、 IE でタグクラウドの行間が狭くなって文字が重なってしまったりする原因。

IE にはバグが多くて、今回のこれもそのバグに 1 つでしょう。一度読み込んでレンダリングしたの文字のサイズを Javascript から変更されても、元のフォントサイズの行間で表示してしまう。だから、タグクラウドのフォントサイズが大きくなったときに、文字が重なってしまうのです。そういうとき、どうなるかをきちんと検証していなかった Seesaa のシステムのミスですね。

さて、回避の方法がないのかと思って、いろいろ探ってみましたが、簡単な方法はなくて、ちょっと、 HTML をいじって、しかも Javascript も変更しなくちゃいけない。

ちょっと面倒だけれど、文字が重なるのが嫌な人のために書いておきます。（何度も書くけど、ここは LOVELOG だけどなぜか Seesaa の話。） Javascript は手を加えたものを用意したので使ってください。手を加えたっていっても、 Internet Explorer で表示したときのみ行間も指定する、っていうスクリプトを追加しただけですけど。

タグクラウド行間狭化補正方法

1) ここから tag_cloud.js をダウロード。

2) Seesaa にダウンロードしたファイルをアップする。
　・「記事投稿」→「ファイルマネージャー」でアップロードでダウンロードした tag_cloud.js を指定。
　・新しいディレクトリ「 js 」を作成し、アップロード。

3) タグクラウドの HTML を変更する。
　・「デザイン」→「コンテンツ」のタグクラウドをダブルクリック。

　・オーバーフローしたウインドウの右上「コンテンツ HTML 編集」をクリック。
　・ 1 行目を次のように変更

<script type="text/javascript" language="javascript" src="<% site_info.blog_url %>/js/tag_cloud.js"></script>

　↓

<script type="text/javascript" language="javascript" src="http://○○○○.up.seesaa.net/js/tag_cloud.js"></script>

　○○○○は blog URL 「 http:// ○○○○ .seesaa.net/ 」の部分。
　・保存→閉じるをクリック。

4) 全ページを再構築する。

すると Windows IE での表示も OK 。

For the mind の管理人 uguisu さん、画面をサンプルでお借りしました。事後報告ではありますが、ここでお礼を申し上げます。ありがとうございます。

ちなみに追加した Javascript は以下のような感じです。緑の文字の部分を追加しました。

for (var i = 0; i < tags.length; i++) {
var tag = tags[i];
tag[0].style.fontSize = calc_fontSize(tag[1], tags.length, max, min, levels, min_fs, factor) + 'px';
<span style="color:#006565;">IBN = navigator.appName.toUpperCase();
//IEの場合のみ行間を指定する
if (IBN .indexOf("EXPLORER") >= 0) {
tag[0].style.lineHeight = calc_fontSize(tag[1], tags.length, max, min, levels, min_fs, factor) + 3 + 'px';
}</span>
}

関連記事

FC2 ブログの広告

Web制作

Google ウェブマスターツールにて「タイトルタグの重複」がたくさんある

WordPressWeb制作

WordPress でタイトルタグの重複を回避する

WordPressWeb制作

Google に好かれるサイトづくり

Web制作

jQuery で容量の大きい JSON を配列に代入するときは注意！

Web制作

Blog に動画（ FLV ）を設置しよう

Web制作