「STORK(ストーク)」のページャーをオシャレにカスタマイズ!【コピペOK】

こんにちは、わっちーです。

今回はページャーのカスタマイズ方法をご紹介します!

コピペだけでカスタマイズできるので、気になる方は是非試してみてください。

因みに僕もページャーはカスタマイズしています!

STORKユーザーで細かいところまでカスタマイズしたい、という方にオススメです。

記事の内容

  • ページャーってなに?
  • ページャーのカスタマイズ方法

ページャーってなに?

ページャーって聞きなれない言葉ですよね。

僕も最初は何のことかわかりませんでした・・・

ページャーってページ下にあるこのボタンです。

上記のページャーはSTORK標準で角があり四角いです。

このデザインが好きって人も多いと思いますが、もうちょっとゆるい感じのページャがいいなーという方もいるはずです。

そこで今回は、

  • ページャの角を丸くする
  • ページャを丸にする

この2種類のやり方をご紹介します。

僕は、ページャの角を丸くしています。

ページャのカスタマイズ方法

CSSコードをコピペする方法

ページャをカスタマイズするには、CSSコードをコピペする必要があります。

手順はとても簡単ですが、わからない方は下記の通りに進めて下さい。

①ダッシュボードメニュー

②外観→カスタマイズ

③追加CSS

CSSコードをコピペした瞬間にページャが変わるので確認してください。

ページャの角を丸くするCSS

僕も使っているページャの角を丸くするCSSコードです。

.pagination a, .pagination span{
padding: 7px 14px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

調整の仕方は、10pxと表示されている部分の数字を大きくすると丸に近づき、数字を小さくすると四角に近づきます。

注意点として、10pxの部分を変えるときは3カ所全て変えるようにしてください。

パソコン・スマホ・タブレットによって見え方が変わってしまう可能性があります。

ページャを丸にするCSS

次はページャを丸にするCSSコードです。

.pagination a, .pagination span{
padding: 7px 14px;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}
@media only screen and (max-width: 767px){
.pagination a, .pagination span{
padding: 8px 14px;
border-radius: 20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
}
}

もし正円に見えなかった場合は、padding: 7px 14px; の数字を変えると形状が変わるので試してみてください。

まとめ

ページャーをカスタマイズすることは、そんなに大きな変化ではないです。

とはいえ、ページャーをカスタマイズするだけで読者に今までとは違った印象を与えられるのも事実です。

サイトのイメージをゆるくしたい方やかわいくしたい方には、本当にオススメなので是非変えてみてください。

今後も僕が実際にしているカスタマイズ方法を記事にしていきます。

ということで、今回はページャーのカスタマイズ方法をまとめてみました。

ご意見、ご質問があればTwitterのDMからご連絡ください。

最後まで読んでいただき、ありがとうございました!(^^)!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です