ページ区切りブロックの使い方

それでは、スタイルコードの紹介です。単純に以下のことを指定しています。

• ページ送りを中央に表示する
• 現在見ているページは背景を黒に、文字を白にする
• その他のページは枠線を入れ、リンクの文字装飾はなしにする
• 枠線をちょっと角丸にする、枠線と文字の空白を取る

/* ページ送り */
p.post-nav-links {
    text-align: center;
}

a.post-page-numbers {
    border: 1px solid #000;
    padding: 8px;
    border-radius: 4px;
    text-decoration: none;
}

span.post-page-numbers {
    padding: 8px;
    border: 1px solid #000;
    border-radius: 4px;
    color: #fff;
    background: #000;
}

色などをサイトに合わせれば、それなりな感じに見えますね（見えない？）。

このサイトは、サイドバーにしている部分の一番下のブロックを「Sticky Block」というプラグインで固定表示させているので、長いページでもサイドバーが見切れることはありませんが、そうでないサイトでは、サイドバーの高さ辺りでページ分割すると、見栄えが良くなるかも知れませんね。

ページ: 1 2 3