【WordPress】【JIN】ページ移動「PREV」「NEXT」のCSSカスタマイズ

こんにちは😀広瀬ユキです。

今回は、ページ移動「PREV」「NEXT」のCSSカスタマイズをご紹介します。

記事画面の下部に表示される、前のページと次のページに移動するボタンのCSSカスタマイズです。

• 「PREV」・・・Previousの略。先の、以前の、前の、という意味。
• 「NEXT」・・・次の、翌～、隣の 、という意味。
  

「PREV」「NEXT」のCSSカスタマイズ

「PREV」「NEXT」は、JINの標準設定で自動的に表示されます。色やサイズの指定も特に必要ありません。

ですので、ここでご紹介するCSSコードは、おまけの設定だと思っていただいてOKです！

では、CSSにコードを追加して、「PREV」「NEXT」をカスタマイズしてみましょう！

CSSにコードを追加する方法がよく分からない方は、下記の記事を参考にしてください。

【WordPress】【JIN】ブログのデザインをカスタマイズする方法：2種類【追加CSS】【WordPress】有料テーマ【JIN】を使っている方向けにブログのデザインをカスタマイズする方法：2種類について書きました。【追加CSS】...

コード

/*「PREV」*/
#prev-next a.prev::after {
content: 'PREV';/*文字*/
font-size: 0.5rem;/*文字のサイズ*/
color: #aaa !important;/*文字色*/
background: #aaa !important;/*背景色*/
}
/*「PREV」*/
/*「NEXT」*/
#prev-next a.next::after {
content: 'NEXT';/*文字*/
font-size: 0.5rem;/*文字のサイズ*/
color: #aaa !important;/*文字色*/
background: #aaa !important;/*背景色*/
}
/*「NEXT」*/

#prev-next a.prev::after {
content: 'PREV';
font-size: 0.5rem;
color: #aaa !important;
background: #aaa !important;
}
#prev-next a.next::after {
content: 'NEXT';
font-size: 0.5rem;
color: #aaa !important;
background: #aaa !important;
}

説明

#aaaには、お好みのカラーコードを入れて下さい。

• content　→　’　’の中に、表示する文字を入力します
  ※デフォルト（初期設定）は「PREV」と「NEXT」
• font-size　→　文字の大きさを指定します
  ※デフォルト（初期設定）は0.5rem
• color　→　contentで指定した文字の色を指定します
• background　→　背景色を指定します

font-sizeは、「px」「%」「em」「rem」などが単位として使えます。

• px　・・・　絶対値。指定したサイズで表示される。
• %　・・・　相対値。（親要素で指定したサイズによる）
• em　・・・　相対値。（親要素で指定したサイズによる）
• rem　・・・　相対値。（ルート(html)で指定したサイズによる）

当ブログでは、「content」と「font-size」のみCSSに追加してみました。

「content」「font-size」「color」「background」の行は、不必要であれば削除し、お好みでアレンジして使ってみてください🙂

ページ移動「PREV」「NEXT」のCSSカスタマイズができました‼

編集後記

細々した設定なので、記事にするか迷いましたが、参考になれば幸いです。

お知らせ｜JIN MANUALに記事が掲載されました！JIN MANUALに当ブログの記事を掲載して頂きました。当ブログのJINカスタマイズ記事一覧も合わせてご紹介します。...

【WordPress】【JIN】スマホの背景色を変えるCSSカスタマイズ★オススメ★【WordPress】有料テーマ【JIN】スマホの背景色を変えるCSSカスタマイズについて書きました。標準設定では変えられないスマホの背景色を変えることができるカスタマイズなので、オススメです。...

【WordPress】【JIN】ハンバーガーメニューの閉じるボタンが表示されないときの対処法：2種類【WordPress】【JIN】スマホのハンバーガーメニューの閉じるボタンが表示されないときの対処法について書きました。...