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

ブログのデザインをもっと使いやすくしたい時に便利なのが、スマホサイトでよく見るハンバーガーメニューです。

ハンバーガーメニューって何？

三本線のマークがハンバーガーに見えることからそのように呼ばれています。
その他、ドロワー／トグル／折り畳み…と呼ばれることもあります。

三本線のアイコンをタップするとメニューが開く仕組みで、限られた画面でもスッキリ情報をまとめられます。

今回の記事では、ハンバーガーメニューを簡単に設置できるジェネレーターを用意しました。
必要な項目を入力するだけで、プロフィールカードやSNSボタン、カテゴリーのリンクなどのデザインを自動で生成できます。

手順としては、たった3つ！
「デザインを変えるのは難しい、苦手」という方でも、迷わず設置できるはずです。

全体の手順

固定CSSをコピー＆貼り付け。
ジェネレーターでHTMLコードを生成➡︎コピー＆貼り付け。
固定scriptをコピー＆貼り付け。

check!

実際の見え方や動作はこちらから確認できます！
turtlecat222.hatenablog.com

①固定CSS（そのままコピペ）
- CSSコードを貼り付ける場所
  - 無料版はてなブログの場合
②HTMLを自動生成する
- HTMLを貼り付ける場所
③固定script（そのままコピペ）
- scriptを貼り付ける場所

①固定CSS（そのままコピペ）

コードの使用について

公開しているコードは個人利用でのコピペ、ご自身でのカスタマイズはご自由にどうぞ。
第三者にカスタマイズを依頼すること／カスタマイズしたコードの再配布はご遠慮ください。
カスタマイズ方法をブログなどで紹介する場合は本記事をリンクして、引用である旨の表記をしていただきますようお願い致します。

/* --- ハンバーガーボタン --- */
.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;          /* 文字色 */
}

様々なブログで使いやすいシンプルな配色のデザインになっています。コードの補足を参考にカスタマイズしていただいてもOKです。

CSSコードを貼り付ける場所

CSSコードの使い方

はてなブログのトップページ（PC版）から【デザイン】へアクセスする。
上記画像①→②→の順番に選択して、③にCSSコードを貼り付ける。
【変更を保存する】を押して完了。

無料版はてなブログの場合

ハンバーガーメニューのボタンは上の画像の赤丸部分に設置されます。

はてなブログによって設置されているヘッダーがあるので、ハンバーガーボタンが隠れます（隠れているだけでスクロールすると現れます）。

隠れない位置に配置したい場合はコードの最初の方にある【top: 10px;】の数字をお好みで増やしてください。

②HTMLを自動生成する

手順の解説

必要な項目を入力する。
プレビューでデザインを確認する。
HTMLコードを生成してコピーする。

プロフィール

画像URL

（ ➡ 画像URLのコピー方法はこちら）

お名前紹介文

SNSボタン

XとInstagramはIDのみ入力してください。

読者登録XInstagram

メニューなどのリンク

リンク11-URL

プレビュー

デザインがリアルタイムで更新されます。
枠内の☰を押してデザインをご確認ください。
80％ほど縮小して表示されています。

コードは下に表示されます。

HTMLを貼り付ける場所

HTMLコードの使い方

はてなブログのトップページ（PC版）から【デザイン】へアクセスする。
上記画像①→②→の順番に選択して、③にHTMLを貼り付ける。
【変更を保存する】を押して完了。

改行ができていない場合は、改行させたい位置に<br>を記入してください。

③固定script（そのままコピペ）

<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>

scriptを貼り付ける場所

HTMLコードの使い方

はてなブログのトップページ（PC版）から【デザイン】へアクセスする。
上記画像①→②→の順番に選択して、③にscriptコードを貼り付ける。
【変更を保存する】を押して完了。

ジェネレーターで作ったHTMLコードの後ろに貼り付けてください。
HTMLの前に貼り付けると動作しないのでご注意ください。

今回ご紹介したハンバーガーメニューのジェネレーターとCSS補足が、ブログ作りの手助けになれば嬉しいです。

デザインは少し手を加えるだけでも、読みやすさや使いやすさが大きく変わります。
「もう少しここを変えたいな」という部分があれば、ぜひ気軽にアレンジしてみてくださいね。

これからも、ブログがもっと楽しく続けられるようなカスタマイズを紹介していきます。
最後まで読んでいただき、ありがとうございました！

yunico's fluffy life

横着主婦の暮らしの詰め合わせ