はてなブログのページャーの表記がおかしいなら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が昼休みよりお送り致しました。