【はてなブログカスタマイズ 】オリジナルの404 Not foundページを作る！

管理人

今回はブログカスタマイズ紹介記事です。カスタマイズ場所は404 Not foundページになります。エラーページからもカスタマイズして集客を目指しましょう！

だいふく

ん？そもそも404 Not foundってなんだニャ？

HTTP 404ってなに？

ブログでよくあるのは記事をUPしたあとに、改めて該当記事のURLを更新したことがある方も居るかと思います。そうすると旧URLにアクセスするともちろんURLは変更されているので、ページが見つからないと思います。

そういう時は、エラーメッセージが出てNot found（見つからない）となりますが、まさにこの症状がHTTP 404といいます。

なんで404と言うかは、HTTPを使って通信を行うとき、応答には数値によるステータスコードが含まれています。ステータスコード404とは、最初の「4」がクライアント側エラーを表し、後ろの「04」がエラーの種類を示しているからなのです。

なぜエラーページをカスタマイズするの？

一度ウェブサイトにページをUPしたら、Googleなどの検索エンジンに登録されますよね。登録後に該当ページのURLを更新（カテゴリー更新なども同じ）すると、古いURLのページはウェブサイトの世界からは見つからないって言われてしまします。

もし、誰かが検索エンジンから自分のブログを見つけてくれて、アクセスしたらそれは古いURLでアクセスしてもページが見つからなかったら、折角来ていただいたのに申し訳ないですし、離脱してしまい機会損失にもつながりますよね。

そういったことを無くすために、Not foundになるのはもちろん、しょうがない事なのですが、Not foundページ自体をカスタマイズすることで、少しでも他の記事を見てもらおう！っということなんです。

企業の公式サイトなんかも、なにげにやっており個性的な面白いページが見れますので少し紹介しておきますね。リンクをクリックすると該当のNot foundページに飛びます！

面白い404エラーのサイト

郵便局
日本コカコーラ株式会社
Amazon

カスタマイズ方法

管理人

まず当ブログの404 Not foundページを見てください。

当ブログのNot foundページ

https://www.daifuku.blog/404

見て頂いたら分かりますが、エラーコメントを編集して他の記事を案内するようなメッセージを入れています。そしておすすめ記事一覧を掲載しています。これにより折角きてくださった方を、他の記事に誘導しようという作戦です！

準備

カスタマイズするまえに準備としてやることは、Not foundページに書く文章を考えておきましょう！真面目なコメントでも、思わずクスッと笑ってしまうコメントでも何でもよいと思いますので、ご自身のブログの個性に合わせて考えるのが良いと思います。

考えたコメントは、後述するコードで使います。

JavaScript設定

管理人

それでは、具体的にコードを書いていきましょう！

ヘッダー画像の登録方法は、「デザイン設定」→「カスタマイズ」→「ヘッダ」→「タイトル下」に以下のコードを書き込みます。

<!--404エラー-->

<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 ←を入れると改行になります。';



    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', '150');

    hatena_module.setAttribute('data-display_entry_image_size_height', '150');

    hatena_module.setAttribute('data-display_entry_body_length', '0');

    hatena_module.setAttribute('data-display_entry_date', '1');

    hatena_module.setAttribute('data-display_bookmark_count', '0');

    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>

修正箇所

このままコメントを変えて貼り付けるでもいいですが、修正しても良い箇所を書いておきます。

修正箇所

準備で考えたコメント記載：18～19行目
おすすめ記事を掲載する数：25行目
カテゴリー：26行目（1：表示、0：非表示）
記事画像：27行目（1：表示、0：非表示）
記事画像サイズ：28～29行目
投稿日：31行目（1：表示、0：非表示）
ブックマーク数：32行目（1：表示、0：非表示）

以上で、404 Not foundページが完成しました！

些細なことではありますし、ほぼ見られることもないので自己満足なカスタマイズの紹介でした！

だいふく

すごく勉強になったニャ！エラーページでも集客できるんだニャ！

カスタマイズ関連記事

当ブログのカスタマイズ記事は他にも書いていますので掲載しておきますので参考にしてみてください。

＜ヘッダー（タイトル）に画像設定して個性的なブログに！＞

＜レスポンシブなナビゲーションメニューを設置＞

＜トップページ一覧形式をカード型にしてスタイリッシュに！＞

＜サイドメニューを工夫して回遊率アップを目指す！＞