はてなブログの "404 Not Found エラー" ページのカスタマイズ
はてなブログで、404エラー表示のページをもう少しエラー表示ページを見やすくカスタマイズする java-script を作られた方いましたので、導入してみました。
導入し、テストした結果が上の画像です！
多少なりとも、見栄えが良くなったと思います。
ちなみに404エラーは、指定した (記事などの) URLが存在しないときに表示されるページです。
httpサーバーもしくはブログシステムなどが自動で表示するページで、私達運用者側で設定することはできません。
記事の削除や移動、内部リンクの変更などで、割と多いエラーです。
通常の場合の意味合いとしてはエラーというより、インフォメーションよりのものです。ただし、内部リンクの404エラーは問題なので、修正する必要があります。
導入したスクリプトの動作の概要としては、
・スクリプト自身が作成した #main-inner内のno-entryの存在チェック
・entry-content 要は通常記事本文の存在チェック
・タイトルヘッダーの存在チェックかな？
このようなことをした後で、オリジナルのエラー本文をスクリプトが生成します。
オススメ記事は、素直に「はてな」のアクセスランキングの記事を使っていますね。
大体こんなことをしているのだと思います。
こういったスクリプトは、いざ本格的に作ろうとすると割と調べることが多く、想定より時間を食われることが多いので、作者の方には感謝ですね！
このスクリプトの製作者の方が、H.S.Hige (id:herrscherinnen)さんです。
肝心のスクリプトを公開している記事が、H.S.Hige さんが運営しているブログ Nekonote の下の記事です。
私はスクリプトをコピペした後、若干の表示文章の変更と、エラー本文の下部のオススメ記事の件数を減らしました。
件数の変更は、
hatena_module.setAttribute('data-count', '10');
という行の数字 "10" （この数字が表示件数）を表示したい件数に変更するだけです。
スクリプトの行数は多めですが、読みやすいので修正も楽ですよ。
確認作業は実際に反映させた後に行います。
自分のブログのURLのあとに、"/"+適当な文字列 (ex."123" や "abc") を付けて存在しない記事のURLをブラウザで表示させれば良いです。
ex. (リンク先は別タブで表示します)
https://retiresaki.hatenablog.com/123
わずか5分程度の作業時間で終わりますので、404エラーページをカスタマイズしたい方は、検討されると良いでしょう！
H.S.Hige (id:herrscherinnen)さんに感謝ですorz
