個別記事ページに同じカテゴリーの前後ページリンクを付ける

確か、2019/09 中旬以降の更新で全てのテンプレートに標準で付けたと思いますが、それ以前のテンプレートに不備だった『同一カテゴリーの前後ページリンク』を付けるカスタマイズです。
９月上旬にユーザー様よりお問い合わせ頂いた件で、更新以前のユーザー様にも有益なカスタマイズなので記事にしようと思っておりました。
遅くなりましたが、この度 回答しているものを掲載させて頂きます。

記事を読む際に、更新日で辿ってもカテゴリーで辿っても、表示されるページは個別記事ページです。
この"個別記事ページ"に仕込んであるページ送りが 2019/09 中旬以前にDLされたテンプレートだと『更新日順』のみなので、記事の後、コメント入力欄（投稿可の場合）の前に下記のように表示されます。


↑更新以前のものは、こんな感じに表示されています。

…なので、更新日順とカテゴリー順の両方付ければ閲覧されている方が選べて良いのでは？と、『更新日順』と『カテゴリー順』の両方を付けるカスタマイズです。


↑こんな感じに変更するカスタマイズです。


↑カラム幅が狭い場合の表示はこんな感じ。




先ず、HTML編集枠内半分位までスクロールした所に下記のような箇所が有ります。
（検索は［Ctrl＋Fキー］で<!-- トップページ　ここまで -->と入力。枠内に1ヶ所有り）その２,３行下に、

<!--permanent_area-->
<!--ページ移動-->
<div class="page_navi">
<!--preventry-->≪ <a href="<%preventry_url>" title="前のページへ"><%preventry_title></a><!--/preventry--> | <a href="<%url>" title="TOPページへ">Home</a> | <!--nextentry--><a href="<%nextentry_url>" title="次のページへ"><%nextentry_title></a> ≫<!--/nextentry-->
</div>
<!--/ページ移動-->
<!--/permanent_area-->

という部分が有ります。この青文字部分を削除し、下記（オレンジの部分）をコピーして同じ場所に貼りつけて下さい。

<!--permanent_area-->
<!--ページ移動・更新順-->
<div class="page_navi">
<div style="font-size:12px;"><a href="<%url>" title="TOPページへ">更新日順</a></div>
<ul class="entry-navi">
<li class="entry-prev"><!--preventry--><a href="<%preventry_url>" title="New"><%preventry_title></a><!--/preventry--></li>
<li class="entry-next"><!--nextentry--><a href="<%nextentry_url>" title="Old"><%nextentry_title></a><!--/nextentry--></li>
</ul>
<!--/ページ移動・更新順-->

<!--topentry-->
<!--ページ移動・同カテゴリ-->
<div style="font-size:12px;">カテゴリ:［<a href="<%topentry_category_link>" title="CategoryTOPへ"><%topentry_category></a>］</div>
<ul class="entry-navi">
<li class="entry-prev"><!--prevcategoryentry--><a href="<%prevcategoryentry_url>" title="New"><%prevcategoryentry_title></a><!--/prevcategoryentry--></li>
<li class="entry-next"><!--nextcategoryentry--><a href="<%nextcategoryentry_url>" title="Old"><%nextcategoryentry_title></a><!--/nextcategoryentry--></li>
</ul>
</div>
<!--/ページ移動・同カテゴリ-->
<!--/topentry-->
<!--/permanent_area-->

次に、下段のスタイルシート編集枠内、一番下に下記（緑の部分）をコピーして貼り付けて下さい。

@media screen and (min-width:600px) {
.entry-navi{
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
}
.entry-prev,.entry-next{
  max-width:45%;
}
}

.entry-navi{
  margin:0 auto 20px;
  width:100%;
  font-size:12px;
}
.entry-prev{
  list-style:none;
  margin:0 5px 0 15px;
}
.entry-next{
  list-style:none;
  margin:0 15px 0 5px;
}
.entry-prev a{
  padding:0 10px;
  display: block;
  position: relative;
  max-width: 100%;
  text-align: left;
}
.entry-prev a:before {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  left: -3px;
  width: 10px;
  height: 10px;
  margin: -7px 0 0 0;
  border-top: solid 2px #666;
  border-right: solid 2px #666;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.entry-next a{
  padding:0 10px;
  display: block;
  position: relative;
  max-width: 100%;
  text-align: right;
}
.entry-next a:after {
  display: block;
  content: "";
  position: absolute;
  top: 50%;
  right: -3px;
  width: 10px;
  height: 10px;
  margin: -7px 0 0 0;
  border-top: solid 2px #666;
  border-right: solid 2px #666;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

後は更新ボタンを押して頂ければ完了です。
カスタマイズをする場合は、テンプレートの複製を作って作業すると安心です。(^_^)
（コメントにて質問を頂いたページはこちら↓）
重要！テンプレート al_responsive2c-r をご利用の方へ