てがろぐ
- Fumy Otegaru Memo Logger -
No.5667
🍘特定のカテゴリだけ昇順で見せたい場合の対処方法例： #🌱豆知識
小説を掲載しているなどで、第1話から読ませるために「特定のカテゴリだけは昇順（古い投稿から順に）表示させたい」という場合は、そのカテゴリへのリンクURLの末尾に &order=reverse を加えれば良いです。
もし、てがろぐ側が出力するカテゴリツリーのリンク先もそのように変えたい場合は、下記のようなJavaScriptを（HTMLの末尾に）書いておくと、『指定のカテゴリだけは「昇順で表示されるページ」にリンクされる』カテゴリツリーになります。
例えば、そのカテゴリIDが「novel」の場合、カテゴリツリーのリンクは <a href="?cat=novel" class="catlink cat-novel">～</a> のようなa要素で出力されています。
このリンク先である ?cat=novel に &order=reverse を加えて ?cat=novel&order=reverse とすれば、昇順（古い投稿から順）の表示になります。
下記のJavaScriptは、class名にcat-novelが付いたすべてのa要素のリンク先URLの末尾にだけ、 &order=reverse という文字列を追加するスクリプトです。
同一ページ内にカテゴリツリーが複数個出力されている場合でも全部書き換わります。
<script>
document.addEventListener("DOMContentLoaded", function () {
// cat-novelクラスを持つa要素をすべて取得
const links = document.querySelectorAll("a.cat-novel");
links.forEach(function(link) {
// リンク先を取得して order=reverse を追加
const href = link.getAttribute("href");
link.setAttribute("href", href + "&order=reverse");
});
});
</script>
カテゴリID部分（上記のソース中に赤色太字で書かれた箇所）を、ご自身でお使いのカテゴリID名に書き換えてご使用下さい。
🍘なお、もし対象にしたいカテゴリIDが複数個ある場合は、上記スクリプトの3行目にある querySelectorAll の引数にカンマ区切りで全部列挙すれば良いです。例えば以下のように。
const links = document.querySelectorAll("a.cat-novel, a.cat-journal");
🍘もし、カテゴリツリー以外の部分にも同じclass名でリンクを作っていて、そちらのリンクは対象にしたくない場合は、カテゴリツリーの大外枠が <ul class="cattree">～</ul> で出力されていることを利用して、以下のように書けば良いです。
const links = document.querySelectorAll("ul.cattree a.cat-novel, ul.cattree a.cat-journal");
※カテゴリツリーのHTML構造は、ヘルプドキュメント「カスタマイズ方法」内のカテゴリツリーの装飾方法あたりで解説していますので参考にして下さい。
---(追記)---
上記の(最初の方の)JavaScriptだと、カテゴリツリー内のリンクだけでなく、『各投稿に表示される所属カテゴリ名』のリンク先も同様に書き換わります。たぶんその方が都合が良いのではないかと思いますが、もしそこは変更したくない（降順のままにしたい）という場合は、上記の最後に紹介した ul.cattree を加える書き方を使うと良いです。
小説を掲載しているなどで、第1話から読ませるために「特定のカテゴリだけは昇順（古い投稿から順に）表示させたい」という場合は、そのカテゴリへのリンクURLの末尾に &order=reverse を加えれば良いです。
もし、てがろぐ側が出力するカテゴリツリーのリンク先もそのように変えたい場合は、下記のようなJavaScriptを（HTMLの末尾に）書いておくと、『指定のカテゴリだけは「昇順で表示されるページ」にリンクされる』カテゴリツリーになります。
例えば、そのカテゴリIDが「novel」の場合、カテゴリツリーのリンクは <a href="?cat=novel" class="catlink cat-novel">～</a> のようなa要素で出力されています。
このリンク先である ?cat=novel に &order=reverse を加えて ?cat=novel&order=reverse とすれば、昇順（古い投稿から順）の表示になります。
下記のJavaScriptは、class名にcat-novelが付いたすべてのa要素のリンク先URLの末尾にだけ、 &order=reverse という文字列を追加するスクリプトです。
同一ページ内にカテゴリツリーが複数個出力されている場合でも全部書き換わります。
<script>
document.addEventListener("DOMContentLoaded", function () {
// cat-novelクラスを持つa要素をすべて取得
const links = document.querySelectorAll("a.cat-novel");
links.forEach(function(link) {
// リンク先を取得して order=reverse を追加
const href = link.getAttribute("href");
link.setAttribute("href", href + "&order=reverse");
});
});
</script>
カテゴリID部分（上記のソース中に赤色太字で書かれた箇所）を、ご自身でお使いのカテゴリID名に書き換えてご使用下さい。
🍘なお、もし対象にしたいカテゴリIDが複数個ある場合は、上記スクリプトの3行目にある querySelectorAll の引数にカンマ区切りで全部列挙すれば良いです。例えば以下のように。
const links = document.querySelectorAll("a.cat-novel, a.cat-journal");
🍘もし、カテゴリツリー以外の部分にも同じclass名でリンクを作っていて、そちらのリンクは対象にしたくない場合は、カテゴリツリーの大外枠が <ul class="cattree">～</ul> で出力されていることを利用して、以下のように書けば良いです。
const links = document.querySelectorAll("ul.cattree a.cat-novel, ul.cattree a.cat-journal");
※カテゴリツリーのHTML構造は、ヘルプドキュメント「カスタマイズ方法」内のカテゴリツリーの装飾方法あたりで解説していますので参考にして下さい。
---(追記)---
上記の(最初の方の)JavaScriptだと、カテゴリツリー内のリンクだけでなく、『各投稿に表示される所属カテゴリ名』のリンク先も同様に書き換わります。たぶんその方が都合が良いのではないかと思いますが、もしそこは変更したくない（降順のままにしたい）という場合は、上記の最後に紹介した ul.cattree を加える書き方を使うと良いです。
- ユーザ「にしし」の投稿だけを見る (※時系列順で見る)
- この投稿と同じカテゴリに属する投稿：
- この投稿日時に関連する投稿：
- この投稿に隣接する前後3件ずつをまとめて見る
- この投稿を再編集または削除する
