Bloggerデザイン : アコーディオンギャラリー

1. デザインのタイプ

【Vertical Accordion Gallery】
Playfair Displayと縦書き文字を採用した、高級感のあるアコーディオンギャラリーです。

• 

  tokyo

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit nisi sed sollicitudin pellentesque.

• 

  shizuoka

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit nisi sed sollicitudin pellentesque.

• 

  kyoto

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit nisi sed sollicitudin pellentesque.

• 

  hakone

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit nisi sed sollicitudin pellentesque.

2. デザインの特徴

• 奥行きのあるズーム
  ホバー時に画像が拡大し、パネルが広がるダイナミックな演出です。
• 洗練されたフォント
  Playfair Displayを採用し、ギャラリーの質感を高めています。
• スマートな情報表示
  ホバー時のみ説明文が表示される、視覚的に邪魔にならない設計です。

3. 紹介コード

<ul class="blog-accordion">
  <li class="blog-accordion__item">
    <img class="blog-accordion__image" src="画像URL">
    <div class="blog-accordion__overlay"></div>
    <h3 class="blog-accordion__title">タイトル</h3>
    <p class="blog-accordion__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit nisi sed sollicitudin pellentesque.</p>
  </li>
  <li class="blog-accordion__item">
    <img class="blog-accordion__image" src="画像URL">
    <div class="blog-accordion__overlay"></div>
    <h3 class="blog-accordion__title">タイトル</h3>
    <p class="blog-accordion__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit nisi sed sollicitudin pellentesque.</p>
  </li>
  <li class="blog-accordion__item">
    <img class="blog-accordion__image" src="画像URL">
    <div class="blog-accordion__overlay"></div>
    <h3 class="blog-accordion__title">タイトル</h3>
    <p class="blog-accordion__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit nisi sed sollicitudin pellentesque.</p>
  </li>
  <li class="blog-accordion__item">
    <img class="blog-accordion__image" src="画像URL">
    <div class="blog-accordion__overlay"></div>
    <h3 class="blog-accordion__title">タイトル</h3>
    <p class="blog-accordion__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit nisi sed sollicitudin pellentesque.</p>
  </li>
</ul>

<style>
/* フォントのインポート */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&family=Nunito+Sans:wght@300;400&display=swap");

.blog-accordion { display: flex; width: 100%; height: 400px; margin: 0 !important; padding: 0 !important; list-style: none; overflow: hidden; font-family: "Nunito Sans", sans-serif; }
.blog-accordion__item { position: relative; flex-grow: 1; width: 100px; height: 100%; overflow: hidden; transition: flex-grow 300ms ease; background: #141414; margin: 0 !important; padding: 0 !important; }
.blog-accordion__image { position: absolute; top: 0 !important; left: 0; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; transition: transform 0.3s ease; margin: 0 !important; padding: 0 !important; border: none !important; }
.blog-accordion__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 15, 15, 0) 0%, #111111 100%); opacity: 1; transition: opacity 0.4s ease-out; }
.blog-accordion__title { position: absolute; bottom: 0.8em; right: 0.5em; writing-mode: vertical-rl; color: #fafafa; font-family: "Playfair Display", serif; font-weight: 400; font-size: clamp(1.2em, 2.5vw, 2.2em); letter-spacing: 0.15em; text-transform: uppercase; margin: 0; display: flex; align-items: center; line-height: 1; }
.blog-accordion__title::after { content: "+"; margin-top: 0.3em; font-family: "Nunito Sans", sans-serif; }
.blog-accordion__description { position: absolute; width: 65%; left: 1.5em; bottom: 1.5em; color: #fafafa; font-size: 13px; line-height: 1.6; transform: translateY(200px); opacity: 0; transition: opacity 0.3s ease-out, transform 0.3s ease-out; margin: 0; }
.blog-accordion__item:hover { flex-grow: 2; }
.blog-accordion__item:hover .blog-accordion__image { transform: scale(1.1); }
.blog-accordion__item:hover .blog-accordion__overlay { opacity: 0.4; }
.blog-accordion__item:hover .blog-accordion__title::after { content: none; }
.blog-accordion__item:hover .blog-accordion__description { transform: translateY(0); opacity: 1; }
</style>