【EASEL】作品個別ページのページネーションのデザインを整える

作品個別ページの下部にある、前後の作品ページのリンク(ページネーション)のデザインを整えるカスタマイズの備忘録です。

前後の作品タイトルの長さに差があってもリンクの大きさが一定になるようにCSSを編集します。

 

編集前(上からPC版、スマホ版)

 

編集後

 

CSSの編集

「カスタマイズ」→「追加CSS」に以下のコードをコピペします。

@media only screen and (min-width: 768px){
.pagination.single {
  width: 90%;
  margin: auto;
 }
}

.pagination.single a[rel=prev], .pagination.single a[rel=next] {
 width: 49%;
}

.pagination.single {
 font-size: 12px;
}

画面幅が768px以上の時は全体の幅を90%と小さめに設定します。

また、左右のリンクの横幅を49%に固定し、フォントサイズを12pxに変更します。