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

末尾「もっと読み込む」ボタンの見た目

リストの一番下に配置したもっと読み込むボタンの静止表示です。WordPressの投稿一覧をページネーションなしでボタン式に読み込ませたい場合のデザイン見本になります。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-11-03-frame">
          <div class="d11-11-03-list">
            <div class="d11-11-03-row"><span class="d11-11-03-av"></span><div class="d11-11-03-lines"><span></span><span class="short"></span></div></div>
            <div class="d11-11-03-row"><span class="d11-11-03-av"></span><div class="d11-11-03-lines"><span></span><span class="short"></span></div></div>
            <div class="d11-11-03-row"><span class="d11-11-03-av"></span><div class="d11-11-03-lines"><span></span><span class="short"></span></div></div>
          </div>
          <div class="d11-11-03-more"><span class="d11-11-03-btn">もっと読み込む</span></div>
        </div>

CSS

.d11-11-03-frame{ width:270px; background:#fff; border:1px solid #e5e7eb; border-radius:14px; overflow:hidden; padding-bottom:2px; }
        .d11-11-03-list{ padding:14px 14px 4px; display:flex; flex-direction:column; gap:12px; }
        .d11-11-03-row{ display:flex; align-items:center; gap:10px; }
        .d11-11-03-av{ width:28px; height:28px; border-radius:50%; background:#dbe4f5; flex:0 0 auto; }
        .d11-11-03-lines{ flex:1; display:flex; flex-direction:column; gap:5px; }
        .d11-11-03-lines span{ height:8px; border-radius:4px; background:#e6e9ee; display:block; }
        .d11-11-03-lines span.short{ width:55%; }
        .d11-11-03-more{ display:flex; justify-content:center; padding:14px 14px 16px; }
        .d11-11-03-btn{ font-size:11.5px; font-weight:700; color:#4338ca; background:#eef2ff; border:1px solid #c7d2fe; border-radius:99px; padding:8px 22px; }

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