スマホ版FC2ブログの番号つきページナビのカスタマイズ方法

FC2ブログページナビ

スマホ版FC2ブログでは、記事一覧ページに番号つきのページナビがつくれるようになっています。

今回は番号つきページナビの簡単なカスタマイズ方法と、コピペで使えてオリジナルカラーに変更できる、サンプルCSSを2種類ご用意しました。

スマホ版FC2公式テンプレートのページナビ

デフォルトのページナビ

FC2デフォルトページナビ

こちらがスマホ版FC2ブログのデフォルトデフォルトテンプレートのページナビです。

「new_basic_red」という名前のFC2公式テンプレートです。タップしやすいページナビで、現在のページと総ページ数が表示されていてわかりやすいのです。

番号つきのページナビ

わたしは個人的に番号つきのものがよかったので、「basic_blue」という名前の公式テンプレートをベースにカスタマイズしました。

basic_blueのページナビ

そして、こちらが「basic_blue」テンプレートのページナビです。

最初のページと最後のページのリンクが重複してしまうのは仕方ないとして、同じリンクテキストなのがちょっと気持ち悪いのと、ナビゲーション番号の間が狭くてタップしづらいので、そこらへんを少しカスタマイズしてみました。

ページナビのHTMLをわかりやすくカスタマイズ

basic_blue テンプレートのページナビ

「basic_blue」のページナビ部分のテンプレートはこんな感じです。

<!--page_area-->
	<div class="pager">
		<div class="pager_box">
			<!--firstpage_disp--><a href="<%firstpage_url><%tail_url>" class="prevpage"><%firstpage_num></a>...<!--/firstpage_disp-->
			<%template_pager1>
			<!--lastpage_disp-->...<a href="<%lastpage_url><%tail_url>" class="nextpage"><%lastpage_num></a><!--/lastpage_disp-->
		</div>
	</div>
<!--/page_area-->

basic_blue テンプレートの実際に表示されるHTML

そして、実際に表示されるHTMLはこんな感じになります。

<div class="pager">
	<div class="pager_box">
		<a href="■最初のページのURL■" class="prevpage">■最初のページの番号■</a>...
		<a href="■前のページのURL■">■前のページの番号■</a>
		<strong>■現在のページの番号■</strong>
		<a href="■次のページのURL■">■次のページの番号■</a>
		...<a href="■最後のページのURL■" class="nextpage">■最後のページの番号■</a>
	</div>
</div>

スマホ版テンプレート変数の<%template_pager1>では、ハイライトされている部分のようなHTMLが表示されます。

<%template_pager1>では、前後のページ1ページ分ですが、2ページ、3ページ分以上表示されるテンプレート変数もあります。

カスタマイズ後のページナビ部分のテンプレート

<!--page_area-->
	<div class="pager">
		<!--firstpage_disp--><a href="<%firstpage_url><%tail_url>" class="prevpage">First</a>...<!--/firstpage_disp-->
		<%template_pager1>
		<!--lastpage_disp-->...<a href="<%lastpage_url><%tail_url>" class="nextpage">Last</a><!--/lastpage_disp-->
	</div>
<!--/page_area-->

ただ単に最初と最後のページ番号部分を「First」、「Last」に変更しただけなのですが、これでちょっとわかりやすナビゲーションになったと思います。
それと、div.pager_boxの必要性を感じなかったので削除しました。

ページナビのCSSをタップしやすくカスタマイズ

タップしやすい適度な余白があるページナビのサンプルCSSです。(サンプルがスペースの都合上、画像になってしまいました・・・。)

サンプル

ページナビサンプル

CSS

.pager {
	text-align: center;
	line-height: 30px;
}

.pager a {
	display: inline-block;
	width: 30px;
	height: 30px;
    margin: 0 7px;
    background: #272727; /* ページナビリンクの背景色 */
    color: #FFF; /* ページナビリンクの文字色 */
	text-decoration: none;
}

.pager strong{
	display: inline-block;
	width: 30px;
	height: 30px;
    margin: 0 7px;
    background: #6699CC; /* 現在のページ番号の背景色 */
	-webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.5);
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.pager .prevpage, .pager .nextpage {
	width: auto;
	padding: 0 10px;
}

ページナビのCSS 〜丸っこいバージョン〜

サンプル

丸っこいページナビサンプル

CSS

.pager {
	text-align: center;
	line-height: 30px;
}

.pager a {
	display: inline-block;
	width: 30px;
	height: 30px;
    margin: 0 7px;
    background: #272727; /* ページナビリンクの背景色 */
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
    color: #FFF; /* ページナビリンクの文字色 */
	text-decoration: none;
}

.pager .prevpage, .pager .nextpage {
	display: inline-block;
	width: auto;
	padding: 0 10px;
	-webkit-border-radius: 15px 0 0 15px;
	-moz-border-radius: 15px 0 0 15px;
	border-radius: 15px 0 0 15px;
}

.pager .nextpage {
	-webkit-border-radius: 0 15px 15px 0;
	-moz-border-radius: 0 15px 15px 0;
	border-radius: 0 15px 15px 0;
}

.pager strong{
	display: inline-block;
	width: 30px;
	height: 30px;
    margin: 0 7px;
    background: #6699CC; /* 現在のページ番号の背景色 */
    -webkit-box-shadow: inset 1px 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: inset 1px 1px 3px rgba(0,0,0,0.5);
    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.5);
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
}

色などを変更してオリジナルページナビに

全面的なカスタマイズだとちょっと大変かと思うのですが、こういった一部分のカスタマイズでしたら比較的簡単に取り入れることができると思います。

CSSのコメント部分の色を変えるだけでページナビの雰囲気が変わりますので、是非お試しください。

Pagetop
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。