プラグイン「last-line-ad」には、
- COCOON用CSS
- JIN-SANGO用CSS
- STORK用CSS
といったカスタマイズできるCSSが付属しています。
該当するCSSを「追加CSS」に貼り付けることで、反映させることができます。
デフォルトの表示について
ここでは、一例としてテーマ「COCOON」で解説してきます。
プラグインを設定した当初のデフォルトの表示は、いたってシンプルです。
ページに個性を出すには、
- 「次のページ」のリンクボタン
- 次のページにある見出しの表示
- 数字で表示されるページネーション
をカスタマイズしたいところです。
付属のCSSを使う
付属のCSSは、追加CSSにコピーペーストすると反映させられます。
COCOONの場合は、次のように表示が変わります。
「次のページ」と「見出し名」が、同じリンクボタンに表示されるようになりました。
青枠の色を変えてみよう！
ちなみにですが、この青枠の色を変更するには、
.heading.pager-prev-next span.page-prev-next {
background: #f0f7ff;/* 背景色 */
border: solid 3px #5b8bd0;/* 線の種類・太さ・枠線色 */
padding: 0.5em 1em;/* 余白 */
height: auto;/* 高さ */
}の、
- background（背景）
- border（枠線）
にある「#●●●●●●」の部分を好きなカラーコードに変更すると色が変わります。
「次のページ」と「見出し名」のカスタマイズ
ただ、これだけの色の変更では面白さも少ないと思います。
そこで、コピペでカスタマイズできるように、いくつかのパターンを用意させていただきました。
好みに合うものがあれば、使ってみてください。
枠の角を丸くする
先ほど色を変えたリンク枠の部分です。
↓
このように角の丸みを変化させることができます。
入力するコード
.heading.pager-prev-next span.page-prev-next{
border-radius: 50px;/* 丸くする加減*/
}「50px」と書かれている部分の数字を変化させると、丸みの加減を変化させられますよ。
太字にする
太字にすると、印象を強くすることができます。
↓
太字にするには、付属のCSSに追記します。
【元のコード】
.heading.pager-prev-next a {
width: 60%;
}
【太字にするコード】
.heading.pager-prev-next a {
width: 60%;/* 全体の横幅 */
font-weight: bold;/* 文字の太さ */
}このように、「.heading.pager-prev-next a」の中に、「font-weight: bold;」を追加すると太字に設定することができます。
ちなみにですが、以下の設定と変更することもできるので、好みに合ったものを選びましょう。
- normal
- bold
- lighter
- bolder
ページネーションのカスタマイズ
数字が表示されている部分のカスタマイズです。
COCOONでは、「.page-numbers」でカスタマイズが行えます。
ただ、次のページリンクにも反映されてしまう部分がありますので、組み合わせによっては上手く反映されないことがあります。
丸いボタンにする
先ほど角を丸くするカスタマイズがありましたが、こちらは同時に丸める設定ができます。
↓
これは、新たにCSSの追加を行いましょう。
.page-numbers {
border-radius: 50px;/* 丸くする加減 */
}
ページネーションの色を変える
数字部分の色の変え方についてです。
COCOONでは、「.pager-links span」を使用すると変更ができます。
こちらも同様に次のページへ部分にも反映されます。
↓
こちらは、「次のページ」のリンクボタン部分と表示しているページのナンバー部分が連動しています。
そして、開いていないページの数字部分に、色を指定しています。
/* 次のページと表示ページの数字部分 */
.pager-links span{
background-color:#fdf5e6;/* 背景色 */
border: solid 3px #deb887;/* 枠線色 */
}
/* 表示していないページの数字部分 */
.pager-links a span{
background-color:#ffe4e1;/* 背景色 */
border: solid 3px #ffe4e1;/* 枠線色 */
}このようにすることで、個性のある仕上がりに変更することができます。
太字にする
次のページ部分と数字の部分を、同時に太字にすることもできます。
↓
入力するのはこちらです。
.pager-links span{
font-weight: bold;/* 文字の太さ */
}
カスタマイズで印象が変わる
このように自分好みにカスタマイズすると、簡単に個性ある仕上がりに変更できますよ。
【変更前】
【変更後】
ちょっと上級者編カスタマイズ
ここまでカスタマイズをしていると、「次のページ」という表記を変更したくなりませんか？
プラグインを少し編集すると可能です。
ただ、失敗するとプラグインが動かなくなってしまうので、間違えた時はプラグインをアンインストール&インストールで初期状態に復元しなければなりません。
そのため、カスタマイズに慣れている方だけにしましょう。
プラグインの編集画面で編集しよう！
まず、プラグインの編集画面を開きます。
メニュー画面の「プラグイン」の中にあります。
編集画面を開き「Last line Ad」を選択して、編集画面を開きましょう。
編集画面中盤「294」と「317」行目に、「次のページ」という表記があります。
こちらの表記を変更すると、好きな表現に変えることができます。
「次のページが同じ記事内の時の場合」と「次のページが別な記事の時（最後のページ）」に分けて表示を変更することができますよ！
今回ご紹介したカスタマイズは一例ですので、枠線を点線にすることなども、通常のCSSカスタマイズ同様に行うことができます。
自分のサイトにあったカスタマイズを行い、統一感のあるデザインにしましょう。