帰ってきたNucleus

ページスイッチのデザインをかっこよくする

NP_ShowBlogsを使ってページスイッチを表示させた場合、何もデザインしていない状態では以下のように表示されます。縦線が入っていたりしてデザインしづらい事もあり、そのまま表示させているサイトがけっこうあったりします。でも実はけっこう簡単にデザインを変更できます。

デフォルトのページスイッチ

CSSとjQueryを使って、以下のようなページスイッチのデザインに変えてみたいと思います。見栄えが良くなるだけでなく、クリックしやすくなります。

デザインを変更したページスイッチ

これは基本的なデザインですが、CSS3のグラデーションやドロップシャドウなどを使うともっといろいろなデザインができると思いますので挑戦してみてください。

デモを見る

Javascript(jQuery)

まずは「replace」メソッドを使って縦線「|」を一括削除します。

$(function(){
	$('.pageswitch').each(function(){
		var txt = $(this).html();
		$(this).html(
			txt.replace(/\|/g,"")
		);
	});
});

CSS

.pageswitch{text-align:center;}
.pageswitch a{background:#09f;color:#fff;padding:5px;border-radius:3px;}
.pageswitch a:hover{background:#f60}
.pageswitch strong{background:#f30;color:#fff;font-weight:normal;padding:5px;border-radius:3px;}