パーツ番号 11-09-01 ・ CSSのみ

404ページ(大きな数字+ボタン)

大きな「404」の数字とトップページへのボタンを配置した静止デザインで、WordPressのデフォルト404.phpテンプレートの差し替えに使える。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-09-01-wrap">
          <div class="d11-09-01-num">404</div>
          <p class="d11-09-01-text">お探しのページは見つかりませんでした</p>
          <span class="d11-09-01-btn">トップへ戻る</span>
        </div>

CSS

.d11-09-01-wrap{ text-align:center; }
        .d11-09-01-num{
          font-size:72px; font-weight:800; line-height:1;
          color:#1f2937; letter-spacing:2px;
        }
        .d11-09-01-text{
          margin:12px 0 20px; font-size:13px; color:#6b7280;
        }
        .d11-09-01-btn{
          display:inline-block; padding:10px 26px; border-radius:999px;
          background:#1f2937; color:#fff; font-size:12px; font-weight:600;
        }

クラス名 .d11-09-01 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。