Nekonote

Nekonote(ねこのて)もかりたい

【JavaScript】jQurey を使わずに 404 Not found のページを変更する方法

このエントリーをはてなブックマークに追加

404 Not found とは

ざっくりな説明だと、ページが見つからないときのエラーのことです。

詳しくはこちらです。

HTTP 404 - Wikipedia


はてなブログでは、エラーが起きた時の専用ページが用意されています。

記事が見つからないときにメッセージが表示されます。


ブログの記事が増えてくると、記事を整理することがあります。

例えば、

  • 記事を統合して、新しい記事にする
  • 記事を変更して、カスタム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

f:id:herrscherinnen:20190430125558p:plain



平成もまもなく終わりですね、残された平成を楽しみます!

令和の前に、ブログをメンテナンスできてよかった ( ˙꒳​˙ )

今日も ありがとうございました ٩(ˊᗜˋ*)و

おすすめ 記事