【Rails】簡単にkaminariのデザイン変更 #Ruby

はじめに

ページネーションのデザインを以下のように、デフォルトのシンプルなデザインから変更する方法をまとめておきます。

今回は、「kaminari」のgemが導入されていることを前提にしています。

変更方法

次の流れでデザイン変更していきます。
①bootstrapの適用
②CSSでデザインの変更
③言語を日本語に変更する
④表示を中央揃えにする

①bootstrapの適用

まずは以下コマンドにて、kaminariに「bootstrap」を適用させます。
なおCSSのフレームワークには「bourbon」や「foundation」などがありますが、ここでは「bootstrap」を用います。

$ rails g kaminari:views bootstrap4

bootstrapのバージョンでは各自で使用しているバージョンを指定します。
このコマンドを入力すると、viewsのところにkaminariディレクトリが作成されていて、デザインが変わっていると思います。

②CSSでデザインの変更

次に自由にデザインを変えるにはCSSを変更させる必要があります。
次のように記述すれば冒頭のようなデザインになります。こちらは好みのデザインを見つけて記述してみてください。

app/assets/stylsheets/application.css

.pagination>li>a {          
  border: none;     
  color: #696969;   
}

.pagination>.active>a {     
  background: #93c9ff;     
  border-radius: 15px;     
}

.pagination>li>a:hover {        
  border-radius: 15px;   
}

③言語を日本語に変更する

今のviewsファイルではページネーションの文字を変更することはできない為、デフォルトの英語のままです。
そこで新しいファイルを作成して、日本語表示できるようにしていきます。
config/localesファルダに、「kaminari_japanese.yml」という名前のファイルを作成してそこに、以下内容を記述していきます。(ファイル名は自由です。)

config/locales/kaminari_japanese.yml

ja:
  views:
    pagination:
      first: "&laquo; 最初"
      last: "最後 &raquo;"
      previous: "&lsaquo; 前"
      next: "次 &rsaquo;"
      truncate: "..."

これで日本語に変更されたかと思います。

④表示を中央揃えにする

現状ではページネーションの表示が左側に寄っていると思うので、これを中央にします。
②で編集したapp/assets/stylsheets/application.css内に以下を追記してください。

app/assets/stylsheets/application.css

.pagination {
  justify-content: center;
}

これで中央揃えに変更されたかと思います。

以上がkaminariのデザイン変更の方法となります。