色々虎威 ゆるり

~IRO IRO TRY~

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

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

標準の画面

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

page not found

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

404になるケース

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

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

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

スポンサーリンク
 

カスタマイズ内容

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

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

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

処理1

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

ここにある

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

あと

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

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

処理2

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

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

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

CSS

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

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

page not found

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

あとがき

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

スポンサーリンク