simadzu’blog

hatenaロゴ

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

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

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

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

JavaScript
<script>
err = document.getElementsByClassName('no-entry')[0];
if(err) {
    txt = '<h1>お探しの記事は見つかりませんでした。</h1><p>ごめんなさい...。</p><p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/simadzu/20221019/20221019155726.png" width="493" height="493" alt="404" /></p>';
    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">の間にメッセージや画像を挿入します。
そして、<h1>タグ（Not Found）と<p>タグ（お探しの記事は見つかりませんでした。）を含む<div class="entry-content">（で囲まれた部分）を削除します。

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

参考になるブログ・Webサイト

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

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