藍と青

日常と思考の記録.

はてなブログの前後ページリンクを左右入れ替え＋SP対応するCSS

試行

この記事は、はてなブログのデザインテーマに「Reach」を使用しているサイトでのカスタマイズ記事です。考慮はしていますが、他のテーマを使用している場合には正常に動作しなかったり、デザイン崩れが起きる可能性もありますので自己責任でお願いします。

はてなブログの記事下に表示される「前のページ／次のページ」リンクはデフォルトで、

  • 左：前のページ(=新しい記事)
  • 右：次のページ(=古い記事)

となっています。

しかし、個人的にはWordPressの時に慣れ親しんでいた、

  • 左：前のページ(=古い記事)
  • 右：次のページ(=新しい記事)

の方が違和感が少ないので、カスタマイズを行いました。
(目線は基本的に左から右に流れるはずなので、古い記事→新しい記事となる並びの方が見やすいのではと思っています)

カスタマイズの概要

  • PC表示
    • 左：前のページ(=古い記事)
    • 右：次のページ(=新しい記事)
  • 矢印の向きも意味通りにする
    • はてなブログでは、beforeやafterではなく<span class="pager-arrow">« </span>とHTMLに直接書かれているので注意。
  • スマホ表示では2カラム表示によるデザイン崩れを防ぐため上下に並べる
    • 上左寄せ：前のページ(=古い記事)
    • 下右寄せ：次のページ(=新しい記事)

実装CSS

こちらのCSSを、はてなブログの「デザイン ＞ カスタマイズ ＞ デザインCSS」の既存コードの後に貼り付けてください。

/* =========================
   前後ページリンク（PC）
   ========================= */

/* 横並び */
.pager {
  display: flex;
  justify-content: space-between;
}

/* 並び順を入れ替える */
.pager-prev {
  order: 2; /* 右 */
}

.pager-next {
  order: 1; /* 左 */
}

/* デフォルトの余白を打ち消す */
.pager .pager-next {
  margin-left: 0;
}

/* もともとの矢印文字を非表示 */
.pager-arrow {
  display: none;
}

/* 左側（次の記事）に << を付ける */
.pager-next a::before {
  content: "« ";
}

/* 右側（前の記事）に >> を付ける */
.pager-prev a::after {
  content: " »";
}


/* =========================
   前後ページリンク（SP）
   ========================= */

@media screen and (max-width: 600px) {
  /* 縦並び */
  .pager {
    flex-direction: column;
    gap: 0.75em;
  }

  /* 上：左側（次の記事） */
  .pager-next {
    order: 1;
    text-align: left;
  }

  /* 下：右側（前の記事） */
  .pager-prev {
    order: 2;
    text-align: right;
  }
}

コードのポイントとしては、

  • row-reverseは使わず、orderで安全に順序を制御
  • 既存の« »は HTML 内にあるため、一度非表示にして付け直し
  • スマホでは横並びをやめて縦並びにすることで、レイアウト崩れを防止

といったところでしょうか。 よろしければ、必要に応じて改良してお使いください。

以上です。