パーツ番号 01-06-01 ・ CSSのみ

オフセット画像+テキスト構成

画像がわずかに右へずれて本文と重なる非対称なレイアウトです。WordPressの固定ページで単調になりがちな画像+文章のセクションに変化を付けられます。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-06-01-wrap">
          <div class="d01-06-01-imgbox">
            <div class="d01-06-01-img"></div>
          </div>
          <div class="d01-06-01-text">
            <h4>オフセット配置</h4>
            <p>画像とテキストを少しずらして重ねる構成です。</p>
          </div>
        </div>

CSS

.prev.d01-06-01{padding:20px 24px}
        .d01-06-01-wrap{position:relative;width:100%;max-width:220px;margin:0 auto}
        .d01-06-01-imgbox{position:relative;z-index:1}
        .d01-06-01-img{width:100%;height:110px;border-radius:6px;background:linear-gradient(135deg,#f4a261,#e76f51);box-shadow:0 8px 20px rgba(0,0,0,.12)}
        .d01-06-01-text{position:relative;z-index:2;margin:-30px 0 0 28px;background:#fff;padding:14px 16px;border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,.08)}
        .d01-06-01-text h4{margin:0 0 6px;font-size:13px;color:#2b2b2b;font-weight:700}
        .d01-06-01-text p{margin:0;font-size:11.5px;line-height:1.8;color:#666}

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