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

「すべて読み込みました」終端メッセージ

リストの一番下に左右の罫線付きで表示する終端メッセージの静止見本です。WordPressの記事一覧が最後まで読み込まれたことをユーザーに伝えるデザインに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-11-05-frame">
          <div class="d11-11-05-list">
            <div class="d11-11-05-row"><span class="d11-11-05-av"></span><div class="d11-11-05-lines"><span></span><span class="short"></span></div></div>
            <div class="d11-11-05-row"><span class="d11-11-05-av"></span><div class="d11-11-05-lines"><span></span><span class="short"></span></div></div>
          </div>
          <div class="d11-11-05-end"><span class="d11-11-05-line"></span><span class="d11-11-05-etxt">すべて読み込みました</span><span class="d11-11-05-line"></span></div>
        </div>

CSS

.d11-11-05-frame{ width:270px; background:#fff; border:1px solid #e5e7eb; border-radius:14px; overflow:hidden; }
        .d11-11-05-list{ padding:14px 14px 4px; display:flex; flex-direction:column; gap:12px; }
        .d11-11-05-row{ display:flex; align-items:center; gap:10px; }
        .d11-11-05-av{ width:28px; height:28px; border-radius:50%; background:#dbe4f5; flex:0 0 auto; }
        .d11-11-05-lines{ flex:1; display:flex; flex-direction:column; gap:5px; }
        .d11-11-05-lines span{ height:8px; border-radius:4px; background:#e6e9ee; display:block; }
        .d11-11-05-lines span.short{ width:55%; }
        .d11-11-05-end{ display:flex; align-items:center; gap:10px; padding:16px 18px 18px; }
        .d11-11-05-line{ flex:1; height:1px; background:#e5e7eb; display:block; }
        .d11-11-05-etxt{ font-size:10.5px; color:#9aa1ab; white-space:nowrap; }

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