Someday Somewhere

A little something to say in my everyday life

はてなブログのページャー

f:id:tsukisai:20190317125425p:plain

 

記事画面に前ページと次ページの記事タイトルを表示させる

先日、スマホで自分のブログを見ていた時のこと。 記事の最後までいき、更に画面を下へ下へと進めど進めど、一向にページャーが現れません。 「あれー、なんか変。 スマホ画面ではページャーは無かったっけ???」と思いつつ、とうとう最後まで行きついてしまいました。

普段、スマホで自分のブログをあまり見ないのですが、以前は次のページの記事タイトルがあったような気がしたのですが。 あちこちカスタマイズしていじっているうちに自分で消してしまったのか???

PC画面では、次ページの記事タイトルが問題なく表示されているのに、スマホ画面では表示されていないという状態になっていました。 ちなみに、 このブログはMinimalismというテーマを使っており、レスポンシブデザインなので、スマホ画面のカスタマイズは一切触っていません。

しょうがないので、ページャーのカスタマイズに関する記事を検索して、設置することにしました。 参考にさせて頂いたサイトさんがこちら(↓)。

theme-plain.hatenablog.com

上記サイトさんで紹介されているコード(↓)をcssに貼り付けました。 すると、PC画面とスマホ画面の両方に、前ページと次ページの記事タイトルがちゃんと表示されるようになりました。 これで、問題を一つ解決です。

/*ページャー(2段)*/
.pager
{display:block;
font-size:90%;margin-bottom:1em;}
.pager > span
{max-width:100%;}
.pager-prev
{float:left;}
.pager-next
{float:right;}
.pager::after
{display:block;clear:both;content: " ";visibility: hidden;}
@media (max-width: 767px) {.page-index .pager{padding:0 1em;}}

トップページに「前のページ」をつける

はてなブログのページャーは、カテゴリなどのアーカイブページの2ページ目以降は「前のページ」と「次のページ」というページャーが表示されますが、なぜかトップページは「次のページ」しか表示されません。 なんか、不便です。

「次のページ」があるのだから、逆の方向に戻るページャーも必要だと思うのですが、ありません。 そこで、このサイトさん(↓)のコードを使わせて頂き、「前のページ」を設置してみました。

www.marorika.com

コード(↓)をフッタのHTMLを記述する箇所に張り付けました。 cssは特にいじらなかったのですが、トップページの記事一覧ページに無事「前のページ」が現れました。

<script type="text/javascript">
// 現在のページが記事一覧の2ページ目以降の場合処理実行
if (location.search.indexOf("?page=") === 0) {
// aタグの作成
var a = document.createElement('a');
a.addEventListener("click", function(){history.back();}); // クリックすると一つ前の履歴に戻る処理を追加
a.innerHTML = "前のページ"
a.setAttribute("href", "javascript:void(0);");
a.setAttribute("rel", "prev"); // seo対策
// spanタグの作成(中に作成したaタグを入れる)
var span = document.createElement('span');
span.classList.add('pager-prev');
span.appendChild(a);
// classがpagerのdivタグに上記で作成したものを挿入する(classがpager-nextのspanタグよりも前に挿入する)
var element = document.getElementsByClassName("pager")[0];
element.insertBefore(span, element.firstChild);
}
</script>

ところで

「次のページ」という言葉。 次のページとは言っても、時間的には以前投稿した過去記事なのに、「次のページ」というのもなんかしっくりきません。 「次のページ」と「前のページ」を他の言葉にしたいと思い、あちこちのサイトを見たのですが、やり方がいまいちわからず。

細かいようですが、「次」は未来、「前」は過去なので、これは、はてなブログさん、何とかして欲しいと思ってしまいます。

追記:アーカイブページのページャーがくずれてしまっていた

先日、コメントで「次のページ」と「前のページ」の言葉に関して参考になるサイトを教えて頂きました。 十分な時間が取れる時にやってみようと思いつつ、何気に自分のサイトをあちこち見ていると、ページャーに関してまたまた問題発生です。

上記にも書いた通り、トップページのページャーは「前のページ」も表示され、問題がありませんでした。 ところが、カテゴリの一つをクリックしてみると、画面左下に「前のページ」、画面右下に「次のページ」、そして画面真ん中の下に「前のページ」となってしまっていました。

もともと、はてなブログでは、始めからアーカイブのページには「前のページ」と「次のページ」が表示されるようになっていたため、上記コードを書き込んだことで、アーカイブページのページャーに影響を及ぼしてしまったようです。

再度、いろいろな方のサイトを参考に、幾つかのコードで試してみました。 どのコードもPC画面のトップページは問題なくページャーを設置できるのですが、スマホ画面のページャーはうまくいきませんでした。

ちょっと疲れてしまったので、トップページのページャーに関しては、当分デフォルトのままにしておこうと思います。