にちプチ 【Nichi-Petit】

日常のプチ情報やプチンときたことを書きなぐるブログ

はてなブログで記事が見つからない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>

 

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

 

ほんでできた404ページがコレです↓

Entry is not found-お探しの記事は見つかりませんでした。

 

 個人的には結構気に入ってます!(めっちゃ気に入ってる)

 

404 Not Foundページをカスタムする意義

 僕自身こんなカスタムに手を出していながら、その恩恵は現時点でほとんどないと思います。

だってさ、検索して見たい記事がなかったらまずそっ閉じするよね!?

あたりまえ体操~♪

 

なんですが、その際にも何百人・何千人かに一人はその404ページの工夫で他のページも見たくなるんです。

 

僕です。

 

なんか普通は殺風景なページのはずなのに、そこにかわいい画像とか、小粋な文句でも書いてあれば「ふふっ」ってなるじゃん?

 

この「ふふっ」大事よ!?

それって自分のページが執筆記事抜きに目を引いてるってことになるからね!?

それってファンの獲得にはもってこいじゃない!?

 

というわけで僕みたいな人間も取りこぼしなくファンに加えたいブロガーさんはやってみてください。

 

 

エンド