ブログ運営

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

はてなブログの利用方法やカスタマイズ記事

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

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

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

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

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

画像の準備

「申し訳ない感」ものを見つけてダウンロードし、自分の画像ライブラリーに追加してください。
そのURLをimgタグのsrc属性に設定します。

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

離脱を防ぐ記事の一覧は「はてなブログ」のもともとの機能を使って「はてなブックマークの多い記事10個」を表示するようにしました。

404 NOT FOUNDページをカスタマイズするソース

以下が実際に追加したソースです。
表示したページにno-entryというクラスが設定されていれば、そのページは404 NOT FOUNDページと判断してentry-footerクラス(フッター部分)に今回の編集内容を追加するコードになっています。
data-count属性は表示するする記事の数を設定しますが、11以上の数字を設定すると表示されなくなるので要注意です。

<script type="text/javascript">
  $(document).ready(function() {
    if ($('#main-inner').children().hasClass("no-entry")) {
      var content = "<img src='https://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 +="<br /><br /><hr>";
      content +="<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 +=">";
      content +="  <div class='hatena-module-body'>";
      content +="  </div>"
      content +="</div>";  
      $('.entry-footer').addClass('sorry_content');
      $('.entry-footer').html(content);
    }
  });
</script>

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

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

まとめ

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

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

この記事は以前にわたしがはてなブログで書いた


を共に改変しました。

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