はてなブログの404 NOT FOUNDページをカスタマイズする方法

「404 NOT FOUNDページ」はブログを長く運営していると記事の削除や、URLの変更、間違えたURLを入力されたりして記事が見つからない時に表示されるページです。

はてなブログにも「404 NOT FOUNDページ」は用意されているですが、少しシンプルなので、この標準のページを少しカスタイマイズしてみます。

カスタマイズの方針は画像を表示して「申し訳ない感」を出しつつ、自分のサイトの人気記事の一覧を表示させて離脱を防ぐようにします。

404 NOT FOUNDページカスタマイズ

404 NOT FOUNDページカスタマイズ

記事の削除やURLの変更なのどで指定されたページが見つからない時に表示されるのが、「404 NOT FOUNDページ」です。

まず今回カスタマイズが完成した結果は以下のようになります。

画像の準備

今回はフリーの画像から「申し訳ない感」ものをダウンロードし、自分の画像ライブラリーに追加しています。

実際のソース

以下が実際に追加したソースです。

<script type="text/javascript">
  $(document).ready(function() {
    if ($('#main-inner').children().hasClass("no-entry")) {
      var content = "<img src='http://cdn-ak.f.st-hatena.com/images/fotolife/l/lightgauge/20150819/20150819201043.jpg' width='100%'>";
      content += "<br/>大変申し訳ございません。<br/>記事の削除、URLの変更などにより、せっかく訪問いただいたページが表示できませんでした。<br/>" ;
      content += "<br/>代わりといっては何ですが、こちらの記事が多くの方に読まれている記事です。<br/>よろしければご覧くださいませ。<br/>" ;
      content +="</p>
<hr>
<p>";
      content +="</p>
<div class='hatena-module hatena-module-entries-access-ranking'"; content +=" data-count='10'"; content +=" data-display_entry_category='0'"; content +=" data-display_entry_image='1'"; content +=" data-display_entry_image_size_width='100'"; content +=" data-display_entry_image_size_height='100'"; content +=" data-display_entry_body_length='0'"; content +=" data-display_entry_date='0'"; content +=" data-display_bookmark_count='1'"; content +=" data-source='total_bookmark'"; content +="><p>";
      content +="  </p>
<div class='hatena-module-body'>";
      content +="  </div>
<p>"
      content +="</div>
<p>";  
      $('.entry-footer').addClass('sorry_content');
      $('.entry-footer').html(content);
    }
  });
</script>

このソースを「デザイン」の「カスタマイズ」の「ヘッダー」に追加します。
（JQueryが必要なのでまだ追加していない方は追加してください。）
※注意：画像はご自分で用意して該当のURLに変更してください。

スマートフォンでの表示も「レスポンシブ対応」しているテーマを利用していれば、表示されるはずです。

まとめ

今回は「はてなブックマークの多い記事」を表示しましたが、工夫次第で色々な情報が表示できると思います。

「404 NOT FOUNDページ」は表示される機会は少ないので、あまり見えませんが、それほど難しくはないのでカスタマイズしてみてはどうでしょうか？

※利用するテーマによっては正しく表示できないものもあるようです。
※この記事はわたしが運営しているサイト「はてなブログの404 NOT FOUNDページをカスタマイズする方法」からの転載です。

以上「はてなブログの404 NOT FOUNDページをカスタマイズする方法」でした、

404 NOT FOUNDページカスタマイズ

画像の準備

おすすめ記事をはてブの多いものに変更

実際のソース

まとめ