読者です 読者をやめる 読者になる 読者になる

攻めは飛車角銀桂守りは金銀三枚

ITとアコースティックギター、そして日常のひとこま。

【修正しました】はてなブログの404 NOT FOUNDページをカスタマイズしました

はてな
スポンサーリンク

以前からやってみたかった「はてなブログの404 NOT FOUNDページ」をカスタマイズしました。

今回はいつも読ませていただいている「虎ちゃん (id:itry)」さんのiro.hateblo.jp
と言う記事を参考にさせていただきました。

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

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

画像を追加

まったく同じではおもしろくないので、画像を追加しました。

追加した画像は
f:id:lightgauge:20150819201043j:plain
です。

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

参照元の記事ではランダムにおすすめ記事を表示されていたのですが、何故か動かなかったので、今回ははてなブログのもともとの機能を無理やり使って「はてなブックマークの多い記事10個」を表示するようにしました。

実際のソース

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

<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 +="<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>

これだけです。
このソースを「デザイン」の「カスタマイズ」の「ヘッダー」の「記事下」に追加します。

※注意:画像はご自分で用意して該当のURLに変更してください。

作成した「404 NOT FOUND ページ」

以下が作成した「404 NOT FOUND ページ」です。
存在しないページです。

まとめ

今回もまた偉大な先人のソースを使う事で楽に実現できました。
感謝、感謝です。

画像が丸くなっているのもどこかで誰かかがやったのを使わせてもらっているだけなんですが、元ソースがわかりません。

ソース修正しました(2015.08.22)

何名かの方から「スマホで見たら画像切れているよ」とご指摘いただいたので、ソース修正しました。

修正箇所は画像をしている部分の
「width="500px"」

「width="100%"」
にしました。

これで大丈夫・・・なはず。これでダメなら・・・あきらめましょう。

ご指摘いただいた方々、ありがとうございました。