はてなブログって、結構しっかりとhtmlやcssを書かないとメニュー1つ付けられないんですよね。
今回は、webエンジニアのharuが、はてなブログでハンバーガーメニュー（三）を設置した方法を紹介します。
このようなメニューを作っていきます
「デザイン>ヘッダ>タイトル下」にhtmlを入力する
PC版のはてなブログの管理画面を開きます。
PC版の管理画面を開いたら、デザインをクリック。
デザインを開いたら、ヘッダを開き、タイトル下（画像部分）にhtmlを入力します
この部分にhtml書きます。
試しに以下のhtmlを入れてみましょう。
<div class="hamburger-menu">
<input type="checkbox" id="menu-btn-check">
<label for="menu-btn-check" class="menu-btn"><span></span></label>
<div class="menu-content">
<ul>
<li>
<a href="/archive/category/レシピ">レシピ</a>
<ul class="category-child">
<li>
<a href="/archive/category/紅茶">
紅茶
</a>
</li>
<li>
<a href="/archive/category/緑茶">
緑茶
</a>
</li>
<li>
<a href="/archive/category/ハーブティー">
ハーブティー
</a>
</li>
<li>
<a href="/archive/category/コーヒー">
コーヒー
</a>
</li>
<li>
<a href="/archive/category/カクテル">
カクテル
</a>
</li>
</ul>
</li>
<li>
<a href="/archive/category/お出かけ">お出かけ</a>
</li>
<li>
<a href="/archive/category/暮らし">暮らし</a>
</li>
<li>
<a href="/archive/category/その他">その他</a>
</li>
</ul>
</div>
</div>
「レシピ」「紅茶」「緑茶」などの日本語部分を、自分のカテゴリ名に書き換えるとカテゴリ名からメニューを作れる仕組みです。
「デザイン>デザインCSS」にメニュー用のCSSを入力する
デザインCSSにメニュー用のCSSに、追記していきます。
#blog-title{
height: auto;padding: 20px 0 50px 0;
}
#blog-title a {
color: #dea08c;
}
h1#title {
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0;
font-weight: normal;
letter-spacing: 0.15em;
}
#blog-title-inner {
width: 100%;
background: none;
}
div#blog-title-inner {
text-align: left;
}
.menu-btn {
top: 10px;
right: 10px;
display: flex;
position: absolute;
height: 60px;
width: 60px;
justify-content: center;
align-items: center;
z-index: 90;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
content: '';
display: block;
height: 3px;
width: 25px;
border-radius: 3px;
background-color: #dea08c;
position: absolute;
}
.menu-btn span:before {
bottom: 8px;
}
.menu-btn span:after {
top: 8px;
}
#menu-btn-check {
display: none;
}
.menu-content {
position: absolute;
top: 0;
right: 0;
opacity: 0;
transition: all 0.5s;
z-index: 10;
pointer-events: none;
}
.menu-content ul {
margin: 77px 0px 0;
padding-left: 0;
}
.menu-content ul li {
border-bottom: solid 1px #dea08c;
list-style: none;
background-color: #fff;
padding-left: 1.25em;
}
.menu-content ul li a {
display: block;
width: 100%;
font-size: 15px;
box-sizing: border-box;
text-decoration: none;
padding: 9px 15px 10px 0;
position: relative;
color: #dea08c;
}
.menu-content ul li a::before {
content: "";
width: 7px;
height: 7px;
border-top: solid 2px #ffffff;
border-right: solid 2px #ffffff;
transform: rotate(45deg);
position: absolute;
right: 11px;
top: 16px;
}
.menu-content ul li ul.category-child {
margin-top: 0;
}
.menu-content ul li ul.category-child li {
border-bottom: dashed 1px #dea08c;
}
.menu-content ul li ul.category-child li:last-child {
border: none;
}
#menu-btn-check:checked ~ .menu-content {
opacity: 1;
}
.hamburger-menu {
position: relative;
bottom: 76px;
}
#menu-btn-check:checked ~ .menu-btn span {
background-color: rgba(255, 255, 255, 0);
}
#menu-btn-check:checked ~ .menu-btn span::before {
bottom: 0;
transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
top: 0;
transform: rotate(-45deg);
}
#menu-btn-check:checked ~ .menu-content{
pointer-events: auto;
}
.entry-header {
position: initial;
}
ブログタイトルの大きさを調整して、ハンバーガーメニュー（三）が綺麗に表示されるようにしています。
その部分の調整はそれぞれで行ってください。
難しい場合には、コメントを頂ければ相談に乗ります。お気軽にコメントまたはTwitter（@g_masquerade）にてご連絡ください。
