← 静的パーツギャラリーへ戻る

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

新着記事サムネイル付きメガメニュー

カテゴリリンクの横に新着記事のサムネイルと日付を並べたメガメニュー見本です。WordPressのブログ・メディアサイトでナビからの回遊を促したい場合の参考になります。

staticcss

プレビュー

ソースコード

HTML

<div class="d03-12-11-stage">
          <div class="d03-12-11-bar">
            <span class="d03-12-11-logo">BLOG</span>
            <nav class="d03-12-11-nav">
              <a href="#" onclick="return false">トップ</a>
              <a href="#" onclick="return false" class="active">記事一覧</a>
              <a href="#" onclick="return false">カテゴリ</a>
            </nav>
          </div>
          <div class="d03-12-11-panel">
            <div class="d03-12-11-links">
              <h4>カテゴリ</h4>
              <a href="#" onclick="return false">デザイン</a>
              <a href="#" onclick="return false">マーケティング</a>
              <a href="#" onclick="return false">開発</a>
              <a href="#" onclick="return false">運用ノウハウ</a>
            </div>
            <div class="d03-12-11-posts">
              <h4>新着記事</h4>
              <div class="d03-12-11-post">
                <span class="d03-12-11-thumb d03-12-11-thumb-a"></span>
                <div class="d03-12-11-post-body"><strong>WordPress高速化の基本</strong><span class="d03-12-11-date">2026.07.08</span></div>
              </div>
              <div class="d03-12-11-post">
                <span class="d03-12-11-thumb d03-12-11-thumb-b"></span>
                <div class="d03-12-11-post-body"><strong>配色設計のコツ5選</strong><span class="d03-12-11-date">2026.07.02</span></div>
              </div>
            </div>
          </div>
        </div>

CSS

.prev.d03-12-11{padding:0;display:block}
        .d03-12-11-stage{width:100%;height:100%;min-height:260px;background:#fff;display:flex;flex-direction:column}
        .d03-12-11-bar{
          display:flex;align-items:center;justify-content:space-between;
          height:42px;padding:0 16px;background:#fff;border-bottom:1px solid #e5e7eb;flex:none;
        }
        .d03-12-11-logo{font-weight:800;font-size:13px;color:#111827;letter-spacing:.06em}
        .d03-12-11-nav{display:flex;gap:16px}
        .d03-12-11-nav a{color:#475569;text-decoration:none;font-size:11px;font-weight:600}
        .d03-12-11-nav a.active{color:#0f766e}
        .d03-12-11-panel{flex:1;display:flex;gap:16px;padding:16px;background:#f0fdfa}
        .d03-12-11-links{flex:1;min-width:0}
        .d03-12-11-links h4,.d03-12-11-posts h4{
          margin:0 0 8px;font-size:10px;letter-spacing:.06em;color:#0f766e;
          text-transform:uppercase;border-bottom:1px solid #99f6e4;padding-bottom:6px;
        }
        .d03-12-11-links a{display:block;color:#134e4a;text-decoration:none;font-size:11px;padding:4px 0}
        .d03-12-11-posts{width:180px;flex:none;display:flex;flex-direction:column;gap:10px}
        .d03-12-11-post{display:flex;gap:8px;align-items:center}
        .d03-12-11-thumb{width:40px;height:40px;border-radius:6px;flex:none}
        .d03-12-11-thumb-a{background:linear-gradient(135deg,#5eead4,#0d9488)}
        .d03-12-11-thumb-b{background:linear-gradient(135deg,#99f6e4,#2dd4bf)}
        .d03-12-11-post-body{display:flex;flex-direction:column;gap:2px;min-width:0}
        .d03-12-11-post-body strong{font-size:10.5px;color:#134e4a;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .d03-12-11-date{font-size:9px;color:#0f766e}

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