ビジネス向けWEBサイトをつくる

Cocoonのページナビを変更する

本ページはプロモーションが含まれています

無料WordPressテーマ「Cocoon」には、他では類を見ない巨大なページナビ(ページを送るボタン)がついています。

このページナビがデザインに与える影響は、絶大なものがあります。

シンプルなデザインを目指す場合は、見たこともないよう様なページナビは邪魔になるだけでしょう。

そこで、「Cocoon」のページナビをもう少しノーマルなものに変更してみましょう。

lin

Cocoonのページ遷移ボタンをシンプルなボタンに変更します。

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「SOLARIS」の詳細をTCDのページで見る

レスポンシブ対応
カスタム投稿タイプ「お知らせ」「企業情報」「サービス」「プロジェクト」
高速化設定(絵文字読み込み・コード最適化)
他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

Cocoonのページナビの概要

では、まず「Cocoon」標準のページ遷移ボタンを見てみましょう。

Cocoonのページナビ

「次のページ」が驚くほど巨大です。

これは、おそらくスマホ対応でしょう。

ページ番号を指でタップするのは難しいですが、Cocoonの「次のページ」ボタンは簡単にタップできます。

しかし、デザイン的にみると大きすぎると感じます。

これを以下のようなシンプルなページナビに変更してみます。

変更後のページナビ

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「SOLARIS」の詳細をTCDのページで見る

レスポンシブ対応
カスタム投稿タイプ「お知らせ」「企業情報」「サービス」「プロジェクト」
高速化設定(絵文字読み込み・コード最適化)
他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

CocoonのページナビをCSSで変更する

「Cocoon」のページナビの見かけを変更するのはCSSで簡単にできます。

style.cssに以下を追加します。

/*ページナビ*/
.pagination-next {
	display: none;
}
.page-numbers {
    color: var(--cocoon-text-color);
    text-decoration: none;
    display: inline-block;
    height: 40px;
    width: 40px;
    line-height: 40px;
    text-align: center;
    margin: 0 4px;
    border-radius: 0;
    border:none;
}
.pagination .current,
.pagination a:hover {
    background-color: #111;
    color: #fff;
}
.page-numbers.dots {
    opacity: 1;
    background-color: #fff;
}

シンプルなのでひとつ一つ解説します。

「次のページ」を消す

次のページボタン
.pagination-next {
	display: none;
}

「Cocoon」の大きな「次のページ」をdisplay: none;で消します。

ページ番号を成形する

ページ番号を整えます。

ページ番号
.page-numbers {
    color: var(--cocoon-text-color);
    text-decoration: none;
    display: inline-block;
    height: 40px;
    width: 40px;
    line-height: 40px;
    text-align: center;
    margin: 0 4px;
    border-radius: 0;
    border:none;
}

var(–cocoon-text-color);はCSS変数です。カスタマイザーで設定した文字色はこのような形で利用することができます。

text-decoration: none;でリンクのアンダーライン等をなくします。

display: inline-block;によって文字を横並びにします。

height: 40px; width: 40px;で大きさを設定します。40×40pxはスマホのボタンサイズの推奨値です。

line-height: 40px;で文字の高さを合わせます。

text-align: center;で文字をセンター合わせにします。

margin: 0 4px;で文字の間隔を設定します。

border-radius: 0;で文字の丸みを除去します。

border:none;でページ番号の枠を除去します。

カレントとマウスオーバーの色を設定します。

カレントのページ番号とマウスオーバーの色を設定します。

ページナビの色指定
.pagination .current,
.pagination a:hover {
    background-color: #111;
    color: #fff;
}

ドットを成形する

ページの間にあるドットを成形します。

ページナビのドット
.page-numbers.dots {
    opacity: 1;
    background-color: #fff;
}

opacity: 1;で透過をなくします。1は100%表示。.7は70%表示。

背景に色が入っていたので、background-color: #fff;で白色を設定します。

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「SOLARIS」の詳細をTCDのページで見る

レスポンシブ対応
カスタム投稿タイプ「お知らせ」「企業情報」「サービス」「プロジェクト」
高速化設定(絵文字読み込み・コード最適化)
他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

まとめ

めずらしく、CSSコードの解説を残しました。

ページナビの成形だけのCSSにも色々な学びがあると思います。

CSSがどんなものなのかご理解いただけるはずです。

初心者にも見て欲しいページになりました。

【PR】「Theme3」では、企業サイトのWordPressテーマに「 ワードプレステーマTCD 」をオススメしています。
WordPressテーマ「SOLARIS」の詳細をTCDのページで見る

レスポンシブ対応
カスタム投稿タイプ「お知らせ」「企業情報」「サービス」「プロジェクト」
高速化設定(絵文字読み込み・コード最適化)
他、機能多数。

ご購入は以下のバナーリンクページの購入ボタンをクリックしてください。

プロモーション

戦略的WEBサイト構築方法

戦略的WEBサイト構築方法
WEB担当者にオススメ

WEBサイトをビジネス戦略のPDCAサイクルに組み込むための考え方と、サイトを内製化する方法を分かりやすく解説します。

コメントを残す

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

18 − 17 =

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

ABOUT US
lin記事を書いている人
はじめまして。「lin」です。クリエイティブディレクター兼グラフィックデザイナーとして活動しています。おかげさまで、キャリア25年以上になりました。「Theme3」は、私が企画デザイン事務所スラッシュディーの仕事で得たノウハウを公開します。
※以下は私が活動している企業情報にリンクしています。