Seesaa の とある秘密ブログをレスポンシブデザインにして、そのテンプレートをこのブログにも移植しました。ただ、もともと適用しているテンプレートが違うので、HTML や CSS をコピペして終わりというわけにはいきません。
色々いじくっていくうちに、どんどんページが重たくなったのでページの読み込み速度を測定。
するとページの読み込み速度よりも改善すべきは、Seesaa ブログテンプレートの上（下）にあるナビ(navi)の部分だということが分りました。
スマートフォンだとタップしにくいというタップターゲットに問題ありとの診断結果です。
そこで Seesaa ブログテンプレート標準の navi を タップターゲット問題を修正するついでに、Livedoor ニュース スマートフォン版風にカスタマイズしてみました。
Google PageSpeed Insights による診断
Google ウェブマスターツールの中に、ページ読み込み速度を診断したり、修正ポイントを教えてくれる PageSpeed Insights があります。
このツールを使うと、JavaScript を記述している位置を変えろとか、画像の幅、高さ指定がないぞとか、記述の短い外部 CSS をインラインで書けとか。いろいろ教えてくれて、高速化できますから是非お試しください。
今回指摘されたのは、冒頭の画像にある navi なんですが、幅が狭すぎてタップできませんよとのこと。全然気にしてなかったけど、言われてからスマホでタップしてみたらピンポイントでタップできません。
どんな感じにしようかなと考えていたところ、いつも見ている Livedoor ニュースのナビを思い出し、それ風にすることに。
記事コンテンツの HTML
とりあえず、トップページ (index) だけカスタマイズ。カテゴリ (category) も同じような形式ですが、これは後回し。
Seesaaブログテンプレートのコンテンツ「記事」をカスタマイズ。完成版のコードは以下の通り。
<% if:page_name eq 'index' -%>
<% if:pager.need_pager -%>
<div class="navi">
<% if:pager.previous_page %>
<span><a href="<% blog.page_url(pager.previous_page) | html %>">前へ</a></span>
<% /if %>
<% loop:list_pager %>
<% if:pager.show_page(pager_number,5) %><% if:current_page ne pager_number %>
<span><a href="<% blog.page_url(pager_number)%>">
<% /if %>
<% if:current_page eq pager_number %><span class="page_cur"><% /if %>
<% pager_number %>
<% if:current_page ne pager_number %></a><% /if %></span>
<% /if %>
<% /loop %>
<% if:pager.next_page %>
<span><a href="<% blog.page_url(pager.next_page) %>">次へ</a></span><% /if %>
</div>
<% /if -%>
<% /if -%>
前後のページがなかったら表示する "-" (ダッシュ)とか、続きのページがあったら表示する ".." (ドット２つ)は削除しています。また、「前(次)の n 件」のように前後にある件数表示もいらないので削除しています。
navi に関する CSS
上記の コンテンツ HTML では、navi タグ（初期値 <div class="navi">）内に span を噛ませてボタンのような枠を作成し修飾しています。リンクの無い現在のページ部分は page_cur タグで背景色の濃い別の修飾を適用します。
/* Livedoor 風 navi */
.navi{
text-align: center;
width: 95%; //ページ幅(contents に対して95%)、お好きな幅で
padding-bottom: 15px;
padding-top: 10px; // 枠線(border)の上側が見切れるので増やす
}
/* リンク付きのページ番号部分の定義 */
.navi span{
*display: inline;
*zoom:1;
display: inline-block; // 枠を inline blockで横並べ
margin: 0 5px;
padding:4px 10px; // 枠内の余白
background:#f1f1f1;
border: 1px solid #DFDFDF;
-webkit-border-radius: 4px; // 枠の角を丸める
-moz-border-radius: 4px;
border-radius: 4px;
}
/* 現在のページ番号部分の定義 */
.navi .page_cur{
color: #fff;
background:#7F7F7F; // 背景色は濃く
border: 1px solid #717171; //枠線を濃く
}
/* navi 内のリンク定義 */
.navi a{
display: inline-block;
margin: 0;
padding: 0;
text-decoration: none !important;
}
※ CSSに記述した // は解説用コメントです。正しい結果が得られないことがありますので必ず削除してください。
とりあえずこれくらい幅を広げてあげればタップできるので、Google PageSpeed Insights では警告されなくなります。
カテゴリや月別アーカイブあたりも同じようにカスタマイズしないといけません。今は index だけ Livedoor 風味で残りは Seesaa ブログという格好悪いことになってます。
おまけ：navi の ページボタンの表示数を変える
上記のHTML に <% if:pager.show_page(pager_number,5) %> という記述があります。この 5 を変更すれば表示されるページ (ボタン) の数が変わります。
追記：2014年５月29日
マイナーアップデートしました。最新版の Livedoor ニュース風味ナビはこちらです。
» Seesaa ブログの navi を Livedoor ニュース風にカスタマイズ(完)