Bloggerデザイン : シネマティック・オーバーレイ・ギャラリー

Waterfall

Hills

Ocean

Rain

Snow Mountains

Trees

Beach

1. デザインのタイプ

【シネマティック・オーバーレイ・グリッド】
不規則なグリッドレイアウト（マンスリー・タイル形式）を採用し、背景画像のブレンドモードを駆使した、重厚感のあるフォトギャラリーです。

2. デザインの特徴

• ハードライト・ブレンドモード
  CSSの background-blend-mode: hard-light; を使用。ホバー時に背景色が変化することで、モノクロ写真に色がつくような、暗闇から写真が浮き上がるような視覚効果を演出します。
• 変則グリッド・スパン設定
  grid-column および grid-row を個別に設定することで、複雑に組み合わさったモダンな雑誌風レイアウトを実現。
• Bodoni Moda フォント
  高級感と伝統を感じさせるセリフ体「Bodoni Moda」をGoogle Fontsから読み込み、写真のアーティスティックな雰囲気を引き立てます。
• モバイル・スタック・レイアウト
  画面幅が狭いデバイスではグリッドを解除し、写真を1カラム表示にして視認性と操作性を確保。

3. 紹介コード

 

<div class="grid-gallery-wrapper">
<div class="grid-gallery-content">
<div class="grid-gallery-grid">
<div class="gg-box gg-row-2" style="background-image: url(画像URL);">Waterfall</div>
<div class="gg-box gg-col-2" style="background-image: url(画像URL);">Hills</div>
<div class="gg-box" style="background-image: url(画像URL);">Ocean</div>
<div class="gg-box gg-row-2" style="background-image: url(画像URL);">Rain</div>
<div class="gg-box gg-col-2" style="background-image: url(画像URL);">Snow Mountains</div>
<div class="gg-box" style="background-image: url(画像URL);">Trees</div>
<div class="gg-box gg-col-2" style="background-image: url(画像URL);">Beach</div>
</div>
</div>
</div>

<style>
.grid-gallery-wrapper {
font-family: "Bodoni Moda", serif;
width: 100%;
padding: 20px 0;
background: linear-gradient(to right, #041308, #0b3317);
display: flex;
justify-content: center;
align-items: center;
}

.grid-gallery-content {
width: 95%;
max-width: 1200px;
}

.grid-gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 120px;
gap: 10px;
}

.gg-box {
background-size: cover;
background-position: top;
background-color: #222;
background-blend-mode: hard-light;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
transition: all 1s ease-in-out;
}

.gg-box:hover {
background-color: #999;
background-position: center;
box-shadow: 0 0 4px #fff;
cursor: pointer;
}

.gg-row-2 {
grid-row: span 2;
}

.gg-col-2 {
grid-column: span 2;
}

@media screen and (max-width: 1024px) {
.grid-gallery-grid {
grid-template-columns: 1fr;
grid-auto-rows: 220px;
}
.gg-box {
grid-row: span 1;
grid-column: span 1;
}
}
</style>