【Cocoon】ページ送りナビのデザインをカスタマイズ【コピペOK】

今回は、『【Cocoon】ページ送りナビのデザインをカスタマイズ【コピペOK】』について初心者にもわかりやすく解説します。

本記事では、ページ送りナビについて以下の二つを解説します。

ページ送りナビは、以下のように前の記事と次の記事を表示できます。（※当サイトは現在、CocoonからAFFINGER6に移行したので、デザインが変わっています。）

ページネーションとの違い

「ページネーションをカスタマイズしたい」といった方は、以下の記事がオススメです。

参考：Cocoonのページネーションをカスタマイズする方法

※補足：「ページネーション」とは以下のように記事一覧に表示されるものです。

ページ送りナビのCocoon設定

管理画面の［Cocoon設定➡︎投稿➡︎ページ送りナビ］からページ送りナビの設定ができます。

この画面では、以下のような設定ができます。

■表示
・ページ送りナビを表示する
■表示タイプ
・デフォルト
・サムネイル形式
■表示位置
・本文下
・関連記事上
・関連記事下（デフォルト）
・コメント下
■カテゴリー
・同一カテゴリーのものを表示する
・除外カテゴリー
■枠線表示
・ページ送りナビの枠線を表示する

上記のような設定はできますが、デザインをカスタマイズするにはCSSが必要です。

なお、デザインをカスタマイズしたい方は『ページ送りナビを表示する』をオンにしましょう。

CSSのコピペ場所

ページ送りナビのデザインをカスタマイズするために、CSSを追加する画面を開きましょう。まず、管理画面から［外観➡︎テーマエディター］を選択しましょう。

次に、［編集するテーマを選択］のところがCocoon Child（子テーマ）であることを確認してください。もしなってない場合はCocoon Childに設定しましょう。

style.cssを選択したら、コードを好きなとこに追加してください。
※よくわからない方は一番下にコードをコピペしましょう。

CSSでページ送りナビのデザインをカスタマイズする方法

続いて、以下の3つをカスタマイズする方法について解説します。

それでは順番に解説します。

デザイン①：背景色&枠線

ページ送りナビの背景色と枠線のカスタマイズするには、以下のコードをコピペしましょう。

.pager-post-navi {/*ページ送りナビ*/
background-color: #eee;/*背景色*/
border: 1px solid #ccc;/*枠の大きさ、スタイル、色*/
}

上記のCSSをコピペすると、以下のようなデザインになります。

色や枠線の太さを変えたい場合は、マーカーのところを変更しましょう。

.pager-post-navi {/*ページ送りナビ*/
background: #f0f7ff;/*背景色*/
border: 2px dashed #5b8bd0;/*枠の大きさ、スタイル、色*/
}

例えば、このように書き換えると以下のような感じになります。

おまけ

ちなみに、以下のコードをコピペすると、上の画像のようにページの下に枠線が表示されます。

.pager-post-navi a{/*ページ送りナビ*/
border-bottom: 2px dashed #5b8bd0;/*枠の大きさ、スタイル、色*/
}

デザイン②：記事タイトル（文字）

記事タイトルは、デフォルトだとこのようなデザインです。👆
こちらも、CSSをコピペしてカスタマイズしましょう。

.pager-post-navi a {/*ページ送りナビ*/
color: #4086bf;/*文字色*/
line-height: 1.7;/*行間*/
font-size: 1em;/*文字の大きさ*/
font-weight: bold;/*文字の太さ*/
}

上記のCSSをコピペすると、以下の画像のようなデザインになります。

デザイン③：ホバー時のデザイン

通常だと、上の画像のようなデザインです。
ホバー時のデザインは、以下のコードでカスタマイズできます。

.pager-post-navi a:hover {/*ホバー時のページ送りナビ*/
background-color: #efefef;/*背景色*/
color: #000;/*文字色*/
border: 1px solid #369;/*枠の大きさ、スタイル、色*/
}

このCSSをコピペすると以下のようなデザインになります。👇

すべてのコードまとめ

今回紹介した全てのコードをまとめました。
※重複するCSSは省略しています。