パーツ番号 09-03-04 ・ CSSのみ

汎用エラー画面

「!」マークが小刻みに揺れ、「エラーが発生しました」の文言と再試行ボタンを表示。WordPressの各種エラー表示や処理失敗時の汎用フォールバック画面に使えます。ボタンはホバーで反応します。

hovercss

プレビュー

ソースコード

HTML

<div class="d09-03-04-wrap">
          <div class="d09-03-04-mark">
            <svg viewBox="0 0 60 60" width="56" height="56" aria-hidden="true">
              <circle cx="30" cy="30" r="27" fill="#fff2f2" stroke="#f0a3a3" stroke-width="2"/>
              <rect x="27" y="16" width="6" height="20" rx="3" fill="#e05656"/>
              <circle cx="30" cy="43" r="3.4" fill="#e05656"/>
            </svg>
          </div>
          <p class="d09-03-04-msg">エラーが発生しました</p>
          <button type="button" class="d09-03-04-btn">再試行</button>
        </div>

CSS

.d09-03-04{background:#fdfafa}
        .d09-03-04-wrap{text-align:center}
        .d09-03-04-mark{display:inline-block;animation:d324shake 1.6s ease-in-out infinite}
        @keyframes d324shake{0%,88%,100%{transform:translateX(0) rotate(0)}90%{transform:translateX(-4px) rotate(-4deg)}94%{transform:translateX(4px) rotate(4deg)}98%{transform:translateX(-2px) rotate(-2deg)}}
        .d09-03-04-msg{margin:12px 0 16px;font-weight:700;color:#8f4141;font-size:16px}
        .d09-03-04-btn{padding:9px 24px;border:none;border-radius:999px;background:#e05656;color:#fff;font-size:13px;cursor:pointer;transition:background .2s,transform .2s}
        .d09-03-04-btn:hover{background:#c23b3b;transform:translateY(-2px)}

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