(cache) はてなブログで記事が見つからない404 Not Foundをカスタマイズした

　どうも、最近はブログのデザインをいじるのが趣味のせいじです。

ということで今回は意外とやる人が少ないと思われる「404 Not Found（記事が見つかりません）」ページのカスタマイズをしてみました。

記事消した後でも検索からアクセスあるときとか、どっかのリンク辿って消した記事に来られた時とか見るページですね

参考にしたページはこちら↓　（ありがとうございます）

www.fair-skinned-monster.com

なんかさ、殺風景なサイトが洗練されていくのってやっぱ嬉しいじゃない？

地味だったトップページにもヘッダー画像つけたり、サイドバーのプロフィールページいじってみたりとか。

んでそのページ「かわいい！」とか言われた日にゃ一日中ニコニコじゃん？

というのが今回の動機です。

とりあえずこれはカスタム前の画面↓

ね？　ごっっっつシンプルやろ？

寂しさを表現するために下の空白もキャプチャ範囲に入れたんだけど、この時点でページがバグってると思って読まない人がいないかとビクビクです（なんで表示サイズ小さくしました）

そして！

カスタム後がこちら！↓↓

どや？　かわいいやろ？

ワイのブログのトップページのちょっと太ったネコっぽい生き物にまたご足労願ったで？

んで下にはブクマの多い、サイドバーの「注目記事」を出すような設定にしています。（参考元からそのままもらってます。重ねてありがとうございます）

カスタマイズ手順

表示させたい画像を準備

僕は記事を読んでいただけなかった人にもおちゃめな一面を見せたいので画像は必須です。

僕はこの画像

正直許せないくらいかわいく描いたつもりです。ヘッダー画像より太いボールペンで描いたからちょっと縁も太めですが、まあええわ

スマホで確認するとこのままでは表示がでかすぎて来訪者は下の記事まで目がいかないと思うので横幅100pxほどまで小さくしてます。（苦渋の決断）

まあ画像なしでインフォメーションだけ載せたいならこの項目はほっといてください（ﾊﾅﾎｼﾞｰ

ソースコード

僕は参考ページで表示されているものを若干いじってます。好みで使い分けてください

変更点

画像を文章のあとに表示させる
画像をセンタリング
文章に太字を入れている

まあHTMLとかかじってる人なら何となくわかると思います。

以下をコピーしてメモ帳などに張り付けて赤色の「●」込みで囲んでいる部分を適宜編集してください。

もうアレよ、「HTMLなんて知らんし、ほんまどこいじっていいかわからん……」みたいな人のために色々固定した形で書いてますんで、分かってる人は好きにいじって大丈夫でしょう。

<script type="text/javascript">
  $(document).ready(function() {
    if ($('#main-inner').children().hasClass("no-entry")) {
      var content = "<br/>●1行目の文言●<br/>●2行目の文言●<br/>" ;
      content += "<br/><b>●3行目の文言（太字）●</b><br/><b>●4行目の文言（太字）●</b><br/>" ;
      content += "<center><img src='●表示する画像のURL●' width='100px'></center>";
      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>

編集完了したらブログメニューの「デザイン」から「ヘッダ」の「タイトル下」に張り付けてね！