制作のポイント

• 1.WordPressを使用した構造

  

  WordPressのカスタム投稿機能を活用し、Worksセクションを構築しました。
  各作品の画像やタイトルを動的に表示することで、作品追加時にも管理画面から更新できる設計にしています。

  ▾コードを表示

  PHP

                            
  Worksセクション  作品の一覧表示
  <section id="works" class="works">
    <div class="works__inner inner">
      <div class="works__header">
        <h2 class="section__title works__title js-in-view slide-in fade-in">Works</h2>
      </div>
  
      <ul class="works__list">
      <?php
      $args = array(
        'post_type' => 'works',
        'posts_per_page' => -1
      );
      $works_query = new WP_Query($args);
      ?>
  
      <?php if ($works_query->have_posts()) : ?>
        <?php while ($works_query->have_posts()) : $works_query->the_post(); ?>
  
          <li class="works__item">
            <!-- 画像 -->
            <a href="<?php the_permalink(); ?>" class="works__image">
              <?php if (has_post_thumbnail()) : ?>
                <?php the_post_thumbnail('large'); ?>
              <?php endif; ?>
            </a>
  
            <div class="works__content">
              <!-- タイトル -->
              <a href="<?php the_permalink(); ?>" class="works__content-title">
                <?php the_title(); ?>
              </a>
  
              <!-- テキスト -->
              <div class="works__content-text">
                <?php the_excerpt(); ?>
              </div>
  
              <!-- リンク -->
              <div class="works__link">
                <a href="<?php the_permalink(); ?>" class="works__link-text">
                  <span>view more ▸</span>
                </a>
              </div>
            </div>
          </li>
  
        <?php endwhile; ?>
        <?php wp_reset_postdata(); ?>
      <?php endif; ?>
      </ul>
    </div>
  </section>
                            
                          

• 2.レスポンシブ設計

  

  画像と文章が横並びになるセクションで、clampを使用して最小幅・最大幅を指定しながら、画面幅に応じて要素の大きさや幅が変化するように設計しました。
  これにより、様々なデバイス環境でも快適に閲覧できます。

  ▾コードを表示

  HTML

                            
  <li class="works__item">
    <a href="" class="works__image">
      <img src="../img/works-img1.png" alt="架空のアクセサリー店のLP" />
    </a>
  
    <div class="works__content">
      <a href="" class="works__content-title">
        架空のアクセサリー店のLP
      </a>
  
      <p class="works__content-text">
        スクールの課題で制作した、架空のアクセサリーストアのLPです
      </p>
  
      <div class="works__link">
        <a href="" class="works__link-text">
          <span>詳細を見る ▸</span>
        </a>
      </div>
    </div>
  </li>
                            
                          

  CSS

                            
  .works__item {
  	align-items: center;
  	flex-direction: row;
  	gap: clamp(40px, 3vw, 120px);
  	justify-content: center;
  	padding: 70px;
  }
  .works__image {
  	width: clamp(400px, 45vw, 500px);
  }
  .works-content__title {
  	font-size: clamp(20px, 2.5vw, 32px);
  	letter-spacing: 3.2px;
  }
  .works-content__text {
  	font-size: clamp(12px, 2.5vw, 16px);
  }
                            
                          

• 3.自身の趣味を活かしたデザイン

  

  好きな世界観をイメージし、統一感のあるデザインに仕上げました。
  画像やロゴ、配色など、趣味の要素を取り入れながら自分らしさを表現しています。