はてなブログのページャーの表記がおかしいならJavaScriptで弄っちゃえばいいんじゃない?という話(一部修正して再掲)
Ritsurin park / Kagawa, Coolpix A, Dec 2013
明けましておめでとうございます。年末年始の暴飲暴食も一段落し、やっと通常運行に移行したid:ichiro_sです。今年もよろしく御願いします。
ところで、だいぶ更新間隔が空いてしまいました。実はその間に写真観が色々変わった話、沖縄の離島に弾丸日帰り旅行に行った話、カメラを買い換えたよ~っていう話など、ここに書綴りたかったネタは色々あるのですが、その辺は後回しで今回は人助けです。
きっかけはケニーさん(id:kenny1991)のこのエントリ↓
はてなブログをご利用の皆様の大半はお気づきだと思いますが、はてなブログが標準で用意しているページャー(ページ遷移のリンク)が滅茶苦茶で気持ち悪いよねぇ~という話。
具体的にどうおかしいかと言うと、
- 記事単体のページでは"前の記事"/"次の記事"という表記
- リストページでは過去に遡るのに"次のページ"という表記
- 更にリストページでは新しい記事リストのページへ戻るリンクが無い
まあケニーさんの指摘の通りなので引用します。
これさー、トップページに出る[次のページ]と個別ページに出る[次の記事]のclass定義が両方ともpager-nextで同じなんだよ。おかしくない?[次のページ]は古い方に遡っていくのに、[次の記事]は新しい方に進むって時制がめちゃくちゃ。
そうなんですよね。表示モードで時系列が統一されていない気持ち悪さ。これに尽きます。
[新しい(newer)][古い(older)]とかのほうが良くない?
じゃあ言葉を変えればいいじゃん、ってやり方分かんないし。誰か教えて。
ですよね、じゃあやってみようって事でやってみました。成功しました。
まずはトップページに戻って頂き左下のページャーリンクを見て下さい。
(このブログからは撤去しました)
やり方ですが、まずはソースを貼っておきます。
※指摘を承けて1/7 17:18に加筆修正しました。
function KennyMeguro(){ if (!document.getElementsByTagName) return; var anchors = document.getElementsByTagName("a"); var ListPage = document.getElementsByClassName("pager autopagerize_insert_before")[0]; var EntryPage = document.getElementsByClassName("permalink pager")[0]; if(ListPage){ for (var i=0; i<anchors.length; i++) { var anchor = anchors[i]; if (anchor.getAttribute("href") && ((anchor.getAttribute("rel") == "next"))) {anchor.innerText = "古い記事に飛ぶぜハニー";} if (anchor.getAttribute("href") && ((anchor.getAttribute("rel") == "prev"))) {anchor.innerText = "新しい記事に飛ぶよベイベ";} } } if(EntryPage){ for (var i=0; i<anchors.length; i++) { var anchor = anchors[i]; if (anchor.getAttribute("href") && ((anchor.getAttribute("rel") == "next"))) {anchor.innerText = "新しい記事はこちら";} if (anchor.getAttribute("href") && ((anchor.getAttribute("rel") == "prev"))) {anchor.innerText = "古い記事も見てね~";} } } } KennyMeguro();
ソースを見て貰えれば分かる人には分かると思うのですが、簡単に解説すると
- JavaScriptのdocument.getElementsByTagNameで全aタグを取得する
- aタグ内にhrefが含まれ(リンクである)、rel="next"と書いてあるアンカーテキストを入れ替える
- リストページ内のページャーを形成しているdiv="pager autopagerize_insert_before"内の全aタグを取得する
- rel="next" 及び "prev"のアンカーテキストを入れ替える
- 記事ページ内のページャーを形成しているdiv="permalink pager"内の全aタグを取得する
- rel="next" 及び "prev"のアンカーテキストを入れ替える
というやや強引なやり方です。
ポイントはページャーのリンクには必ずrel="next"という属性が存在する所でしょうか。一覧ページと記事ページで同様のrel(next/prev)が含まれており、前者と後者では意味合いが異なる(=これが混乱の元凶)ので、それぞれのdivで変換が必要という点です。
※ケニーさん、すっかり見落としてました。コメントありがとうございます!
尚、注意点ですが、はてなブログは構造上head内にJavaScriptが書き込めないのとbodyにonLoadイベントが設定できないので、ページ内に存在する全aタグを抽出するにはページ後方にスクリプトを仕込む必要があります。
なので、このブログではスクリプトをフッダ内に書き込んでいます。
もっと良いやり方があるよ~っていう人は教えて下さい。
以上、id:ichiro_sが昼休みよりお送り致しました。