Seesaa ブログ navi カテゴリーページ

Seesaa ブログの navi の間隔が狭すぎて、スマホだとタップできないと Google PageSpeed Insights に指摘されたため、先日急遽 index ページの navi はカスタマイズしました。(こちらの記事参照

その後、インデックスページについてもちょこっと変更しましたので、今回はカテゴリページと併せてカスタマイズした内容をご紹介します。

Sponsored Link

スマートフォンからのアクセスユーザがタップし易くすることがカスタマイズの目的なので、タップできる navi は除外です。タップしにくいのは、ページ番号が並ぶ index page と category page だけ。

それ以外の tag page や archive page もデザインを統一したいとか始めるとキリが無いし、時間が掛かる割には効果は望めないし、ユーザビリティが向上するわけでもないのでやりません。

list を使ってマイナーチェンジ

前回の index ページの navi カスタマイズは、span タグを使って間隔を広くし、ボタンのように四角い外枠を付けただけでした。なのでリンクはページ番号の数字部分だけで、ボタンのくせにタップするのは小さい数字という結果に。

今回はリスト(list / li) でボタンを横に並べて、ボタン全体にリンクを張るようにマイナーチェンジしました。

記事 HTML の navi 部分からカスタマイズした index page と category page 部分だけ抜粋したのが以下のコードです。

<!-- index page navi -->
<% if:page_name eq 'index' -%><% if:pager.need_pager -%><div class="navi"><ul><% if:pager.previous_page %><li class="page_to"><a href="<% blog.page_url(pager.previous_page) | html %>">前へ</a></li><% /if %><% loop:list_pager %><% if:pager.show_page(pager_number,5) %><% if:current_page ne pager_number %><li><a href="<% blog.page_url(pager_number)%>"><% /if %><% if:current_page eq pager_number %><li class="page_cur"><% /if %><% pager_number %><% if:current_page ne pager_number %></a><% /if %></li><% /if %><% /loop %><% if:pager.next_page %><li class="page_to"><a href="<% blog.page_url(pager.next_page) %>">次へ</a></li><% /if %></ul></div><% /if -%><% /if -%>


<!-- category page navi -->
<% if:page_name eq 'category' -%><div class="navi"><a href="<% blog.page_url %>">HOME</a> / <% category.name %></div>
<% if:pager.need_pager -%><div class="navi"><ul><% if:pager.previous_page %><li class="page_to"><a href="<% category.page_url(pager.previous_page) %>">前へ</a></li><% /if %><% loop:list_pager %><% if:pager.show_page(pager_number,5) %><% if:current_page ne pager_number %><li><a href="<% category.page_url(pager_number)%>"><% /if %><% if:current_page eq pager_number %><li class="page_cur"><% /if %><% pager_number %><% if:current_page ne pager_number %></a><% /if %></li><% /if %><% /loop %><% if:pager.next_page %><li class="page_to"><a href="<% category.page_url(pager.next_page) %>">次へ</a></li><% /if %></ul></div><% /if -%><% /if -%>


page_name eq 'xxxx' 変数で始まる navi は page の種類により4パターンあります。「index (トップページおよび2ページ目以降)」、「article (記事ページ)」、「archive (月別アーカイブページ)」、「category (カテゴリーページ)」の順番に記述されています。今回のカスタマイズは、index と category ですから、4パターンのうち一番最初と一番最後を差し替えることになります。記事の上下に navi を設置している場合は、上下とも差し替えます

それぞれ <% if:page_name eq 'index' -%> と <% if:page_name eq 'category' -%> で検索して該当箇所を探します。

赤文字の表示が前回 span で記述していた部分と、今回新規に追加したものです。このタグに関する定義を CSS に追記(もしくは編集)します。

上記のカスタマイズ版 index page, Category page と、そのままの month page, article page の navi 全体のコードをアップしています。既存の navi を全部上書きするときには、こちらのファイルを参考にしてください。
» Livedoor ニュース風 カスタマイズ版 navi

navi に関する CSS の編集

大まかにいうと前回編集した CSS の span に関する記述を li に変更する手続きになります。navi クラスが使われているのは今回カスタマイズしている navi の部分しかありませんから、もし独自のカスタマイズがないのであれば下記の navi に関する定義で上書きしても構わないと思います。

/* Livedoor 風 navi ver.2 */

.navi {
width: 95%; /* ページ幅(contents に対して95%)、お好きな幅で */
text-align: center;
margin: 0 auto; /* navi 自体を中央に寄せる */
line-height: 1.5em; /* ページ番号の縦位置調整(*1) */
position: relative;
overflow: hidden;
}

.navi ul {
ist-style: none; /* リスト化したボタンのドットを表示しない */
position: relative;
float: left;
left: 50%; /* 下記 ul li のleft:-50% と併せて中央寄せになります(*2) */
}

.navi ul li {
position: relative;
left: -50%; /* navi 自体を中央に寄せる(*2) */
float: left;
text-align:center;
width: 25px; /* ボタンの幅。正方形にならないときは、この幅を調整 */
margin-right: 10px; /* ボタン同士の間隔 */
background : none; /* リスト矢印背景画像の指定があれば navi では無効化 */
background-color:#f1f1f1;
border: 1px solid #DFDFDF;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

.navi ul li a {
display: block; /* ボタン枠全体にリンクを張る */
text-decoration: none;
color: #000 !important;
}

.navi ul li a:hover {
text-decoration: none;
background-color:#DDDDDD;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width:100%; height: 100%;
}

.navi .page_cur {
color: #fff;
background-color:#7F7F7F;
border: 1px solid #717171;
}

.navi .page_to {
width: 60px; /* 前へ、次へのボタン枠の幅 */
}


前回からの変更点は、リスト横並びにした、ボタン枠全体にリンクを張った、マウスオーバー (hover) で背景色を変えたことくらいです。Livedoor ニュースのスマホ版ナビの色や動作を完全にパクりました。

面倒だったのが navi 全体のセンタリングです。こういったフロートのリストの横並び(メニューなど)は、左寄せになってしまいます。そこで ul でいったん左に 50% 寄せて、li で右に50% (left: -50%) 戻すと中央に寄るようです(*2)。
» CSS:ulのリストをfloatで並べて中央揃えする方法


トラブル対策


ページ番号、前へ、次への文字列が、ボタン枠の天井に張り付いてしまう場合
この原因がわからなくて結構ハマりました。navi の行の高さを変更すると中央 (middle) に収まります (*1 の line-height)。行高やフォントサイズはブログによって設定値が異なるので、縦位置中央に寄るまで行高を調整してください。

ブログ記事が navi の右側に回り込んでしまう場合
同じ CSS で .blog クラス を検索し、clear:both を追記して回り込みを止めます。

.blog {
clear: both; /* これを追記 */
既存の定義;
既存の定義;
}

最後に

HTML や CSS は過去のバージョンを残してコピペで新しいバージョンが作れます。しかし、記事 HTML はバージョン管理ができないので、現バージョンのコードをテキストエディタなどにコピペしてから作業しましょう。

編集に失敗すると記事部分がスッポリ抜けてしまいます。コピペしておけば数秒で戻せますが、バックアップがないと最悪の場合、初期状態にリセットするしか方法がなくなります。老婆心ながら。

Sponsored Link

この記事へのコメント

5件
最新版の公開有難うございます!さっそく適用させて頂きましたところ、当方の環境でナビが縦になってしまいました。

しかしこちらの部分の記述を入れ替えることで正常に表示されましたので、念のためご報告いたします。

.navi ul li {
position: relative;
left: -50%; // navi 自体を中央に寄せる(*2)
float: left;

.navi ul li {
position: relative;
float: left;
left: -50%; // navi 自体を中央に寄せる(*2)

先にリストのfloat指定を持ってきた所、正常に表示されました。ブラウザはfirefoxを使用しています。

バージョンアップでさらに良くなりました、本当に有難うございます!
ゲンキ! at
たびたびスミマセン;;ナビリスト表示が縦になる件ですが、CSSの記述順序ではなく、CSSの注釈部分のスラッシュ表記が関係していたかもしれません。実は当ブログにナビを設置後、あらためて見るとデザインがこちらのものと多少異なり、ナビボックス間のマージンの設定も反映されませんでした。そこでスラッシュを含む注釈表記削除したところ、なんの問題もなく綺麗に表示されたのです。これはやはりブラウザかSeesaaブログのCSSへの対応の問題でしょうか?何はともあれ、大変お騒がせして申し訳ございませんでした;;
ゲンキ! at
ゲンキ!さん
ごめんなさい。言葉が足りなくて、無駄な時間を使わせてしまったようです。
同じようなことが起こらないように、投稿を見直して注記を入れるようにします。
とりあえず、正常に表示されたようで安心しました。
ご指摘ありがとうございます。
echo at
 こんにちは、いい物をありがとうございます。早速利用させて戴きました。
が、自分の環境でも、書かれている「トラブル」が発生、同じ「トラブル対策」をさせて戴きました。
が、それでも回り込み(爆)、結局は2か所。それが終わり、記事にしようと画像をキャプチャすれば、変な点が有ることに気が付きました。リストタグの「点」でした。自分はCSSで対処しましたが、これは残してある点なのでしょうか?。白背景では解りませんが、自分の場合は、数字の□の黒い部分に乗っておりました。以上御報告まで。
at
亀さん、コメントありがとうございます。返事が遅れてスミマセン。

>リストタグの「点」でした。
ご指摘の通り、この navi に関する css では list-style の指定がありませんでした。
記事中の css には赤字で list-style: none を追記しておきました。

スミマセン、ボクの CSS では共通項目として ul li の list-style をすべて none にするようにしていたので、この navi だけを切り出したときに記事中の CSS だけでは不十分であることを見落としてしまいました。申し訳ありませんでした。
echo at
コメントをどうぞ
お名前:[必須入力]

メールアドレス:

ホームページアドレス:

コメント:[必須入力]

Sponsored Link