PR ブログ

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

2021年2月18日

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

こんな方におすすめ

  • Cocoonでページ送りナビをカスタマイズしたい
  • CSSをコピペしてページ送りナビのデザインを変えたい

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

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

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

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

ページ送りナビをカスタマイズ

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

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

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

【コピペOK】CSSでページネーションのデザインをカスタマイズ【Cocoon】

続きを見る

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

ページ送りナビのCocoon設定

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

ページ送りナビのCocoon設定

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

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

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

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

CSSのコピペ場所

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

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

CSSのコピペ場所

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

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

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

  • 背景色&枠線
  • 記事タイトル(文字)
  • ホバー時のデザイン

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

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

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

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

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

Cocoonのデフォルトの背景色&枠線

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

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

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

CSSコピペ後の背景色&枠線のデザイン

おまけ

CSSでページ下の枠線を表示させる

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

.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をコピペすると、以下の画像のようなデザインになります。

CSSコピペ後の記事タイトルのデザイン

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

ホバー時のデザイン

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

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

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

CSSコピペ後のホバー時のデザイン

すべてのコードまとめ

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

「カスタマイズが難しい…」という方へ

Cocoonはカスタマイズが必要なので、エラーの対処やCSSの学習しなければいけません。「Cocoonでは収益化は難しいな…」という印象です。

僕もCocoonのWEBデザインに3ヶ月ほどかかってしまい、収益化まで遠回りしてしまいました。

そこで、「カスタマイズが難しい…」という方はAFFINGER6の導入がオススメです。僕もAFFINGER6でサイトを運営しており、13歳で月収5桁を達成しました。

AFFINGER6は、それなりに稼ぐアフィリエイターから大人気のテーマなので、詳しくチェックしておきましょう。

参考:CocoonとAFFINGER6を比較

【比較】稼ぎたいならCocoonよりAFFINGER5がおすすめな理由
【比較】なぜCocoonよりAFFINGER6の方が収益化しやすいの?【移行すべき理由】

続きを見る

「収益化するにはCocoonでいいの?」という方は、以下の記事で「僕が有料テーマをオススメする理由」をすべて解説しているので、参考にしてください。

参考:Cocoonで収益化できない理由

【事実】Cocoonで収益化できない本当の理由【解決策あり】

続きを見る

※無料ニュースレターを発信中:僕は持病を抱えつつも、13歳でブログで月収5万円を達成しました。その状況で得た「健康×ビジネス」の知識をニュースレターで共有していきます。無料登録はこちら。いつでも解約できます。

-ブログ
-