https://simadzu.hatenablog.com/entry/404-not-found

はてなロゴ

はてなブログでは、記事がない（Not FoundまたはEntry is not found）ときとカテゴリーがない（Category not found）ときに「404 Not Found」ページが表示されます。

リンク切れがなければ表示されないページなので、はてなブログでの表示もあっさりです。
そこで、ちょっとしたオリジナルのメッセージや画像を表示するようにしてみました。

ちなみに今まで使っていたものでも全然問題ないのですが、今回は<h1>タグを削除したかったのと「document.getElementsByClassName」を使いたかったので、新たに作りなおしました。

（デザイン→カスタマイズ→フッタにコードを入力）

JavaScript
<script>
err = document.getElementsByClassName('no-entry')[0];
if(err) {
    txt = '<h1>お探しの記事は見つかりませんでした</h1><p>ごめんなさい...。</p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/simadzu/20240612/20240612103052.png" width="500" height="500" alt="404" />';
    err.insertAdjacentHTML('afterbegin',txt);
    err.getElementsByClassName('entry-content')[0].remove();
}
</script>

「404 Not Found」ページのソース

軽く説明すると、ページに“no-entry”というクラス名があれば<article class="entry no-entry">と<div class="entry-inner">の間にメッセージや画像を挿入します。

そして、<div class="entry-content"> ～ </div>で囲まれた部分（<h1>Not Found</h1><p>お探しの記事は見つかりませんでした。</p>）を削除します。

yunico's fluffy lifeさんの記事が<h1>タグを削除するヒントとなりました。勝手に感謝！

はてなブログのエラーページをオリジナル仕様にカスタマイズ

404エラーページをオリジナルにカスタムすることで、ユーザーのページ離脱率を減らせるかもしれません。今回は『ブログにエラーが出てしまっても読者さんにページ回遊を促すことができるかもしれない』そんなカスタマイズ方法をご紹介します。

－追記－

「404 Not Found」ページをCSSだけでカスタマイズ

はてなブログでは記事がない、カテゴリーがないときに「404 Not Found」ページが表示されますが、オリジナルのメッセージや画像を表示するようにカスタマイズしてみました。