Personal WP Customization Notes (PWCN)

WordPressで実際に行ったカスタマイズの記録、発生した問題への対処時のメモ、ブロックテーマのカスタマイズなど

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

,

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

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

※リンクやURLの挿入されているコメントは無視します