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

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

今まではこんな感じでJavaScriptを使っていましたが、簡単なものならCSSだけでなんとかなるのではと、また新しく作りなおしました（バージョン3です）。
完成したものはこちら → 404 Not Found ページ

（デザイン→カスタマイズ→「デザインCSS」にコードを入力）

CSS
.no-entry h1 {
    font-size: 0;
    margin: -2px 0 0 !important;
}
.no-entry h1:before {
    font-size: 19px;
    content: "お探しのページは見つかりませんでした";
}
.no-entry p {
    font-size: 0;
    margin: 10px 0 !important;
}
.no-entry p:before {
    font-size: 16px;
    content: "ごめんなさい...。";
}
.no-entry p:after {
    content: "";
    display: block;
    background: url(https://cdn-ak.f.st-hatena.com/images/fotolife/s/simadzu/20240612/20240612103052.png) no-repeat;
    height: 500px;
    width: 500px;
}

/* モバイル表示用 */
@media (width <= 480px) {
    .no-entry p {
        font-size: 0 !important;
    }
    .no-entry p:after {
        background-size: contain;
        height: 360px;
        width: 360px;
    }
}

簡単に説明すると、“no-entry”というクラス名があるページ（「404 Not Found」ページ）のh1タグとpタグのフォントサイズをゼロにしてテキストを非表示に、それぞれの疑似要素「before」でテキストを表示、pタグの疑似要素「after」で画像を表示します。

画像をマウスオーバー（hover）で「ぐぐる」と表示させたり、クリックでGoogleに飛ばしたりできないのは残念ですが、JavaScriptのムダな処理がなくなって個人的に満足です！