はてなブログの404 Not Found 画面をちょっとだけカスタマイズしてみた

ちょっと時間があったので、久しぶりにブログの設定をいじってみました。
今回は、アクセスしたページがなかった場合、404 Not Foundエラー時の画面をいじってみることにしました。

標準の画面

「Not Found お探しの記事は見つかりませんでした。」とだけ書かれる場合が殆どだと思います。
（使用するデザインテンプレートによって違いがあるかもしれません）

まあ、別にその通りではあるんですが、なんか寂しい感じがしますね、これ。

404になるケース

例えば、公開した後でURLを修正した場合や、わけあって、記事を削除した場合。
それらのURLがTwitterで拡散されていたり、どこかにリンクされていたり、はてなブックマークされていたりした場合、その「なくなったURL」にアクセスされます。
すると、上記のような画面が出るわけです。

まあ、それはいいんですが、せっかく訪問してくださった方が、こんな画面見たら、どうでしょう。
すぐ立ち去りますね。
「は？！」って感じで。

せっかく来てもらったんだから何か見ていってよ、といういう意味で、実際に行ったカスタマイズ方法をご紹介します。

スポンサーリンク

カスタマイズ内容

今回紹介するのは、
・お詫び文を入れる
・はてなブックマークの自サイトの人気エントリ上位30位より、3件をランダムに表示
です。

まずは「設定」-「詳細設定」の画面を開きます。
ここの下の方にある「headに要素を追加」に、404 Not Found時のJavaScriptコードを設定します。

まずは、jQueryを使うので、jQueryを使用できるようにします。
既に他のスクリプトを使う目的で取り込んでいる場合は不要です。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

処理1

以下が、はてなブックマークの人気エントリ上位30位から3件抜き出して表示する部分です。
この処理は呼ばれない限りは動かないので、正常表示されるページには影響を与えません。

<script type="text/javascript"> var RSS_URL = "http://b.hatena.ne.jp/entrylist?sort=count&url=http%3A%2F%2Firo.hateblo.jp%2F&mode=rss"; google.load("feeds", "1"); function shuffle(array) { array.sort(function() { return Math.random() - .5; }); } function initialize() { var feed = new google.feeds.Feed(RSS_URL); feed.setNumEntries(30); feed.load(function(result) { if (!result.error) { shuffle(result.feed.entries); var count = 3; if (count > result.feed.entries.length) { count = result.feed.entries.length; } for (i = 0; i < count; i ++) { var entry = result.feed.entries[i]; var html = ""; var img = entry.content.match(/(http:){1}[¥S_-]+( (¥.png)|(¥.jpg)|(¥.JPG)|(¥.gif))/); html += "<a href='" + entry.link + "'>"; if(img){ html += "<img class='feed_thumbnail' src='" + img[0] + "'>"; } html += entry.title.replace(" - 色々虎威 ゆるり", ""); + '</a>'; html += "<a href='http://b.hatena.ne.jp/entry/" + entry.link + "' target='_blank'><img src='http://b.hatena.ne.jp/entry/image/" + entry.link + "' class='feed_hatena_count'></a><br clear='left'/>"; $("#feed").append(html); } } }); } </script>

ここにある

var RSS_URL = "http://b.hatena.ne.jp/entrylist?sort=count&url=http%3A%2F%2Firo.hateblo.jp%2F&mode=rss";

は、表示させたいRSSのURLを指定してください。
上記は、色々虎威のはてなブックマークの人気エントリのRSSですのでご注意ください。

あと

html += entry.title.replace(" - 色々虎威 ゆるり", ""); + '</a>';

については、RSSのエントリー名に、ブログタイトルが含まれているので、これを消す処理です。
ここも、ご自身のサイト名に変更するなどしてください。

処理2

あとは、404 Not Found時に、上記スクリプトを呼び出す処理を、続けて記述します。

<script type="text/javascript"> $(document).ready(function() { if ($('#main-inner').children().hasClass("no-entry")) { content = "大変申し訳ございません。<br/>記事の削除、URLの変更などにより、せっかく訪問いただいたページが表示できませんでした。<br/>代わりといっては何ですが、こちらの記事が多くの方に読まれている記事です。<br/>よろしければご覧くださいませ。<br/><div id='feed'></div><script>google.setOnLoadCallback(initialize);"; $('.entry-footer').addClass('sorry_content'); $('.entry-footer').html(content); } }); </script>

404 Not Foundの場合「main-inner」要素の中に「no-entry」クラスを含む要素があります。
それが見つかった場合「entry-footer」の中に、お詫び文と、上記スクリプトでランダムに抽出した人気記事3件を表示させてあげるだけです。

なお、単純にお詫びの文や画像を出して華やかにするだけであれば、処理2だけで十分です。

CSS

最後に、表示を整形するために、「デザイン」-「カスタマイズ」-「デザインCSS」に以下のスタイル定義を追加します。

.sorry_content{ font-size: small; } #feed { margin-top: 10px; font-size: small; } .feed_thumbnail { margin: 2px 10px 2px 0; float: left; min-width: 100px; max-width: 100px; } .feed_hatena_count { margin-left: 5px; }

これだけで、当ブログの404 Not Foundページは、こんな感じで表示されます。

実際の動きは、「http://iro.hateblo.jp/hogehoge」など、存在しない適当なURLで確認いただけます。

あとがき

今回紹介した方法ですが、使用しているデザインテンプレートによってはうまく作動しないかもしれません。
あと、今後、はてなブログの仕様変更などで、将来的に動かなくなる可能性もあります。
予めご承知おきください。

スポンサーリンク