当ブログはMinimalism（レスポンシブデザイン）というテーマを使っています。
シンプルだし、あれこれとカスタマイズしやすい部類のテーマだと思います。 はてなブログテーマストアでの人気も1位。
でも、気になるところが一つある、というか、私のような素人ではどうにも解決できない箇所が一つあります。
不具合箇所
スマホ画面でカテゴリなどアーカイブページを開いた時のページャー
現象
PCの場合：
トップページ：何ページ目にいっても「次のページ」のみ（「前のページ」はもともとない）
カテゴリの一つを開いた場合：2ページ目からは「前のページ」と「次のページ」が表示される
各記事を開いた場合：前後の記事タイトルが左右に表示される
これをスマホで見ると
トップページ：PCと同じ
カテゴリの一つを開いた場合：2ページ目からは「前のページ」はPCと同じものが現れ、「次のページ」はデザインが崩れる
尚且つ、「前のページ」と「次のページ」のデザインが異なる
各記事を開いた場合：PCと同じ
ピンクのマーカー部分が問題箇所。
実際の見た目はこんな感じ（↓）。
スマホ画面では、「次のページ」にもともと設定されているデザインがあるようで、そのデザイン設定がどうやっても生き残ってしまいます。
余談ですが、トップページの記事一覧にも「前のページ」を設置しようと試みたことがあります。 設置はできるのですが、スマホ画面には「前のページ」が二つ現れてしまい、尚且つ「次のページ」の見た目が崩れる＆「前のページ」の一つと部分的に重なる、という羽目になり、諦めたことがあります。
原因
以前カスタマイズした時、どこか余計な部分を触ってしまったか。
とりあえずページャーのカスタマイズ内容を振り返り、できるだけ元にもどしてみたり。
「前のページ」を設置する方法を説明しているサイトを参考にして幾つも試したり。
結果はどれも失敗。
ちなみに、Minimalismを使用している他のサイトをスマホで見ると、やはり同じ現象がおきています。
気になりだすと、どうしようもなく気になります。
結果
スマホ画面にだけ現れる「次のページ」の見た目を変えたいのですが、上手くいかない
↓
それならばと、とりあえずアーカイブページに表示される「前のページ」を非表示にすることにしました。
ページャーを非表示にする方法
アーカイブページに現れる「前のページ」を非表示にします。
.page-archive .pager-prev { display: none; }
@media (max-width: 500px) { .page-archive .pager-prev { display: none; } }
上記の内どちらかをCSSに貼り付けて終了。
PCのほうは「前のページ」が表示されても特に問題なく使えているので、スマホ画面のみ非表示にしました。
これで、見た目の煩わしさはなくなりましたが･･･。
ん～、欲を言えば、「次のページ」があるのだから「前のページ」も設置したいよねー。
（それはまた今度にするか･･･）
そんなこんなで、ここ最近、ブログのテーマを変えようかどうしようか、思案中（今から変えるとなると、変更後の修正がいろいろとあるだろうなあ）。
