Cocoonカスタマイズ 〜HARU channelを作ってみよう〜④【ページネーション】

アイキャッチ画像Cocoonカスタマイズ

WordPressの無料テーマ「Cocoon(コクーン)」。

それを使って、私が当サイト「HARU channel」をどのようにカスタマイズしてきたのか、その過程をご紹介しています。


引き続き、コーディング(CSS)を使ったカスタマイズについて説明します。
(紹介するコードは、全てコピペして使用していただいて構いません。)


前回は、以下の状態まで進みました。

HARU channelトップページ

これを最終的に、以下の状態にまでカスタマイズしていきます。

HARU channel トップページ

今回は、

  • ページネーション

のCSSのカスタマイズについて、説明していきます。

(CSSの入力箇所が分からない方は、こちらをご覧ください。)

カスタマイズ全体像

ページネーション ビフォーアフター

デフォルトは、色味がなくて地味な印象だったので、もう少しシンプルかつオシャレな感じにしてみました。

主な変更点は以下の通り。

  1. 「次のページ」などのボタンを非表示
  2. ボタンの形を丸く、背景色を白色に
  3. マウスオーバー時・現在のページのボタンの背景色をグラデーションに

CSSはこちらです↓↓

/************************************
** ページネーション
************************************/
/*  「次のページ」などのボタンを非表示*/
.pagination-next, .next, .prev, .pager-prev-next {
  display: none;
}

/* ↓↓形を丸く、背景色を白色に */
.pagination .page-numbers {
  border-radius: 50%;
  box-shadow: 0 0 10px -5px rgba(0, 0, 0, 0.5);
  background: white;
  border: none !important;
  color: #ba7373;
  font-family: sans-serif;
  font-size: 80%;
  transition: .1s;
}
/* ↑↑形を丸く、背景色を白色に */

/* マウスオーバー時 */
.pagination a.page-numbers:hover {
  background: linear-gradient(120deg, #ba7373, #f2bfbf);
  color: white;
}

/* 現在のページ */
.pagination .current {
  background: linear-gradient(120deg, #ba7373, #f2bfbf);
  color: white;
}

以下、カスタマイズ方法の詳細を、上から順番に解説していきます。

「次のページ」などのボタンを非表示

ページネーション カスタマイズ
/*  ↓↓「次のページ」などのボタンを非表示*/
.pagination-next, .next, .prev, .pager-prev-next {
  display: none;
}

「次のページ」「 > 」のボタンを非表示にして、スッキリした印象に。

ボタンの形を丸く、背景色を白色に

ページネーション カスタマイズ
/* ↓↓形を丸く、背景色を白色に */
.pagination .page-numbers {
  border-radius: 50%;
  box-shadow: 0 0 10px -5px rgba(0, 0, 0, 0.5);
  background: white;
  border: none !important;
  color: #ba7373;
  font-family: sans-serif;
  font-size: 80%;
  transition: .1s;
}
/* ↑↑形を丸く、背景色を白色に */

3行目「border-radius」、今までは px 指定しか出てきませんでしたが、このように % で指定することもできます。
縦横のサイズが同一のものであれば、50%を指定することで正円を作ることができます。

マウスオーバー時・現在のページのボタンの背景色をグラデーションに

/* マウスオーバー時 */
.pagination a.page-numbers:hover {
  background: linear-gradient(120deg, #ba7373, #f2bfbf);
  color: white;
}

/* 現在のページ */
.pagination .current {
  background: linear-gradient(120deg, #ba7373, #f2bfbf);
  color: white;
}

マウスオーバーした時や、現在のページ番号の背景色をグラデーションにしました。


ページネーションのカスタマイズも、「リスブロ」さんの記事を参考にさせて頂きました↓↓

メインカラム部分のカスタマイズは、リスブロさんに本当にお世話になりました!笑


以上のカスタマイズをして、サイトは以下のような状態になりました。

HARU channelトップページ

(ページネーションの数を増やすために、記事数を増やしました)
Webページのメインカラム部分をカスタマイズしたので、見た目の印象がだいぶ変わったと思います♪

次回は、

  • サイドバー

のCSSのカスタマイズ方法を解説します!

コメント

タイトルとURLをコピーしました