Bloggerデザイン : インタラクティブ・グリッド

1. デザインのタイプ

【Interactive Grid Pagination / インタラクティブ・グリッド・パゴナ】
静的なリストを排除し、マウスの動きに連動してエリアが伸縮する、直感的なナビゲーション・デザインです。

GridとFlexを緻密に組み合わせることで、限られたスペースの中で「次に進むワクワク感」を演出。動きそのものがコンテンツになる、次世代のブログレイアウトです。

Santorini, Greece by Khamkéo

Kvalvika Beach, Moskenes, Norwayby Martine Jacobsen

San Lorenzo, Italy by Camille MinoufletE: Vertical Slide

McWay Falls, California, USAby Chor Tsang

Inisheer, County Galway, Ireland by Ulrike R. Donohue

Beaches, Jacksonville Beach, Florida, United States by Lance Asper

2. デザインの特徴

• ダイナミック・スプリット・スライド
  ABエリアでは横スライド、DFエリアでは縦スライドと、エリアごとに異なる伸縮ロジックを搭載。
• E: ゼロ・リセット・モーション
  ホバーした瞬間に上段をスマートに消し去り、縦全画面へと昇格。戻る際のカクつきを抑えるための「位置固定（align-content）」を施した、まつさんこだわりのチューニング済み。
• C: センター・ジャック機能
  中央のCに触れると、左右のエリアを最小化して主役を奪う、圧倒的なフォーカス力を持ちます。
• モバイル・ファースト
  PCでは美しい多機能Gridを維持しつつ、スマホでは読みやすさを優先したシングルカラムに自動変換されます。

3. 紹介コード（コピペ用）

以下のコードをHTMLビューに貼り付けるだけで導入可能です。

<style>
/* --- vol.4: Pagination 4 selections 決定版（文字重なり補正済） --- */
:root { --v4-height: 500px; --v4-half: 250px; --v4-ease: cubic-bezier(0.25, 1, 0.5, 1); }
.v4f-wrap { max-width: 1000px; margin: 20px auto; line-height: 0; }
.v4f-grid { display: grid; grid-template-columns: 50% 25% 25%; height: var(--v4-height); overflow: hidden; background: #333; transition: grid-template-columns 0.8s var(--v4-ease); }
.v4f-grid:has(.v4f-sub:hover) { grid-template-columns: 50% 25% 25% !important; }
.v4f-card { position: relative; cursor: pointer; overflow: hidden; filter: grayscale(1); transition: all 0.8s; height: 100%; min-width: 0; }
.v4f-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v4f-sub-1 { display: flex; flex-wrap: wrap; height: 100%; align-content: flex-start; }
.v4f-sub-1 .v4f-card:nth-child(1), .v4f-sub-1 .v4f-card:nth-child(2) { width: 50%; height: var(--v4-half); transition: width 0.8s var(--v4-ease), height 0.8s var(--v4-ease); }
.v4f-sub-1 .v4f-card:nth-child(3) { width: 100%; height: var(--v4-half); transition: height 0.8s var(--v4-ease); }
.v4f-sub-1:has(.v4f-card:nth-child(1):hover) .v4f-card:nth-child(1) { width: 100%; }
.v4f-sub-1:has(.v4f-card:nth-child(1):hover) .v4f-card:nth-child(2) { width: 0%; }
.v4f-sub-1:has(.v4f-card:nth-child(2):hover) .v4f-card:nth-child(1) { width: 0%; }
.v4f-sub-1:has(.v4f-card:nth-child(2):hover) .v4f-card:nth-child(2) { width: 100%; }
.v4f-sub-1:has(.v4f-card:nth-child(3):hover) .v4f-card:nth-child(1), .v4f-sub-1:has(.v4f-card:nth-child(3):hover) .v4f-card:nth-child(2) { height: 0px !important; }
.v4f-sub-1:has(.v4f-card:nth-child(3):hover) .v4f-card:nth-child(3) { height: 100% !important; }
.v4f-grid:has(> .v4f-card:hover) { grid-template-columns: 0.1% 99.8% 0.1% !important; }
.v4f-sub-2 { display: flex; flex-direction: column; height: 100%; }
.v4f-sub-2 .v4f-card { height: 50%; transition: height 0.8s var(--v4-ease); }
.v4f-sub-2:has(.v4f-card:nth-child(1):hover) .v4f-card:nth-child(1) { height: 100%; }
.v4f-sub-2:has(.v4f-card:nth-child(1):hover) .v4f-card:nth-child(2) { height: 0%; }
.v4f-sub-2:has(.v4f-card:nth-child(2):hover) .v4f-card:nth-child(1) { height: 0%; }
.v4f-sub-2:has(.v4f-card:nth-child(2):hover) .v4f-card:nth-child(2) { height: 100%; }
.v4f-card:hover { filter: grayscale(0); }
.v4f-figcaption { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.6); color: white; opacity: 0; transition: opacity 0.4s; padding: 10px; text-align: center; font-size: 1.1rem; pointer-events: none; overflow: hidden; word-break: break-word; line-height: 1.4; }
.v4f-card:hover .v4f-figcaption { opacity: 1; transition-delay: 0.4s; }
@media (max-width: 800px) { .v4f-grid { display: block; height: auto; } .v4f-card { height: 200px; filter: grayscale(0); } }
</style>

<div class="v4f-wrap">
  <div class="v4f-grid">
    <div class="v4f-sub v4f-sub-1">
      <div class="v4f-card"><img src="画像URL"><div class="v4f-figcaption">A</div></div>
      <div class="v4f-card"><img src="画像URL"><div class="v4f-figcaption">B</div></div>
      <div class="v4f-card"><img src="画像URL"><div class="v4f-figcaption">E</div></div>
    </div>
    <div class="v4f-card"><img src="画像URL"><div class="v4f-figcaption">C</div></div>
    <div class="v4f-sub v4f-sub-2">
      <div class="v4f-card"><img src="画像URL"><div class="v4f-figcaption">D</div></div>
      <div class="v4f-card"><img src="画像URL"><div class="v4f-figcaption">F</div></div>
    </div>
  </div>
</div>