Google Developers にある PageSpeed Insights やモバイルフレンドリーテストなども登場して、どうやら Google はモバイル対応に本気です。

Google の検索結果にモバイルフレンドリーかどうか表示されるようですから、こちらサイドも確りとこの流れに乗っからないといけません。

さて、PageSpeed Insights のモバイル評価項目に「ユーザーエクスペリエンス」がありますが、Seesaa ブログで必ず引っかかるのがタグクラウド。これを 100% とまでは行きませんが、なるべく引っかからないようにカスタマイズしてみます。

タグクラウドのフォントサイズが小さすぎるので大きくしよう

モバイル対応のカスタマイズと言っても、ここで対象とするのはデスクトップ版のタグクラウドです。

このブログの他の記事をご覧になっていない方のために少し説明すると、ボクは Seesaa ブログスマホ版のカスタマイズを一切放棄しています。というかスマホ版は完全に捨てています。その代わりに、デスクトップ版テンプレートをレスポンシブにカスタマイズし、スマホからのアクセスも強制的にデスクトップ版に飛ばすような仕組みにしています。詳しくはレスポンシブ計画始動あたりをまずご覧ください。

本題です。Seesaa ブログのタグクラウドはタグが割り当てられた記事数に依ってフォントサイズが可変です。タグを採用した記事が多いほどフォントサイズも大きくなる。

この文字サイズは Seesaa から提供される JavaScript によって制御されているため、CSS で font-size を指定しても呼応することはありません。

タグクラウドの JavaScript を修正

タグクラウドのフォントサイズを大きくするには、JavaScript を修正することになります。コンテンツのタグクラウドを開きコンテンツ HTML を見ると以下のように記述されています。

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

この JavaScript の 中身がこちら。

function calc_fontSize(d,f,g,b,e,a,h){if(!e){e=15}if(!a){a=11}if(!h){h=1}g=Math.log(g);b=Math.log(b);if(g-b==0){b=b-e}else{h=e/(g-b)}if(f<e){h*=f/e}return parseInt((Math.log(d)-b)*h)+a}function tag_cloud(a,g,b,o){var j=document.getElementById(a);var n=j.getElementsByTagName("a");var f=0;var d=0;var h=new Array();for(var l=0;l<n.length;l++){var k=n.item(l);if(k.id=="tag"||k.className=="_tag"){c=parseInt(k.title.split("/").pop());if(c>f){f=c}if(d==0||c<d){d=c}h.push([k,c])}}for(var l=0;l<h.length;l++){var m=h[l];m[0].style.fontSize=calc_fontSize(m[1],h.length,f,d,g,b,o)+"px"}};

コード中の赤文字で表示されている部分の 11 が最小フォントサイズで、これを少しデカくします。参考までにこのブログのフッターにある「キーワード」がタグクラウドで 16 にサイズアップ 14 にサイズアップしています。（※修正あり）

a=の数値を任意に変更したコードをタグクラウド（コンテンツ）の１行目にあった外部スクリプト（/js/tag_cloud.js）とまるまる差し替えます。

<script type="text/javascript">function calc_fontSize(d,f,g,b,e,a,h){if(!e){e=15}if(!a){a=16}if(!h){h=1}g=Math.log(g);b=Math.log(b);if(g-b==0){b=b-e}else{h=e/(g-b)}if(f<e){h*=f/e}return parseInt((Math.log(d)-b)*h)+a}function tag_cloud(a,g,b,o){var j=document.getElementById(a);var n=j.getElementsByTagName("a");var f=0;var d=0;var h=new Array();for(var l=0;l<n.length;l++){var k=n.item(l);if(k.id=="tag"||k.className=="_tag"){c=parseInt(k.title.split("/").pop());if(c>f){f=c}if(d==0||c<d){d=c}h.push([k,c])}}for(var l=0;l<h.length;l++){var m=h[l];m[0].style.fontSize=calc_fontSize(m[1],h.length,f,d,g,b,o)+"px"}};</script>

CSSを調整してタップターゲット警告を完全解消

ユーザーエクスペリエンス検証結果では、タップターゲットが近すぎるという警告が出ます。タグ同士がくっ付きすぎてるんですね。これについては CSS でタグに padding を追加します。（※修正あり）

._tag{padding: 5px;}
._tag{padding: 10px;display:inline-block;line-height:1>;}

上下左右に少なくとも 5px 10px くらい入れておけば良いかと。タグクラウドの実際の見た目と PageSpeed Insights のユーザエクスペリエンスの検証結果を照らし合わせながら適切にパディングを変更します。

重要なのが inline-block の追加です。現状のタグクラウドのままだとタグが単語中でも途中改行されます。

タグが改行されることで隣接するタグのリンクに被ってしまうことがタップターゲット警告が解消できない原因です。

図は、Google Developer Tools で「アフィリエイト」タグを選択したときのスクリーンショット。

これを inline-block の追加で回避します。

inline-block属性を追加すると、場合によっては行高が恐ろしいことになるので、line-height:1（など）を追加。もちろんこの 1 は親要素となる body なり サイドバータグクラウドなら tag-side なりの行高（height）と相関関係があり必ず１ではないので要調整です。

参考
» モバイル フレンドリー テスト
» このブログのモバイル フレンドリー テスト結果
» Google Developers PageSpeed Insights
» この記事ページの Google Developers PageSpeed Insights テスト結果

まとめ

今回のカスタマイズは２点だけです。

• タグクラウド JavaScript の修正
• ._tag の padding 追加, inline-blick, line-height 追加

Seesaa のタグクラウドはデスクトップで見ていると余り違和感はありません。ところがレスポンシブ対応カスタマイズ済みのデスクトップ版テンプレートをスマホ実機で見ると、ものすごく文字が小さい。タップターゲットが近いというよりは、フォントが小さ過ぎてピンポイントでタップできないと言った方が正確なくらい。大した手間は掛かりませんからカスタマイズしてユーザーフレンドリー＆モバイルフレンドリーを心掛けましょう。

レスポンシブカスタマイズについては Seesaa ブログをあっという間にレスポンシブにするこちらの記事もご覧ください。

ところで一所懸命にテンプレートをカスタマイズしましたが、残念なことに Google PageSpeed Insights のユーザエクスペリエンスは 100点満点にならないんですよね。ads by Google とか Google AdSense 広告内の URL が近すぎるとか。どうも Google という会社のリンクがユーザエクスペリエンスで減点されている模様です。