Blogger TIPS

2026/02/21

Bloggerデザイン : Expandable Card Gallery

By まつゆう #CodePen #CSS カスタマイズデザイン No comments

1. デザインのタイプ

【Expandable Card Gallery】
クリックひとつで選択した写真が大きく広がり、細部までダイナミックに見せることができるエキスパンダブル・カードギャラリーです。

Serra da Freita, Vale de Cambra, Portugal @hed

París, Paris, France @lolaguti

La Joue du Loup, Le Dévoluy, France @quentindrphotography

Jasper National Park, Jasper, Canada @punttim

Sioux Falls, United States @eugenetriguba

2. デザインの特徴

写真が主役のギャラリー
選択した画像がダイナミックに広がり、視覚的なインパクトを与えるレイアウトです。
心地よい操作感
カードの伸縮が滑らかで、ユーザーが直感的に操作を楽しめる設計になっています。
スマホでも見やすい
画面サイズに応じて最適な表示に切り替わるレスポンシブ仕様です。
ブログに馴染むデザイン
テーマの干渉を抑え、あらゆる記事に違和感なく組み込むことが可能です。

3. 紹介コード

ビジュアルを強調したいセクションに最適です。以下のコードをコピーしてご利用ください。


<!-- ギャラリー本体 -->
<div class="vol9-scope">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
  <div class="vol9-container">
    <div class="general-container">

      <input checked class="radio" id="v9-card-1" name="card-vol9" type="radio" />
      <label class="content v9-bg-1" for="v9-card-1">
        <span class="icon"><i class="fas fa-sun"></i></span>
        <h3 class="card-title">タイトル</h3>
      </label>

      <input class="radio" id="v9-card-2" name="card-vol9" type="radio" />
      <label class="content v9-bg-2" for="v9-card-2">
        <span class="icon"><i class="fas fa-cloud-rain"></i></span>
        <h3 class="card-title">タイトル</h3>
      </label>

      <input class="radio" id="v9-card-3" name="card-vol9" type="radio" />
      <label class="content v9-bg-3" for="v9-card-3">
        <span class="icon"><i class="fas fa-cloud-moon"></i></span>
        <h3 class="card-title">タイトル</h3>
      </label>

      <input class="radio" id="v9-card-4" name="card-vol9" type="radio" />
      <label class="content v9-bg-4" for="v9-card-4">
        <span class="icon"><i class="fas fa-snowflake"></i></span>
        <h3 class="card-title">タイトル</h3>
      </label>

      <input class="radio" id="v9-card-5" name="card-vol9" type="radio" />
      <label class="content v9-bg-5" for="v9-card-5">
        <span class="icon"><i class="fas fa-poo-storm"></i></span>
        <h3 class="card-title">タイトル</h3>
      </label>

    </div>
  </div>
</div>

<!-- CSS -->
<style>
.vol9-scope { display: block; margin: 40px auto; font-family: 'Roboto', sans-serif; }
.vol9-container { background: linear-gradient(90deg, #CAF3F2 0%, #6FE3E1 100%); padding: 40px 15px; border-radius: 15px; display: flex; justify-content: center; align-items: center; box-sizing: border-box; }
.general-container { display: flex; flex-wrap: nowrap; gap: 12px; width: 100%; max-width: 1100px; }
.radio { display: none; }
.content { position: relative; flex: 1; border-radius: 48px; cursor: pointer; overflow: hidden; display: block; transition: all 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95); height: 0; padding-top: 75%; background-size: cover; background-position: center; background-repeat: no-repeat; }
.v9-bg-1 { background-image: url('https://images.unsplash.com/photo-1524572217604-17e96c89e56f?auto=format&fit=crop&w=1867&q=80'); }
.v9-bg-2 { background-image: url('https://images.unsplash.com/photo-1444384851176-6e23071c6127?auto=format&fit=crop&w=1867&q=80'); }
.v9-bg-3 { background-image: url('https://images.unsplash.com/photo-1482406611936-43ea538e39d4?auto=format&fit=crop&w=2110&q=80'); }
.v9-bg-4 { background-image: url('https://images.unsplash.com/photo-1483663167873-0cfcc893b78c?auto=format&fit=crop&w=2096&q=80'); }
.v9-bg-5 { background-image: url('https://images.unsplash.com/photo-1475116127127-e3ce09ee84e1?auto=format&fit=crop&w=2100&q=80'); }
.icon { position: absolute; bottom: 16px; left: 17px; width: 40px; height: 40px; background-color: #FFF; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #E9BE71; }
.v9-bg-2 .icon { color: #303335; }
.v9-bg-3 .icon { color: #1F4782; }
.v9-bg-4 .icon { color: #818C96; }
.v9-bg-5 .icon { color: #AB834C; }
.card-title { position: absolute; bottom: 20px; left: 72px; color: #FFF; font-size: 19px; opacity: 0; transform: translateX(30px); transition: opacity 0.3s, transform 0.3s; transition-delay: 0.3s; white-space: nowrap; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); }
.subtitle { display: block; font-size: 14px; }
.radio:checked + .content { flex: 10; }
.radio:checked + .content .card-title { opacity: 1; transform: translateX(0); }
.content:hover { transform: scale(1.02); }
@media screen and (max-width: 768px) { .general-container { flex-direction: column; } .content { width: 100%; padding-top: 60%; margin-bottom: 10px; flex: none; } .radio:checked + .content { padding-top: 80%; } }

[type="radio"]:checked+label:after { -webkit-transform: scale(1.02); transform: scale(1.02); display:none; }
[type="radio"]:not(:checked)+label:before, [type="radio"]:not(:checked)+label:after { border: 2px solid #5a5a5a; display:none; }
</style>