ブログのデザインをもっと使いやすくしたい時に便利なのが、スマホサイトでよく見るハンバーガーメニューです。
ハンバーガーメニューって何？
三本線のマークがハンバーガーに見えることからそのように呼ばれています。その他、ドロワー／トグル／折り畳み…と呼ばれることもあります。
三本線のアイコンをタップするとメニューが開く仕組みで、限られた画面でもスッキリ情報をまとめられます。
今回の記事では、ハンバーガーメニューを簡単に設置できるジェネレーターを用意しました。
必要な項目を入力するだけで、プロフィールカードやSNSボタン、カテゴリーのリンクなどのデザインを自動で生成できます。
手順としては、たった3つ！
「デザインを変えるのは難しい、苦手」という方でも、迷わず設置できるはずです。
全体の手順
- 固定CSSをコピー＆貼り付け。
- ジェネレーターでHTMLコードを生成➡︎コピー＆貼り付け。
- 固定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コードを生成してコピーする。
プロフィール
SNSボタン
XとInstagramはIDのみ入力してください。
メニューなどのリンク
プレビュー
デザインがリアルタイムで更新されます。
枠内の☰を押してデザインをご確認ください。
80％ほど縮小して表示されています。
枠内の☰を押してデザインをご確認ください。
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補足が、ブログ作りの手助けになれば嬉しいです。
デザインは少し手を加えるだけでも、読みやすさや使いやすさが大きく変わります。
「もう少しここを変えたいな」という部分があれば、ぜひ気軽にアレンジしてみてくださいね。
これからも、ブログがもっと楽しく続けられるようなカスタマイズを紹介していきます。
最後まで読んでいただき、ありがとうございました！
