はてなブログで404ページをカスタマイズして人気記事を表示させる

当はてなブログで404ページのカスタマイズをしました。そこまで難しくはないのですが、一応メモがてらまとめておきます。

404ページとの出会い

最初に「404ページの存在」を知ったのは、たまたまGoogle アナリティクスでタイトル別のページビュー数を見ていたときに「Entry is not found」と書かれたものを発見したときです。この時は、なんでこんなページが読まれているのかわからなかったですし、あまり深くは考えていませんでした。

その後、「site:＋URL」（僕の場合は「site:https://www.asanohatake.com」）とサイト内Google検索をしたときに、消したはずの記事が表示されていたのです。その記事を開くと「Entry is not found」と出てきてやはり内容は表示されませんでした。

一度インデックスされれば、その記事を消してもGoogle検索ではヒットしてしまいます。つまり消した記事が増えていくにつれて404ページも増えていくということです。

そこでふと思ったのですが、404ページにはコンテンツがほぼ無いんですよね。このページにGoogle AdSenseの広告を貼ったらポリシーに違反することになるんじゃないかとハッとしたのです。

Google AdSenseの審査に合格するためにはできることを全てしないといけない、と思ってカスタマイズすることにしました。

ちなみに、カスタマイズする前の404ページはこのようでした。

f:id:gadada:20180807144806p:plain — 404ページ（左がPC表示，右がスマホ表示）

f:id:gadada:20180807144812p:plain — 404ページ（左がPC表示，右がスマホ表示）

適当に、「https://www.asanohatake.com/aaa」などと存在しないURLで検索しても自分の404ページを表示させることができます。はてなブログの場合は、「Entry is not found」などの文字が表示されると思います。（使用しているテーマによって異なるかもしれません。）

404ページをカスタマイズする手順・方法

１．準備：jQueryの導入

jQueryをダウンロードしてパスを通すのは面倒なのでGoogleのCDNを使うことにします。（←正直CDNについてはよくわかってません…。）

「ダッシュボード→設定→詳細設定→headに要素を追加」に次のコードを追加すればOKです。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

バージョンが３，２，１とあるのですが、僕の場合は２で上手くいきました。バージョン３または１が良い場合は、以下のサイトからコードを持ってきてください。

developers.google.com

２．コードの追加

「ダッシュボード→デザイン→カスタマイズ→ヘッダ→タイトル下」に、以下のコードを追加します。

このコードを張り付けることによって、お詫びのメッセージとともに、アクセス数の上位10記事が表示されます。

<script type="text/javascript">
  $(document).ready(function() {
    if ($('#main-inner').children().hasClass("no-entry")) {
      var content ="<p>ここに表示させたい文章を書く。</p>";
      content +="<h3>よく読まれている記事</h3>";
      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='150'";
      content +="     data-display_entry_image_size_height='90'";
      content +="     data-display_entry_body_length='0'";
      content +="     data-display_entry_date='1'";
      content +="     data-display_bookmark_count='1'";
      content +="     data-source='access'";
      content +=">";
      content +="  <div class='hatena-module-body'>";
      content +="  </div>"
      content +="</div>";  
      $('.entry-footer').addClass('sorry_content');
      $('.entry-footer').html(content);
    }
  });
</script>

こうして完成したカスタマイズ後の404ページがこちらです！

https://www.asanohatake.com/404page