Web制作メモ -トップへ-

[SOY CMS] ページャーのカスタマイズ

Web全般2014.01.03 15:23

SOY CMSのページャーブロックは、表示中のページ番号にcurrent_page_numberというクラスが付いています。

ページャー

上図のように、現在表示中のページ番号を強調したり、リンクが不要な場合は、current_page_numberを使ってカスタマイズします。

ページ番号を強調する場合は、CSSでcurrent_page_numberクラスを設定すれば特に問題はありませんが、リンクを無効にする場合は一工夫必要です。

というのも、CSSでリンクを無効にするプロパティpointer-eventsはIE10が対応していません。IE10用にリンクなしを偽装する設定も入れておきます。

CSSでカスタマイズ

.current_page_number {
  pointer-events: none; /*クリック時のリンクを無効*/
  cursor: default; /*マウス形状を矢印*/
  text-decoration: none; /*下線なし*/
  color: #000; /*リンクなし文字色を設定*/
}

または、jQueryを使って、Aタグごと削除する方法もあります。

jQueryでカスタマイズ

$(function(){
  $('a.current_page_number').contents().unwrap();
});