【JavaScript】jQurey を使わずに 404 Not found のページを変更する方法
404 Not found とは
ざっくりな説明だと、ページが見つからないときのエラーのことです。
詳しくはこちらです。
はてなブログでは、エラーが起きた時の専用ページが用意されています。
記事が見つからないときにメッセージが表示されます。
ブログの記事が増えてくると、記事を整理することがあります。
例えば、
- 記事を統合して、新しい記事にする
- 記事を変更して、カスタムURLに変更する
- 記事を削除してしまう
こんなとき、Yahoo! や Google の検索結果 や ほかの記事に貼られたリンク は、整理前の記事を指しています ↷( ó╻ò)
はてなブログが準備してくれている、標準のメッセージでは、
どうやって記事を探してよいかはわかりません。
(ブログによって方法が違うので、仕方ないです)
また、2行のメッセージなので、ほとんど真っ白のページになってしまいます。
やること
わかりやすいメッセージにする
- 目的の記事を見つけやすくする
おすすめ記事を載せる
- 場所が余るので、記事をおすすめする
やったこと
ブログ管理画面から、
デザイン > カスタマイズ > ヘッダ > タイトル下 のところに、コードを書きました。
ペタリと貼っても使えます。
<script> document.addEventListener('DOMContentLoaded', function() { if(document.querySelector('#main-inner').getElementsByClassName('no-entry').length === 0){ return; } var ec = document.querySelector('.entry-content'); if(!ec){ return; } var h1s = ec.getElementsByTagName('h1'); var ps = ec.getElementsByTagName('p'); h1 = h1s && h1s[0]; p = ps && ps[0]; if(!(h1 && p)){ return; } h1.innerText = 'Not Found ↷( ó╻ò)\nお探しの記事を見つけられませんでした'; p.innerText = '一時的にアクセスできない状況にあるか、\n移動、または、削除された可能性があります。\n\nおすすめ記事 または トップページからお探しください。\nサイドバーの検索も利用できます。'; var h2 = document.createElement('h2'); h2.appendChild(document.createTextNode("おすすめ記事")); ec.appendChild(h2); var hatena_module = document.createElement('div'); hatena_module.setAttribute('class', 'hatena-module hatena-module-entries-access-ranking'); hatena_module.setAttribute('data-count', '10'); hatena_module.setAttribute('data-display_entry_category', '1'); hatena_module.setAttribute('data-display_entry_image', '1'); hatena_module.setAttribute('data-display_entry_image_size_width', '160'); hatena_module.setAttribute('data-display_entry_image_size_height', '160'); hatena_module.setAttribute('data-display_entry_body_length', '0'); hatena_module.setAttribute('data-display_entry_date', '1'); hatena_module.setAttribute('data-display_bookmark_count', '1'); hatena_module.setAttribute('data-source', 'access'); var hatena_module_body = document.createElement('div'); hatena_module_body.setAttribute('class', 'hatena-module-body'); hatena_module.appendChild(hatena_module_body); ec.appendChild(hatena_module); var footer = document.createElement('p'); footer.appendChild(document.createTextNode("ありがとうございました(。>ㅅ<。)")); ec.appendChild(footer); }); </script>
文字やパラメータを変更すれば、
自分のブログに合わせてカスタマイズもできます ٩(•ᴗ• ٩)
成果物はこちら
存在しないurlなら何でも大丈夫ですが、せっかくなので、404を。
https://h-s-hige.hateblo.jp/404
平成もまもなく終わりですね、残された平成を楽しみます!
令和の前に、ブログをメンテナンスできてよかった ( ˙꒳˙ )
今日も ありがとうございました ٩(ˊᗜˋ*)و