パーツ番号 11-11-10 ・ CSSのみ

エラー時の再読み込みボタン付き見た目

感嘆符アイコン・エラー文言・再読み込みボタンを縦に並べた失敗時の静止見本です。通信エラー時にWordPressサイトの一覧末尾で表示するフォールバック画面の参考にできます。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-11-10-frame">
          <div class="d11-11-10-list">
            <div class="d11-11-10-row"><span class="d11-11-10-av"></span><div class="d11-11-10-lines"><span></span><span class="short"></span></div></div>
          </div>
          <div class="d11-11-10-err">
            <span class="d11-11-10-ic">!</span>
            <p class="d11-11-10-txt">読み込みに失敗しました</p>
            <span class="d11-11-10-btn">再読み込み</span>
          </div>
        </div>

CSS

.d11-11-10-frame{ width:270px; background:#fff; border:1px solid #e5e7eb; border-radius:14px; overflow:hidden; }
        .d11-11-10-list{ padding:14px 14px 4px; display:flex; flex-direction:column; gap:12px; }
        .d11-11-10-row{ display:flex; align-items:center; gap:10px; }
        .d11-11-10-av{ width:28px; height:28px; border-radius:50%; background:#dbe4f5; flex:0 0 auto; }
        .d11-11-10-lines{ flex:1; display:flex; flex-direction:column; gap:5px; }
        .d11-11-10-lines span{ height:8px; border-radius:4px; background:#e6e9ee; display:block; }
        .d11-11-10-lines span.short{ width:55%; }
        .d11-11-10-err{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px 14px 18px; }
        .d11-11-10-ic{ width:22px; height:22px; border-radius:50%; background:#fee2e2; color:#dc2626; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; }
        .d11-11-10-txt{ font-size:11px; color:#6b7280; }
        .d11-11-10-btn{ font-size:11px; font-weight:700; color:#dc2626; background:#fef2f2; border:1px solid #fecaca; border-radius:99px; padding:6px 18px; }

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