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

メンテナンス中ページ

歯車アイコンと案内文を中央に配置した静止のメンテナンス告知画面。作業中のWordPressサイトの一時表示に利用できる。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-09-02-wrap">
          <svg class="d11-09-02-gear" width="60" height="60" viewBox="0 0 24 24" fill="none">
            <path d="M12 8.5A3.5 3.5 0 1 0 12 15.5A3.5 3.5 0 1 0 12 8.5Z" stroke="#9ca3af" stroke-width="1.4"/>
            <path d="M12 2.5v2M12 19.5v2M21.5 12h-2M4.5 12h-2M18.4 5.6l-1.4 1.4M7 17l-1.4 1.4M18.4 18.4L17 17M7 7L5.6 5.6" stroke="#9ca3af" stroke-width="1.4" stroke-linecap="round"/>
          </svg>
          <div class="d11-09-02-title">メンテナンス中</div>
          <p class="d11-09-02-text">ただいまサイトを調整しております</p>
        </div>

CSS

.d11-09-02-wrap{ text-align:center; }
        .d11-09-02-gear{ display:block; margin:0 auto 14px; }
        .d11-09-02-title{ font-size:18px; font-weight:700; color:#374151; }
        .d11-09-02-text{ margin-top:8px; font-size:12px; color:#9ca3af; }

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