_sidebar.html

<!-- サイドバー -->
<div class="sidebar">
  <!-- プロフィール -->
  <aside class="profile">
    <h2>PROFILE</h2>
    <figure>
      <img src="images/profile.webp" alt="WAVEの管理人" class="oval">
    </figure>
    <p>
      部屋の掃除は好きだけれど、お皿洗いは苦手。
      毎日そこら辺をお散歩しています。
    </p>
  </aside>

  <!-- ピックアップ記事 -->
  <aside class="pickup">
    <h2>PICKUP</h2>
    <ul>
      <li>
        <a href="post01.html">
          <figure>
            <img src="images/note.webp" alt="">
          </figure>
          <h3>スケッチが楽しくなるノート</h3>
        </a>
      </li>
      <li>
        <a href="post02.html">
          <figure>
            <img src="images/plant.webp" alt="">
          </figure>
          <h3>緑のアクセントならこれ</h3>
        </a>
      </li>
      <li>
        <a href="post03.html">
          <figure>
            <img src="images/items.webp" alt="">
          </figure>
          <h3>小物と飾り棚の組み合わせ</h3>
        </a>
      </li>
      <li>
        <a href="post04.html">
          <figure>
            <img src="images/chair.webp" alt="">
          </figure>
          <h3>居心地のいい部屋にあるもの</h3>
        </a>
      </li>
      <li>
        <a href="post05.html">
          <figure>
            <img src="images/tile.webp" alt="">
          </figure>
          <h3>カラフルなタイル</h3>
        </a>
      </li>
      <li>
        <a href="post06.html">
          <figure>
            <img src="images/recipe.webp" alt="">
          </figure>
          <h3>美味しいオムレツのレシピ</h3>
        </a>
      </li>
    </ul>
  </aside>
</div>