ハンバーガーメニューを自動生成┃入力するだけでブログに設置できるジェネレーターを作りました！

/* --- ハンバーガーボタン --- */
.hamburger {
  position: fixed;
  top: 10px;     /* 画面上からの距離 → 上下位置を調整したい場合ここを変更 */
  right: 20px;   /* 右からの距離 → ボタンの横位置を調整する箇所 */
  z-index: 1100;
}

.hamburger-btn {
  font-size: 28px;     /* ハンバーガーアイコンの大きさ */
  background: none;    /* 背景色 */
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 1101;
  width: 40px;         /* ボタンの横サイズ */
  height: 40px;        /* ボタンの縦サイズ */
  display: flex;
  align-items: center;
  justify-content: center;
}

.hamburger-btn::after {
  content: "☰";
  transition: 0.3s ease;
}

.hamburger-btn.active::after {
  content: "×";
}

/* --- スライドメニュー本体 --- */
.hamburger-menu {
  position: fixed;
  top: 0;
  right: -100%; 
  width: 280px;    /* 幅 */
  height: 100%;
  background: #fff;    /* 背景色 */
  box-shadow: -2px 0 6px rgba(0,0,0,0.2);  /* 影（濃くしたい時は最後の数値を上げる） */
  transition: right 0.3s ease;
  padding: 20px;       /* メニュー内の余白 */
  z-index: 1000;
  overflow-y: auto;    /* 縦スクロール許可 */
  -webkit-overflow-scrolling: touch;
}

.hamburger-menu.open {
  right: 0; 
}

/* --- メニュー内部レイアウト --- */
.menu-content {
  padding: 0;
}

/* プロフィールカード */
.menu-profile-card {
  background: #fff;     /* カードの背景色 */
  padding: 20px 16px;   /* カード全体の余白 */
  border-radius: 14px;  /* カードの丸み */
  box-shadow: 0 3px 10px rgba(0,0,0,0.08); /* カードの影 */
  text-align: center;
  margin-bottom: 25px;
}

/* 画像 */
.menu-profile-img {
  width: 110px;        /* プロフィール画像の大きさ */
  height: 110px;
  border-radius: 50%;  /* 丸く表示 */
  margin: 0 auto 10px;
  display: block;
  object-fit: cover;
}

/* 名前 */
.menu-profile-name {
  font-size: 18px;      /* 文字サイズ */
  font-weight: bold;
  margin-bottom: 6px;
  color: #333;          /* 文字色 */
}

/* 紹介文 */
.menu-profile-text {
  font-size: 14px;      /* 文字サイズ */
  color: #666;          /* 文字色 */
  line-height: 1.5;
}

/* ▼SNSボタン（横並び） */
.sns-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.sns-buttons a {
  display: block;
  padding: 5px 10px;    /* ボタン内の余白 */
  border-radius: 8px;   /* ボタンの丸み */
  text-align: center;
  font-size: 16px;      /* 文字サイズ */
  text-decoration: none;
  color: #FFF;          /* 文字色 */
}

/* SNSごとの色 */
.sns-btn.hatena { background: #00A4DE; }    /* 読者登録 */
.sns-btn.x-twitter { background: #000; }    /* X */
.sns-btn.instagram { background: #E1306C; } /* Instagram */

/* ▼リンク一覧 */
.menu-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 30px 0;
}

.menu-link {
  text-decoration: none;
  font-size: 18px;      /* 文字サイズ */
  color: #333;          /* 文字色 */
}

<script>
const btn = document.querySelector('.hamburger-btn');
const menu = document.querySelector('.hamburger-menu');

btn.addEventListener('click', () => {
  btn.classList.toggle('active');  // ボタンの文字切替
  menu.classList.toggle('open');   // メニューをスライド表示
});
</script>