MTPaginate部分のページナビゲーションをCSSでカスタマイズする方法　|　楽してプロっぽいデザイン

MTPaginate部分のページナビゲーションをCSSでカスタマイズする方法

MovableTypeのページ分割においてMTPaginateをプラグインされている場合が多いと思いますが、そのまま使用するとページナビゲーションがいまいち美しくありません。多くのブログやメジャーサイトで使用されているのはボックス形式のナビゲーション。かくいう私もこれまで味気のないナビゲーションでしたが、ようやくカスタマイズしました。CSSで装飾するだけでちょっとはプロっぽい感じのナビゲーションに仕上げることが出来ます。

今回ページナビゲーションのカスタマイズにあたり参考にしたのはこちらのサイト。http://deviant-art.org/deviant-art-css-24-web-20-navigation.html/このサイトでは、メジャーサイトで使用されているナビゲーションのhtmlとCSSをダウンロードすることが出来ます。

ページナビゲーションをCSSでカスタマイズ

日付アーカイブのソース



Prev
<$MTPaginateNavigator format="%d" separator="  " format_all="All" place_all="before">
Next

こちらはそんなにいじっていません。<div class="page-navi">で囲っているところが取り合えずポイントというところでしょうか。

CSSに以下の内容を追加

div.page-navi {
padding:3px;
margin:3px;
text-align:center;
}
div.page-navi a {
border:1px solid #aaa;
padding:2px 5px;
margin:2px;
color:#00099;
text-decoration:none;
}
div.page-navi a:hover {
border:1px solid #000099;
color:#000;
text-decoration:none;
background-color:#dfdfdf;
}
div.page-navi a:active {
border:1px solid #000099;
color:#000;
}
div.page-navi span.current {
border:1px solid #000099;
padding:2px 5px;
margin:2px;
font-weight:bold;
color:#fff;
background-color:#000099;
}
div.page-navi span.disabled {
border: #eee 1px solid;
padding:2px 5px;
margin:2px;
color:#ddd;
}

background-colorなどは自由に設定してください。以上で設定完了です。再構築すれば箱型のナビゲーションができているはずです。

タグ:【　Tips　】

| パーマリンク | コメント (0) | トラックバック (1) |

楽してプロっぽいデザイン|Forty-N-Five Blog Trackbacks

このエントリーのトラックバックURL

この一覧は、次のエントリーを参照しています: MTPaginate部分のページナビゲーションをCSSでカスタマイズする方法:

» MTPaginateプラグインでページャー設置送信元 Shibuya Works | シブヤワークス
Six Apart - Movable Type プラグインディレクトリ: MT... [詳しくはこちら]

MTPaginate部分のページナビゲーションをCSSでカスタマイズする方法の前後の記事

前の記事は「CSSでサイトを画面の中央にもってくる方法」

次の記事は「ピクセル数から印刷物に必要な解像度を知る方法」

Name:
Mail:
URL:
	この情報を登録しますか?

Webデザインセンスや多少知識が乏しくとも、プロっぽいデザインにできる方法があります。Web制作を助けてくれる便利なサイトの備忘録ブログ。