【はてなブログ】404ページをカスタマイズする方法

<script type="text/javascript">
  $(document).ready(function() {
    if ($('#main-inner').children().hasClass("no-entry")) {
      content = ''+
'<div><form class="search-form" role="search" action="/search" method="get">記事検索：<input type="text" name="q" class="search-module-input" value="" placeholder="検索" required=""><input type="submit" value="検索" class="search-module-button"></form></div><hr/>' +
'<div style="padding: 5px; border: 1px solid #333333; border-radius: 10px;">' +
'<ul>人気記事' +
'<li><a href="記事URL">カテゴリーラベルに色をつける方法</a></li>' +
'<li><a href="記事URL">「続きを読む」をカスタマイズする方法</a></li>' +
'<li><a href="記事URL">はてなブログに、お問い合わせフォームを設置する</a></li>' +
'</ul>' +
'</div>';
      $('.entry-footer').html(content);
    }
  });
</script>

※jQueryを使ってますので、組み込んでない人は組み込んでください。

「デザイン」-＞「カスタマイズ」-＞「フッタ」のところに、上記のスクリプトを貼り付けるだけで、404ページに、「ブログ内検索」と「人気記事」が追加されます。「人気記事」の方は自前で書く必要があって、上記の「記事URL」と記事タイトルの部分を各自で変更してください。

やりかた　その2

<script type="text/javascript">
(function ($) {
  $.ajax({
    statusCode: {
      404: function () {
        var doc = $('div.entry-content h1');
        var htm = ''+
'<div><form class="search-form" role="search" action="/search" method="get">記事検索：<input type="text" name="q" class="search-module-input" value="" placeholder="検索" required=""><input type="submit" value="検索" class="search-module-button"></form></div><hr/>' +
'<div style="padding: 5px; border: 1px solid #333333; border-radius: 10px;">' +
'<ul>人気記事' +
'<li><a href="記事URL">カテゴリーラベルに色をつける方法</a></li>' +
'<li><a href="記事URL">「続きを読む」をカスタマイズする方法</a></li>' +
'<li><a href="記事URL">はてなブログに、お問い合わせフォームを設置する</a></li>' +
'</ul>'
'</div>';
        var message = $('<div>').html(htm);
        $(doc).next().append(message);
      }
    }
  });
})(jQuery);
</script>

参考：はてなブログで404 のページに何かする - maRkの

jQueryってお手軽に、ステータスコード404をみて、挿入するとかいう書き方もできるんですね。